手记：
学习路径
- 安装react
- JSX的语法及babel插件
jsx-control-statements控制循环插件。
安装的两种方式：
1.CDN
http://staticfile.org/
2.NPM
//全局安装react CLI
> npm i -g create-react-app
//创建应用
> create-react-app react-test
//进入react-test项目目录中，运行项目
> cd react-test
> npm start
1.Babel
使用babel可以将ES2015的代码编译成ES5的，也可以将JSX编译成javascript函数。
这种过程称为‘转译’ ，因为它将源代码编译成另一份新的源代码，而不是可执行文件。
//全局安装
npm i -g babel-cli
babel src.js -o output.js
npm i -g babel-preset-es2015 babel-preset-react
在当前根文件夹下创建一个 `.babelrc` 的配置文件，并写入以下代码来告诉Babel使用这些预设的配置：
{"presets":["es2015","react"]}
2.设置属性
//创建DOM元素
React.reactElement();
//创建元素并设置元素属性。
React.createElement('img',{
src:'http:www.baidu.com',
art:'百度一下，你就知道'
})
//创建子元素并设置元素属性
ReactDOM.render(
React.createElement(
'div',
{className:'div'},
'jde ',React.createElement('a',{
href:'https://www.baidu.com',
title:'百度一下,你就知道'
},'click Me')
),
document.getElementById('root')
)
3.JSX 和 HTML 的差异
属性
class和for都是JS的保留字，所以class和for在jsx中要使用className 和 htmlFor。
样式
样式传入JS对象的方式[驼峰命名法]
<div style={{ backgroundColor:'red' }}/>
根元素
顶层元素不能有多个元素。
空格
JSX会忽略元素之间的空格。
布尔值属性
属性未赋值会默认设置为true,比如html的disabled属性。
4.流程控制
条件控制语句
if : {true && <login/> }
if...else : {true ? <login /> : <logout />}
Babel插件的条件控制：
安装jsx-control-statements
npm i -g jsx-control-statements
在.babelrc中添加jsx-control-statements
使用方法如下：
<If condition={this.canShowSecretData}>
<login />
</If>
jsx-control-statements 插件会转译为三元表达式，如下：
{canShowSecretData ? <login /> : null}
循环
使用map函数循环。
<ul>
{users.map(user=><li>{user.name}</li>)}
</ul>
//使用jsx-control-statements插件循环：
<ul>
<For each="user" of={this.props.users}>
<li>{user.name}</li>
</For>
</ul>
