本章节介绍如何安装React。你可以通过下载React文件或使用CDN来引入React库。在HTML中，你需要引用react.js、react-dom.js以及转换JSX的browser.min.js。JSX是React中用于创建组件的语法，如果不使用JSX，可以使用React的createElement函数。此外，还提供了使用不同CDN链接引入React和Babel的方法。
一、 下载react的文件
从react官网http://reactjs.cn/react/docs/getting-started.html点击
，
下载所有的react文件和示范，从build文件夹中包含如下
其中react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js
的作用是将 JSX 语法转为 JavaScript 语法., react-dom-server.js是服务端渲染dom的功能，react-with-addons是一些插件功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Welcome to React world!</h1>,
document.getElementById('hello')
);
</script>
</body>
</html>
babel 是下一代 JavaScript 语法的编译器，是一个JavaScript编译工具，Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。browser.js是babel的浏览器版本。源代码<h1>Hello, world!</h1>，这是React的jxs语法，js不认识它，所以要借助babel把它翻译成为js识别的代码。凡是使用 JSX 的地方，都要加上 type="text/babel"，所以要引用browser.js，不然程序无法执行。
如果不想用JSX,则代码修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/javascript">
ReactDOM.render(
React.createElement("h1",null,"Welcome to ReactWorld!"),
document.getElementById('hello')
);
</script>
</body>
</html>
ReactElement createElement(string/ReactClass type, [object props], [children ...])，它有三个参数，type参数可以是一个html标签名称字符串，也可以是一个ReactClasss。这个type参数对于createElement来说是必须的。第二个参数是该标签的属性，这个参数是可选的。第三个参数是该元素的子节点，同样也是可选的。
二、 使用CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">
</script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Welcome to React world!</h1>,
document.getElementById('hello')
);
</script>
</body>
</html>
还可以使用如下React的CDN地址：
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
其中babel还可以从下面的网站获取：
http://www.bootcdn.cn/babel-core/
<script src="//cdn.bootcss.com/babel-core/6.1.19/browser.js"></script>
Babel的官网：
https://babeljs.io/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
