如何開發由Create-React-App 引導的應用（一）

標籤：feed   ati   down   one   title   重要   如何   關注   rod   

此文章是翻譯How to develop apps bootstrapped with Create React App 官方文檔

系列文章

1. 如何開發由Create-React-App 引導的應用
2. 如何開發由Create-React-App 引導的應用（二）
3. 如何開發由Create-React-App 引導的應用（三）
4. 如何開發由Create-React-App 引導的應用（四）

Updating to New Release

Creat React App 分成兩個包：

• create-react-app 是用於建立新項目的全域命令列工具。
• react-scripts 是在建立項目中的開發依賴。

幾乎不需要更新create-react-app 自身：它將所有的設定委託給了react-scripts 。

當你運行create-react-app 時，它總是使用react-scripts 的最新版本來建立項目，以便你自動獲得所有的新特性和改進。

要將現有項目更新為react-scripts 的最新版本，開啟更新日誌，找到你當前正在用的版本（可以在package.json中找到），按照最新版本的遷移說明來操作。

在大多數情況下，更改packages.json 中react-scripts 的版本號碼，然後運行npm install 應該就可以了，但是對於潛在的重大變化，請參考更新日誌。

我們致力於保持最小的重大變化，從而可以無痛的升級react-scripts。

Sending Feedback

我們總是關注您的反饋。

Folder Structure

建立完成後，你的項目應該看上去像這樣：

my-app/  README.md  node_modules/  package.json  public/    index.html    favicon.ico  src/    App.css    App.js    App.test.js    index.css    index.js    logo.svg

對於要構建的項目，這些檔案必須存在：

• public/index.html 是頁面模版；
• src/index.js 是JavaScript 入門點。

你可以刪除或重新命名其它的檔案。

你可以在src 中建立子目錄。為了更快的重構，只有位於src 中的檔案會被Webpack 處理。
你需要將任何JS 和CSS 放到src 中，否則Webpack 將不會處理。

public/index.html 只能使用public 中的檔案。
閱讀使用JavaScript 和HTML 資源的說明。

但是，你可以建立更多的頂級目錄。
它們不會被包含在生產版本中，因此你可以將它們用於文檔說明等。

Available Scripts

在項目目錄中，你可以運行：

npm start

在開發模式下運行應用。
開啟 http://localhost:3000 在瀏覽器中查看。

如果你進行了修改，頁面將重新載入。
你還可以在控制台中看到lint error。

npm test

在互動觀察者模式下，啟動test runner。
更多資訊請參考running tests 章節。

npm run build

構建生產版本應用到build 檔案夾。
它在生產模式下正確地綁定了React，並且最佳化了構建以獲得最佳效能。

構建是minified 並且檔案名稱包含雜湊值。
你的應用已經準備好部署了！

更多資訊請參考deployment 章節。

npm run eject

注意：這是一個單向操作。一旦你eject，你不能返回！

如果你對構建工具和配置選項不滿意，你可以運行eject。此命令將從項目中刪除單個構建依賴。

相反，它會將所有設定檔和轉變的依賴（Webpack、Babel、ESLint 等）複製到你的項目中，所以你可以完全控制它們。除了eject 外所有的命令仍將其作用，但它們將指向複製的指令碼，以便你調整它們。在這一點，完全看你自己。

你不必使用eject。The curated feature set 適用於中小型部署。但是我們明白，當你準備使用這個工具時，如果你不能自訂它，則它將沒有用。

Supported Language Features and Polyfills

這個項目支援最新JavaScript 標準的超集。
除了ES6 文法，它還支援：

• Exponentiation Operator（ES2016）
• Async/await（ES2017）
• Object Rest/Spread Properites（stage 3 proposal）
• Class Field and Static Properties（stage 3 proposal）
• JSX 和 Flow 文法

學習更多關於不同提案階段。

雖然我們建議你謹慎使用這些實驗性提案，但Facebook 在產品代碼中大量使用這些功能，因此，如果將來這些提案發生變化，我嗎將提供codemods。

注意這個項目只包括幾個ES6polyfills：

• Object.assign() 通過object-assign
• Promise 通過promise
• fetch() 通過whatwg-fetch

