【全棧React】第12天: 建立React應用

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3822
原文：https://www.fullstackreact.com/30-days-of-react/day-12/

今天，咱們將添加一個構建過程來存儲常見的構建操做，以便咱們能夠輕鬆地開發和部署咱們的應用。

React小組注意到運行一個React應用須要不少配置（而且社區幫助臃腫 - 包括咱們也是如此）。幸運的是，React團隊/社區中的一些聰明人員彙集在一塊兒，構建/發佈了一個官方的生成器應用，使其更容易上手並快速運行。

建立React應用

經過Facebook發佈的create-react-app項目可幫助咱們快速啓動並運行咱們系統上的React應用，無需自定義配置咱們的一部分

該軟件包做爲Node軟件包發佈，可使用npm進行安裝。

nvm 和 n的一個插件

若是您的系統上還沒有安裝該節點，Node主頁有如何安裝node的簡單文檔。

咱們建議使用nvm或n版本管理工具。這些工具使您能夠隨時在系統上安裝/使用多個版本的節點變得很是簡單。

在咱們的系統上安裝了 node 後，咱們能夠安裝create-react-app包：

`npm install --global create-react-app`

使用全局方式安裝的create-react-app ，咱們能夠在終端的任何地方使用create-react-app 命令。

咱們建立一個咱們稱之爲30days的新應用，使用咱們剛剛安裝的 create-react-app 命令。 在要建立應用的目錄中打開終端窗口。

在終端中，咱們可使用該命令建立一個新的React應用，併爲要建立的應用添加一個名稱。

create-react-app 30days && cd 30days

讓咱們在瀏覽器中啓動咱們的應用。create-react-app 軟件包附帶了一些爲咱們建立的內置腳本（在 package.json 文件中）。 咱們可使用npm start命令_start_使用內置的網絡服務器編輯咱們的應用：

npm start

該命令將在Chrome中打開一個窗口，使其在咱們應用中運行默認url：http://localhost:3000/。

咱們來編輯新建立的應用。看看它建立的目錄結構，咱們將看到咱們有一個運行public/index.html 的基本節點應用，以及構成咱們正在運行的應用的src/ 目錄中的幾個文件。

咱們打開 src/App.js 文件，咱們將看到咱們有一個很是基本的組件，應該都很熟悉。它有一個簡單的渲染功能，它返回咱們在Chrome窗口中看到的結果。

index.html文件有一個 #root的 <div />節點，這個應用自己將被自動掛載（這是在src/index.js文件中處理的）。任什麼時候候，咱們要添加webfonts，樣式，標籤等，咱們能夠將它們加載到index.html文件中。

Shipping（運輸）

咱們將在幾周內進行部署，但暫時知道生成器建立了一個構建命令，所以咱們能夠建立咱們的應用的最小化，優化版本，咱們能夠將其上傳到服務器。

咱們可使用咱們項目根目錄下的npm run build 命令構建咱們的應用：

`npm run build`

所以，咱們如今有一個實時從新加載的單頁應用（SPA）能夠開發。 明天，咱們將使用這個新的應用程序, 咱們構建在運行時呈現多個組件