快速构建 React 开发环境

1.react使用

react可以直接下载使用，可以在官网 https://reactjs.org/ 上直接下载使用，也可以使用BootCDN 的 React CDN 库，地址如下：

<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

还有官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。

一个小例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

在这个例子中引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

script标签中的内容意思是将h1标签插入到一个id是example的标签中。

注意：如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

2.使用 create-react-app 快速构建 React 开发环境

构建开发环境时需要先安装node.js和npm，如果觉得npm慢的话，可以试着用淘宝镜像cnpm。

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

执行完npm start命令之后一般情况下会自动打开浏览器，就可以看到一个react的小demo了。