如果你使用任何需要運行時支援的ES6+ 特性（像Array.from() 或Symbol）,確保你手動添加了合適的polyfill，或者你的目標瀏覽器已經支援它們了。

Syntax Highlighting in the Editor

要在你喜歡的文字編輯器中配置文法高亮，前往相關的Babel 文檔說明頁，然後按照說明操作。包含大部分流行的編輯器。

Displaying Lint Output in the Editor

注意：這個特性需呀[email protected] 或更高。

一些編輯器，包括Sublime Text、Atom 和Visual Studio Code 提供了ESLint 外掛程式。

對於linting 它們不是必須要的。你會在終端以及瀏覽器控制台中看到linter 輸出。但是，如果你喜歡在編輯器中顯示lint 結果，則需要執行一些額外的操作。

首先，你需要為你的編輯器安裝ESLint 外掛程式。

Atom 使用者使用 linter-eslint 筆記
如果你正在使用Atom linter-eslint 外掛程式，確保 Use global ESLint installation 選項已經選中：

Visual Studio Code 使用者
VS Code ESLint 外掛程式會自動偵測Create React App 的設定檔。所以你不需要在根目錄下建立eslintrc.json 檔案，除非你想要添加你自己的規則。在這種情況下，你應該包含CRA 的配置，通過添加下面這行：

{ // ... "extends": "react-app"}

然後將下面這塊代碼添加到你的項目中的package.json 檔案中

{ //... "eslintConfig": {    "extends": "react-app"  }}

最後，你需要全域安裝一些包：

npm install -g [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

我們認識到這是次優的，由於我們隱藏ESLint 依賴的方式，它目前是必須的。ESLint 團隊已經在為此提供解決方案，因此在幾個月內可以會變得不必要。

Debugging in the Editor

這個特性目前只有Visual Studio Code編輯器支援。

Visual Studio Code 支援即時編輯和調試，使用Create React App 開箱即用。這能夠使你作為一個開發人員不需要離開編輯器就可以進行編寫和調試你的React 代碼，最重要的是它可以讓您擁有持續的開發工作流程，其中環境切換是最小的，因為你不必在不同工具之間進行切換。

你需要確保VS Code 是最新版本，並且VS Code 的Chrome Debugger Extension 已經安裝了。

然後將下面代碼添加到你的launch.json 檔案，並將其放到你的應用根目錄下的.vscode 檔案夾中。

{  "version": "0.2.0",  "configurations": [{    "name": "Chrome",    "type": "chrome",    "request": "launch",    "url": "http://localhost:3000",    "webRoot": "${workspaceRoot}/src",    "userDataDir": "${workspaceRoot}/.vscode/chrome",    "sourceMapPathOverrides": {      "webpack:///src/*": "${webRoot}/*"    }  }]}

運行npm start 啟動你的應用，按F5 或點擊綠色debug 表徵圖在VS Code 中調試。現在你可以寫代碼、設定斷點、修改代碼以及調試你最新修改的代碼--所有都在你的編輯器中實現。

Changing the Page title

你可以在產生項目的public 檔案夾下知道源HTML 檔案。你可以編輯<title> 標籤，把“React App” 標題改為其他任何東西。

請注意，通常你不會經常在public 目錄下編輯檔案。例如，可以在不更改HTML 情況下，添加CSS 檔案。

如果你需要根據內容來動態更新頁面的標題，你可以使用瀏覽器的document.title API。對於要從React 組件更改標題的更複雜的情境，可以使用React Helmet 這個第三方庫。

在生產環境中，你為自己的應用使用自訂伺服器，要將標題在發送到瀏覽器之前修改，你可以遵循本章 建議。或者，你可以預構建每一個頁面為靜態HTML 檔案，然後載入JavaScript 包，將在這裡介紹。

Installing a Dependency

產生的項目中包括React 和ReactDOM 依賴。它也包括Create React App 使用的一組指令碼作為開發依賴。你也可以使用npm安裝其它的依賴（例如，React Router）：

npm install --save <library-name>

如何開發由Create-React-App 引導的應用（一）