经过这四期的讲解，我们从Hello World应用入手，解释了React最重要的概念JSX，以及两种不同模式的应用构建方法。这一讲我们着重对比传统模式和新模式下的React项目构建，从而为初学者提供学习方向。
1. 传统模式构建
一般在传统模式下，我们构建前端项目很简单。就是下载各种js文件，如JQuery、Echart等，直接放置在html静态文件。这样在这个前端项目中，默认生成或者是定义全局变量，从而使用js各种开发包的特性。典型代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
...
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>>
...
</head>
<body>
...
<script type="text/javascript">
$("div.test").onclick(function(){
// code goes ...
})
</script>
</body>
</html>这种方法构建的前端项目，显而易见很迅速，可以简单、直接的完成前端想要的各种逻辑。比如，我要控制一个div的显示，直接通过Jquery的selector操作，就可以完成。为了符合众多前端er的习惯，React也提供了类似的方案，可以说这个对于初学React的朋友来说非常方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="scripts/react.development.js"></script>
<script src="scripts/react-dom.development.js"></script>
<script src="scripts/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
而然随着互联网的发展，越来越多的网站开始变得臃肿、庞大，诸如淘宝网、facebook网站的逻辑相当复杂。对于网站处理逻辑非常繁多，渐渐地使用传统模式构建，会使项目难以更新feature，寻找bug也会非常麻烦。项目的更新、维护，对于团队的压力可想而知。因此，目前前端界的共识是使用Webpack+babel的构建模式。
2. Webpack+babel模式构建
随着JavaScript语言下一代标准的愈发成熟，ES6，即ECMAScript2015（ES2015）受到越来越多的开发者欢迎。为了弥补当前浏览器不支持ES6的缺陷，babel孕育而生，它是JavaScript的一个编译器，是用户能够在浏览器中体验下一代JavaScript语言的魅力。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。
React官方将这两个工具封装在了名为create-react-app的脚手架中，按照官网的说法，create-react-app适合搭建单页面应用[详细信息]。
初学React的小白用户，可以使用简单的指令，它将启动webpack-dev-server的HTTP Server。在这个服务器中，提供了babel的配置。
npx create-react-app my-app
cd my-app
npm startnpx为一个类似npm的cli工具，目的是管理本地的第三方工具集[介绍]
由于create-react-app提供了良好的封装，这些服务启动的过程，使用者是无法察觉的。要了解create-react-app启动的全工程，用户可以从这个教程了解。
当然create-react-app也提供了用户自定义的webpack和babel配置。只要输入下列指令（该指令不可逆）：
npm run eject3. 总结
对比两种不同的React构建方法，使用的目的也不一样。第一种方法提供了更为灵活多变的应用特效方案，适应于展示特效多的应用，如小游戏、H5广告等。而第二种方法适用于构建中大型Web app应用。
对于前端学习者来说，推荐使用第二种方法，毕竟这属于目前前端的趋势。有利于开发者适应大规模开发。潜台词就是更容易在大厂商找到工作！！！