無需配置即可建立 React Apps [ 譯 ]

無需配置即可建立 React Apps [ 譯 ]
react.png 原文地址：Create React apps with no build configuration 原文作者：Facebook Incubato 譯文出自：掘金翻譯計劃 譯者：賈克奇 校對者：XHShirley Gocy015 無需配置即可建立 React App 開始 – 如何建立一個新 app。 使用者指南 – 如何使用 Create React App 腳手架開發 app。

npm install -g create-react-appcreate-react-app my-appcd my-app/npm start

然後開啟 http://localhost:3000/ 查看你的 app。
當你準備部署到生產模式時，使用 npm run build 構建更小體積的包。
npm start 開始 安裝

全域安裝:

npm install -g create-react-app

你機器上 Node 的版本不能低於 4.0。

為了加快安裝速度和更好的利用磁碟，我們強烈建議使用 Node6+ 和 npm3+。 你可以使用 nvm 在不同的項目中切換 Node 版本。

這個工具不一定需要 Node 作為後端。 安裝 Node 只是為了本地構建工具的依賴，比如說 Webpack 和 Babel 。 建立一個 app

要建立一個新 app， 運行:

create-react-app my-appcd my-app

它會在目前的目錄下建立一個叫做 my-app 的檔案夾。
在這個檔案夾中，它會產生初始項目結構和安裝相應依賴:

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

無需配置或者複雜的目錄結構，只有你構建 app 所需的檔案。
一旦安裝完畢後，你可以在專案檔夾下運行一些命令: npm start

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

對介面的編輯會即時重新整理。
你可以在控制台下看到構建錯誤和文法警告。
Build errors npm test

在互動模式下運行測試。 預設情況下，運行與自上次提交以來更改的檔案的相關測試。

更多關於測試的文章。 npm run build

會以生產模式構建 app 到 build檔案夾內。
它在生產模式下正確打包 React，並最佳化構建以獲得最佳效能。

這個構建的體積已經被壓縮過了，並且檔案名稱都包含了雜湊。
你的 app 已經部署好了! 使用者指南

這個 使用者指南 包含的資訊涵蓋了不同的話題，如: Updating to New Releases Folder Structure Available Scripts Displaying Lint Output in the Editor Installing a Dependency Importing a Component Adding a Stylesheet Post-Processing CSS Adding Images and Fonts Using the public Folder Adding Bootstrap Adding Flow Adding Custom Environment Variables Can I Use Decorators? Integrating with a Node Backend Proxying API Requests in Development Using HTTPS in Development Generating Dynamic <meta> Tags on the Server Running Tests Deployment

使用者指南的副本將在你的專案檔夾中建立為 README.md 。 如何更新到最新版本?

有關資訊請參閱 使用者指南。 哲學理念

單依賴: 只有一個構建依賴。它使用了 Webpack，Babel，ESLint，和其他很棒的項目，但是把他們整合到一起提供給使用者。

零配置: 這裡沒有設定檔或者命令列選項。開發和生產構建配置都已經設定完畢，這樣以來你可以專註於寫代碼。

無鎖定: 您可以隨時到自訂設定。運行一個簡單的命令，所有配置和構建依賴會移動到你的項目內，因此你可以選擇他們的位置。 為什麼使用?

如果你用 React 開始，使用 create-react-app 自動構建你的 app。無需設定檔，並且 react-scripts 是在 package.json 額外的構建依賴。你的環境會提供你需要構建現代化 React app 的任何東西: React，JSX，和 ES6 支援。 ES6 之外的語言擴充，如對象擴充運算子。 一個程式開發伺服器用來檢查常見錯誤。 從 JavaScript 中 引入 CSS 和圖片檔案。 自動補全 CSS，因此你不需要 -webkit 或者其他首碼。 一個 build 構建指令碼為生產模式從源碼去打包 JS、CSS、和圖片。

一些功能是受限制的。它不支援一些進階功能，如服務端渲染或者 CSS 模組。目前也不支援測試。這個工具之所以是 無配置 ，是因為當使用者調整任何東西時，很難提供一個粘性方案，簡單地讓整個工具集更新。

你不一定非要使用。 縱觀曆史，逐漸過渡 到 React 是非常容易的。但是仍有很多人每天從零開始構建單頁面 React app。我們注意到一些 提示 和 反饋，特別是如果這是你的第一個 JavaScript 構建棧，這個過程非常繁瑣並且容易出錯。這個項目是嘗試開發 React 應用程式更好的解決方案。 轉到自訂配置

如果你是重度使用者 並且對預設配置不滿意，你可以從工具中退出，並像樣板產生器一樣使用它。

運行 npm run eject 複製所有依賴檔案和相應依賴 (Webpack、Babel、ESLint 等等) 到你的項目，因此完全可控。類似 npm start 和 npm run build 的命令依舊會工作， 但他們會指向複製的指令碼，因此你可以調整。在這一點上，你只能靠自己。

注: 這是個單向操作。一旦 eject，你就回不去啦!

你可能不需要使用 eject。 這個功能集適合中小型部署，而且你不應該感到有義務使用此功能。但是，我們明白如果你無法自訂該工具，那麼它將不會有用。 限制

一些功能現在是 不支援的 : 服務端渲染。 一些實驗文法擴充 (如: 裝飾器)。 CSS 模組。 LESS 或者 Sass。 組件熱載入。

如果他們是穩定的，對大多數 React 應用程式有用，不與現有工具衝突，並且不引入額外的配置，它們可能會在未來添加。 內部是什麼?

建立 React 應用程式使用的技術棧可能還會更改。目前它構建於許多令人驚歎的社區項目的上層，如: webpack 和 webpack-dev-server，html-webpack-plugin 和 style-loader Babel 與 ES6 和 Facebook 使用的擴充 (JSX，object spread，class properties) Autoprefixer ESLint Jest 其他...

這些都是 npm 包提供的相應依賴。 貢獻

我們很希望你為 create-react-app 提供協助! 有關我們希望得到什麼協助以及如何開始，請查看CONTRIBUTING.md。 感謝

我們感謝現有相關項目作者的想法和合作: @eanplatter @insin @mxstbr 備選項

如果你不同意在這個項目中做出的選擇，你可能想探索不同權衡的替代品。有一些更受歡迎和積極維護的項目: insin/nwb mozilla/neo NYTimes/kyt zeit/next.js gatsbyjs/gatsby

著名的類似項目還包括: enclave motion quik sagui roc aik