五分钟学习React(五)：React两种构建应用方式选择

经过这四期的讲解，我们从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 start

npx为一个类似npm的cli工具，目的是管理本地的第三方工具集[介绍]

由于create-react-app提供了良好的封装，这些服务启动的过程，使用者是无法察觉的。要了解create-react-app启动的全工程，用户可以从这个教程了解。

当然create-react-app也提供了用户自定义的webpack和babel配置。只要输入下列指令（该指令不可逆）：

npm run eject

3. 总结

对比两种不同的React构建方法，使用的目的也不一样。第一种方法提供了更为灵活多变的应用特效方案，适应于展示特效多的应用，如小游戏、H5广告等。而第二种方法适用于构建中大型Web app应用。

对于前端学习者来说，推荐使用第二种方法，毕竟这属于目前前端的趋势。有利于开发者适应大规模开发。潜台词就是更容易在大厂商找到工作！！！