react基础语法（二）常用语法如：样式 ，自定义属性，常用表达式
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head> <body>
<div id="app"> </div>
<!--<script type="text/babel" src="domrender.js"></script>--> <!--独立js文件-->
<script type="text/babel">
//1.JSX 中使用 JavaScript 表达式;表达式写在花括号 {}中;
//2.JSX 中不能使用 if else 语句，但可以使用三元运算表达式来替代;
//3.JSX执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。
var newStyle = {
fontSize: 30,
color: 'red'
};
var arr = [1,2,3,4,5,6];
ReactDOM.render(
<div>
{/*注释...这是注释方法不会显示在控制台*/}
<h2>菜鸟学习 React</h2>
<p data-myselfattr = "nice">自定义属性的用法</p>
<h1>{3+3}简单计算</h1>
<h1>{2 == 1 ? 'True!' : 'False'}---三元运算符</h1>
<p style={newStyle}>React推荐使用内联样式,会在指定元素数字后自动添加 px</p>
<p>{arr}---JSX 允许在模板中插入数组，数组会自动展开所有成员结果为:123456</p>
</div>
,
document.getElementById('app')
); </script>
</body> </html>
react基础语法（二）常用语法如：样式 ，自定义属性，常用表达式的更多相关文章
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- react基础篇二
组件 & Props & 生命周期 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件从概念上看就像是函数,它可以接收任意的输入值(称之为“p ...
- Java基础知识二次学习--第六章 常用类
第六章 常用类 时间:2017年4月26日16:14:49~2017年4月26日16:56:02 章节:06章_01节~06章_06节 视频长度:20:57+1:15+8:44+1:26+11:2 ...
- webpack react基础配置二 热加载
用到 webpack-dev-server 先安装,注意 装到全局 还是本项目我也没注意 因为之前一直报错,有很小可能是安装到本地解决了,或者是我网络问题: 装到全局:$ npm install ...
- react基础学习 二——生命周期
生命周期mount: mounting装载创建 update更新 unmounting卸载 错误捕获 注意点:生命周期函数的 作用,什么之后用 只有类式组件有生命周期,函数式组件没有生命周期 moun ...
- Python 基础语法(二)
Python 基础语法(二) --------------------------------------------接 Python 基础语法(一) ------------------------ ...
- Swift语法基础入门二(数组, 字典, 字符串)
Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- Java03-Java语法基础（二）运算符
Java语法基础(二)运算符 一.运算符 1.算数运算符:+.-.*./.% 1)双目运算符:二元运算符,参加运算的对象有两个(+.-.*./.%) 2)单目运算符:一元运算符,参加运算的对象只有一个 ...
随机推荐
- Oracle:ORA-01790: expression must have same datatype as corresponding expression
今天有现场报sql错误,错误sql语句 类似 select * from tableA where (exists 条件A or exists 条件B), 单独执行 select * f ...
- hadoop源码剖析--$HADOOP_HOME/bin/hadoop脚本文件分析
1. $HADOOP_HOME/bin/ hadoop #!/usr/bin/env bash# Licensed to the Apache Software Foundation (ASF) un ...
- codeforces 690D2 D2. The Wall (medium)(组合数学)
题目链接: D2. The Wall (medium) time limit per test 2 seconds memory limit per test 256 megabytes input ...
- 【POJ 3461】 Oulipo
[题目链接] 点击打开链接 [算法] KMP [代码] #include <algorithm> #include <bitset> #include <cctype&g ...
- MySQL主从详细安装步骤
网站: 程序在:web服务器192.168.1.100上面 数据库在:MySQL服务器192.168.1.123上面 实现目的:增加一台MySQL备份服务器(192.168.1.124),作为MySQ ...
- LeNet-5结构分析及caffe实现————卷积部分
占坑,记录 1.lenet-5的结构以及部分原理 2.caffe对于lenet-5的代码结构 图一 图一是整个LeNet-5的结构图,要点有:convolutions.subsampling.full ...
- File System Programming---(三)
Accessing Files and Directories Before you can open a file, you first have to locate it in the file ...
- Mysql基础调优
mysql基础的优化方式 1.利用索引加快查询速度 2.利用查询缓存或者旁挂式缓存,提高访问速度 缓存:k/v key:查询语句的hash值 value:查询语句的执行结果 哪些查询可能不会被缓存? ...
- easyui 动态添加标签页，总结
步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="e ...
- UILabel和UIButton添加下划线
关于UILabel和UIButton有的时候需要添加下划线,一般有两种方式通过默认的 NSMutableAttributedString设置,第二种就是在drawRect中画一条下划线,本文就简单的选 ...