欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-17 09:02:10
经过这四期的讲解，我们从Hello World应用入手，解释了React最重要的概念JSX，以及两种不同模式的应用构建方法。这一讲我们着重对比传统模式和新模式下的React项目构建，从而为初学者提供学习方向。 1. 传统模式构建 一般在传统模式下，我们构建前端项目很简单。就是下载各种js文件，如JQ ......

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

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

上一篇： 小程序版权标签

下一篇： 关于芯片的一些总结

推荐阅读