安装react及babel的插件的使用

手记：

---

学习路径

1. 安装react
2. 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>