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

此文章是翻譯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

注意：這個特性需呀react-scripts@0.2.0 或更高。

一些編輯器，包括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 eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0

咱們認識到這是次優的，因爲咱們隱藏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>