CDN和脚本方式
在传统的html页面中通过<script>标签引用React库的方式。此种方式虽然能将React使用起来，但是更多的特性，例如箭头函数， 类， 模板字符串， let， 和 const 声明都无法实现。所以这个方法主要用于演示或者练习。具体方法如下：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上述的react.js、react-dom是React的核心代码，browser.min.js是用来解析React中JSX语法的解析器。
Nodejs方式
使用node的npm安装React官网提供的脚手架工具create-react-app，这个工具可以方便为您创建一个React工程。前提是先要安装Nodejs（版本>6）
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
上述执行后会构建出一个简单的React App（含有Webpack和babel）
Nodejs方法是官网推荐的方法，用来构建React单页面app非常的简单。可是它并不能满足所有的需求。
自主创建脚手架
基于Nodejs自主创建一个脚手架，这个过程会用到Webpack、Babel、Less、Sass、PostCSS等等构建工具。自主编写虽然灵活但是每个配置都要重新配置是一个繁琐而又痛苦的操作。在这里我编写了一个脚手架工程，内置了Reat16、Webpack4、mobx、React-router4，并且支持less、sass和postcss的样式编写能力。欢迎下载和使用，具体的使用请详细查看链接。
react16-webpack4-mobx-router4脚手架模板
网友评论