此文章是翻譯How to develop apps bootstrapped with Create React App 官方文檔
系列文章
- 如何開發由Create-React-App 引導的應用
- 如何開發由Create-React-App 引導的應用（二）
- 如何開發由Create-React-App 引導的應用（三）
- 如何開發由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：
如果你使用任何需要運行時支持的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筆記
如果你正在使用Atomlinter-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>