React框架学习_关于React两种构建应用方式选择

作者：@EasonPeng
本文为作者原创，转载请注明出处：https://www.cnblogs.com/eason-peng/p/8315185.html

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应用。

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

链接: https://fly63.com/article/detial/373