[譯]React安裝：建立react應用

原文連接：reactjs.org/docs/create…

使用React工具鏈的好處

1. 擴展文件和組件的範圍
2. 使用npm集成第三方庫
3. 自動檢測語法錯誤
4. 實時編寫CSS和Javascript
5. 優化生成輸出

提示：本章所推薦的工具鏈不須要特定的配置

提示：你可能不須要工具鏈 若是你沒有遇到以前講述的問題或者以爲使用JavaScript工具十分方便，那麼你能夠把react做爲純粹的腳本script添加到html中，同時也能夠根據需求選擇是否使用JSX。

這也是將react集成到現有項目的最簡單的方式，固然若是你以爲工具鏈對你更有幫助的話你也可使用它。

推薦的工具鏈

React開發團隊推薦如下幾種工具鏈

1. 若是你想學習react或者開發一個單頁面應用的話，查看 Create React App
2. 若是你想用Node.js構建服務器端渲染的網站，請查看Next.js
3. 若是你想構建面向內容的靜態網站，請查看Gatsby
4. 若是你想建立一個組件庫或繼承一個已有的代碼庫，請查看More Flexible Toolchains

Create React App

Create React App 對於學習React來講是一個很是友好的環境，同時這也是使用React建立單頁面應用最好的方式。

它幫你搭建了開發環境所以你能夠在此環境下使用最新的JavaScript特性，同時它提供了一個良好的開發環境而且會對你的生產輸出進行優化。

建立一個React應用，你須要在電腦上安裝Node（>=8.10版）和npm（>=5.6版）。使用如下命令便可建立一個React應用

npx create-react-app my-app
cd my-app
npm start
複製代碼

提示：npx不是錯字，他是npm5.2+自帶的package運行工具

Create React App不須要操做後端邏輯或者數據庫，它只是建立前端的流水線，因此你可使用任何你想使用後端框架。儘管它在內部使用Babel和webpack，可是你徹底能夠不對他們作任何的瞭解。

當你準備部署你的項目時，在終端運行

npm run build
複製代碼

這段命令將會在build文件夾中生成應用的優化版本。你能夠從README和User Guide中瞭解到更多關於Create React App的內容。

Next.js

Next.js是一個流行的輕量級框架，用於配合React建立的靜態服務端渲染應用。它包含了當即可用的樣式和路由解決方案，而且假設你使用Node.js做爲服務器環境。

從官網瞭解更多Next.js。

Gatsby

Gatsby是使用React建立靜態網頁的最好的方法。它能讓你在使用React組件的同時輸出預渲染的html以及CSS以確保最快的加載速度。

從官網和入門示例集中學習Gatsby。

更靈活的工具鏈

如下的工具鏈提供了更多的選擇性。咱們推薦富有經驗的開發者使用它們。

Neutrino 把webpack的強大功能和簡單的預設結合在一塊兒，包括了對React app和React 組件的預設。

nwb特別適於將React組件發佈到npm上，一樣的，它也可用於建立React 應用。

Parcel是一個快速、零配置的web應用打包器，而且能夠搭配React一塊兒工做。

Razzle是一個不須要任何配置的服務器渲染框架，並且相比於Next.js，它有着更高的自由度。

從零開始打造工具鏈

一個JavaScript構建工具鏈通常由如下幾部分組成：

●一個包管理器，就像是yarn和npm。它可以讓你利用龐大的第三方package生態系統，而且輕鬆地安裝和更新它們。

●一個打包器，就像是webpack和Parcel。它能把你寫好的模塊化代碼打包進一個小的package，並以此來優化加載時間。

●一個編譯器，就像是Babel。它能讓你編寫的現代JavaScript代碼運行在較老的瀏覽器上。

若是你喜歡從零開始設置你的JavaScript工具鏈，查看這個指導，它重選建立了一些Create React App功能。

請確認你設置的工具鏈對生產環境進行了正確的配置。