承接自：React 开发环境的配置

    React 中文网
    React.js 中文文档上线了
    github 地址
    官方学习地址
    在线编辑 React 地址
    阮一峰的 “React 入门实例教程”

    • 这里我因为未在官网上找到相关的源码 Demo 我这里选择下载阮一峰老师的来进行使用

    下载地址：https://github.com/ruanyf/react-demos/archive/master.zip

    • 下载之后将其复制至桌面并解压，之后进入 build 目录下

    image.png
    上面文件的描述：
    react.js 是我们开发版本的核心文件
    react-with-addons.js 是一个带 react 所有插件的文件
    react-dom.js 这个是我们在开发式进行 Dom 相关操作也就是 render 时使用的文件

    • 将目录中的 react.js 和 react-dom.js 文件复制进上篇文章创建的 ReactTest 文件夹中，接下来就可以将 ReactTest 文件夹拖拽至 sublime text 编辑器中进行开发了
    • 新建一个 index.html 文件并对其进行编辑
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>第一个 React 程序</title>
    6.     <!-- 引入两个关键的 js 文件 -->
    7.     <script type="text/javascript" src="react.js"></script>
    8.     <script type="text/javascript" src="react-dom.js"></script>
    9. </head>
    10. <body>
    11.     <!-- 页面里面放置一个容器 -->
    12.     <div id="JS-container"></div>
    13. </body>
    14. </html>
    • 再新建一个 index.es 文件进行编辑，需要注意的是练一个标点符号都不能错否则在下面编译时会不通过的 ``` //声明一个变量 var Hello = React.createClass({ //通过 React 创建一个类 render: function() {
      1.   //这个类返回的是一段标签就是所谓的 JSX 
      2.   return <div>Hello {this.props.name}</div>; //里面拿到的是下面自定义 Dom 的一个 name 属性的值
      }

    });

    ReactDOM.render( //再定义一个带属性的标签 , //获取页面 ID document.getElementById(‘JS-container’) );

    2. - 因为浏览器直接肯定是不能解析上面的代码的，所以这里需要编译一下 index.es 文件，工具的配置以及使用方法已在[前文中](https://www.jianshu.com/p/9be2dc4f5095)有过介绍，这里便直接执行编译命令了 `ctrl + shift + p` 再输入 `Babel Transform`
    3. - 之后再新建一个 ts.js 文件，再将上面编译好的代码片段复制进来并保存，最后在 index.htm 代码中将其引入这里需要放到 body 的最底部<br />
    4. ts.js 源码

    “use strict”;

    //声明一个变量 var Hello = React.createClass({ displayName: “Hello”, //通过 React 创建一个类 render: function render() { //这个类返回的是一段标签就是所谓的 JSX return React.createElement( “div”, null, “Hello “, this.props.name ); //里面拿到的是下面自定义 Dom 的一个 name 属性的值 }

    });

    ReactDOM.render( //再定义一个带属性的标签 React.createElement(Hello, { name: “World” }), //获取页面 ID document.getElementById(‘JS-container’));

    2. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-9c60e7803169bdb2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    5. - 之后在浏览器中打开该页面便可以看到 "Hello World" 的输出了
    7. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-c699e8e211b8a504.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    10. - 上面的是 ES5 的写法，下面写一下 ES6 的，新建一个 indexes6.js 文件并编辑

    “use strict”; //这个使用了一个继承的写法 class Hello extends React.Component { //构造函数继承 constructor(props) { super(props); } render() { return

    Hello {this.props.name}
    } }

    ReactDOM.render( , document.getElemnetById(‘JS-container’) );

    ```

    • 将其编译 之后讲编译后的代码复制到 ts.js 中并保存，再刷新浏览器

    image.png

    • 可以看到也是可以成功的输出的，对比性的查看 index.es 和 indexes6.js 文件会发现 es6 的写法语义化的比较好了

    image.png
    只是说编译出来的代码比之前的多了，在真正做项目的时候下面的这些方法都可以封装成公共的代码的这个是没有问题的，主要意思就是说 拥抱更有优秀的 ES6
    image.png