經過這四期的講解，我們從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 startnpx為一個類似npm的cli工具，目的是管理本地的第三方工具集[介紹]
由於create-react-app提供了良好的封裝，這些服務啟動的過程，使用者是無法察覺的。要瞭解create-react-app啟動的全工程，用戶可以從這個教程瞭解。
當然create-react-app也提供了用戶自定義的webpack和babel配置。只要輸入下列指令（該指令不可逆）：
npm run eject3. 總結
對比兩種不同的React構建方法，使用的目的也不一樣。第一種方法提供了更為靈活多變的應用特效方案，適應於展示特效多的應用，如小游戲、H5廣告等。而第二種方法適用於構建中大型Web app應用。
對於前端學習者來說，推薦使用第二種方法，畢竟這屬於目前前端的趨勢。有利於開發者適應大規模開發。潛臺詞就是更容易在大廠商找到工作！！！
