开发程序示例
- 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>
项目目录结构:
参考文档
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