第一个React程序

开发程序示例

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let const变量</title>
</head>
<body>
    <div id="example"></div>


    <script src="http://cdn.bootcss.com/react/15.3.2/react.min.js"></script>
    <script src="http://cdn.bootcss.com/react/15.3.2/react-dom.js"></script>

    <script src="browser.min.js"></script>

    <script type="text/babel" src="src/test.js"></script>
</body>
</html>

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

  • test.js
//JSX语法
ReactDOM.render(
 <h1>Hello, China!</h1>, 
 document.getElementById('example')
); 

//es6语法,纯测试打包
let input = [];
input.map(item => item + 1);

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

babel人肉打包

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

执行命令：

$ babel src --out-dir build

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

'use strict';

//JSX语法
ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, China!'
), document.getElementById('example'));

//es6语法
var input = [];
input.map(function (item) {
  return item + 1;
});

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

<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