五分鐘學習React(五)：React兩種構建應用方式選擇

時間 2019-11-12

標籤五分 5分學習 react 兩種構建應用方式選擇欄目 React 简体版

原文原文鏈接

本文轉載於:猿2048網站五分鐘學習React(五)：React兩種構建應用方式選擇javascript

通過這四期的講解，咱們從Hello World應用入手，解釋了React最重要的概念JSX，以及兩種不一樣模式的應用構建方法。這一講咱們着重對比傳統模式和新模式下的React項目構建，從而爲初學者提供學習方向。php

1. 傳統模式構建

通常在傳統模式下，咱們構建前端項目很簡單。就是下載各類js文件，如JQuery、Echart等，直接放置在html靜態文件。這樣在這個前端項目中，默認生成或者是定義全局變量，從而使用js各類開發包的特性。典型代碼以下：html

<!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的構建模式。java

2. Webpack+babel模式構建

隨着JavaScript語言下一代標準的愈發成熟，ES6，即ECMAScript2015（ES2015）受到愈來愈多的開發者歡迎。爲了彌補當前瀏覽器不支持ES6的缺陷，babel孕育而生，它是JavaScript的一個編譯器，是用戶可以在瀏覽器中體驗下一代JavaScript語言的魅力。Webpack則是JavaScript中比較知名的打包工具。這兩個構建工具構成了React應用快速搭建的基礎。react

React官方將這兩個工具封裝在了名爲create-react-app的腳手架中，按照官網的說法，create-react-app適合搭建單頁面應用[詳細信息]。jquery

初學React的小白用戶，可使用簡單的指令，它將啓動webpack-dev-server的HTTP Server。在這個服務器中，提供了babel的配置。webpack

npx create-react-app my-app
cd my-app
npm start

npx爲一個相似npm的cli工具，目的是管理本地的第三方工具集[介紹]git

因爲create-react-app提供了良好的封裝，這些服務啓動的過程，使用者是沒法察覺的。要了解create-react-app啓動的全工程，用戶能夠從這個教程瞭解。github

固然create-react-app也提供了用戶自定義的webpack和babel配置。只要輸入下列指令（該指令不可逆）：

npm run eject

3. 總結

對比兩種不一樣的React構建方法，使用的目的也不同。第一種方法提供了更爲靈活多變的應用特效方案，適應於展現特效多的應用，如小遊戲、H5廣告等。而第二種方法適用於構建中大型Web app應用。

對於前端學習者來講，推薦使用第二種方法，畢竟這屬於目前前端的趨勢。有利於開發者適應大規模開發。潛臺詞就是更容易在大廠商找到工做！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。