第一个React程序

开发程序示例

  • index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>let const变量</title>
  6. </head>
  7. <body>
  8.     <div id="example"></div>
  11.     <script src="http://cdn.bootcss.com/react/15.3.2/react.min.js"></script>
  12.     <script src="http://cdn.bootcss.com/react/15.3.2/react-dom.js"></script>
  14.     <script src="browser.min.js"></script>
  16.     <script type="text/babel" src="src/test.js"></script>
  17. </body>
  18. </html>

一共用了三个库： react.js 、react-dom.js和Browser.js，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js是提供与 DOM 相关的功能，Browser.js的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

  • test.js
  1. //JSX语法
  2. ReactDOM.render(
  3.  <h1>Hello, China!</h1>, 
  4.  document.getElementById('example')
  5. ); 
  7. //es6语法,纯测试打包
  8. let input = [];
  9. input.map(item => item + 1);

在服务器环境下运行：http://localhost:8080/react/a.html，会打印Hello, China!

babel人肉打包

  • 省略安装babel安装命令
  • .babelrc
    注意此文件要在命令行创建：否则有可能创建不成功，命令touch .babelrc
{
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": []
  }

执行命令：

  1. $ babel src --out-dir build

这个时候在build目录下回出现test.js，babel把ES6与JSX同时编译。编译后的效果如下：

  1. 'use strict';
  3. //JSX语法
  4. ReactDOM.render(React.createElement(
  5.   'h1',
  6.   null,
  7.   'Hello, China!'
  8. ), document.getElementById('example'));
  10. //es6语法
  11. var input = [];
  12. input.map(function (item) {
  13.   return item + 1;
  14. });

调用页面index.html，type属性由原来的type/babel => type/javascript才能正确加载编译后的test.js

  1. <script type="text/javascript" src="build/test.js"></script>

项目目录结构:
Alt text

参考文档

http://www.ruanyifeng.com/blog/2016/01/babel.html

http://www.07net01.com/2016/05/1499081.html

http://www.tuicool.com/articles/v6rQfye

http://reactjs.cn/react/docs/getting-started.html

http://www.css88.com/archives/5632#more-5632

http://www.ruanyifeng.com/blog/2015/03/react.html

https://segmentfault.com/a/1190000004170151