React环境准备：
    NodeJS，React Dev Tools

    安装插件React Dev Tools：
    1. 如果可以访问Google，则可以直接在Chrome Store里安装；

    1. 不能访问Google，可以在GIthub上获取React Dev Tools的源码，build出这个插件；
    2. 搜索React Dev Tools，文档中说这个插件在v3版本中，所以先把对应的版本下载到本地；
    3. 到根目录，rpm install，然后到package.json中找到对应的build命令，”build:extension:chrome”: “node ./shells/chrome/build”, 试了build:extension:chrome 不行，就直接用node ./shells/chrome/build进行build；
    4. build完成后，进入到目录react-devtools-3\shells\chrome\build，试了把unpacked 文件夹拖到了chrome://extensions里不行，那就用手动点击 “Load Unpacked”，然后选中这个文件夹就行了；
    5. 关闭React页面，然后再次打开就看到多了一个React tab；

    React代码初识

    1. 可直接在HTML中写React 代码：，引用react相关js，在script标签里注明 type=”text/babel”，这样才能识别为react的code语法，如果去掉type=”text/babel”，就会报错。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8" />
    5.     <title>Hello React!</title>
    6.     <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    7.     <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    8.     <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    9. </head>
    10. <body>
    12. <div id="example"></div>
    13. <script type="text/babel">
    14.     class HelloWorld extends React.Component {
    15.         render() {
    16.             return (
    17.                 <div>
    18.                     hello world react
    19.                 </div>
    20.             );
    21.         }
    22.     }
    24.     ReactDOM.render(
    25.         <HelloWorld/>,
    26.         document.getElementById('example')
    27.     );
    28. </script>
    30. </body>
    31. </html>
    1. 在js中写jsx的react 代码：
    1. import React, {Component} from 'react';
    2. import ReactDOM from 'react-dom';
    3. import './index.css';
    4. import * as serviceWorker from './serviceWorker';
    6. class App extends Component{
    7.     render(){
    8.         return (<div>David</div>);
    9.     }
    10. }
    12. ReactDOM.render(<App />, document.getElementById('root'));
    14. serviceWorker.unregister();

    React生态：
    在Github上的项目 awesome-react包含了React的各个方面， 脚手架，可视化，数据管理，各类UI组件库，企业级解决方案。
    https://github.com/enaqx/awesome-react

    React代码规范：
    standard.js规范

    1. npm install standard —save-dev
    2. npm install snazzy —save-dev
    3. 配置 package.json，添加一条名为lint 的npm script “scripts”: {“lint”: “standard —verbose|snazzy”}
    4. 使用插件，实时检查代码规范；

    bem css规范：

    通过阅读Element-UI源码来分析学习BEM规范, 使用BEM规范语义化更加鲜明，阅读更容易理解， B意思是Block 块，E意思是Element 元素，M意思是Modifier 修饰器。块与元素之间使用__ 双下划线连接，块或元素与修饰器之间使用— 双中划线连接。

    .person{}
    .personhand{} => 双下划线 代表子元素和子组件；
    .person—female{} => 双中划线 —代表元素状态；
    .person—female__hand{} => 代表female状态下的子组件；

    1. <button class="button">
    2.  Normal Button
    3. </button>
    4. <button class="button--state-success">
    5.   Success Button
    6. </button>
    7. <div class="footer">
    8.   <button class="footer__button">footer button</button>
    9.   <button class="footer__button--state-success">footer button</button>
    10. </div>
    12. .button {} /*基础按钮*/
    13. /*通过双中划线连接修饰器 这样语义化更加鲜明*/
    14. .button--state-success {} /*状态为成功的button*/
    15. .footer__button{} /*底部按钮样式*/
    16. .footer__button--state-success{} /*底部状态为成功的按钮样式*/
    17. /*state-success 多个单词直接使用-连接*/

    学习链接：https://www.jianshu.com/p/54b000099217