建立全新的 React 應用程式
These docs are old and won’t be updated. Go to react.dev for the new React docs.
See Start a New React Project for the recommended ways to create an app.
使用整合的 toolchain 以得到最佳的使用者和開發者體驗。
本頁將介紹一些受歡迎的 React toolchain，它們有助於以下的工作：
- 擴大文件和 component 的規模。
- 使用來至 npm 的第三方函式庫。
- 偵測早期常見的錯誤。
- 實時在開發環境裡編輯 CSS 和 JS。
- 最佳化線上環境輸出。
本頁所建議的 toolchain 都不需要進行任何設定就能開始使用。
你可能不需要 Toolchain
如果你沒有碰到以上所提到的問題，或者還沒有習慣使用 JavaScript 的工具，你可以考慮在 HTML 網頁裡加上 <script> 標籤來使用 React，以及使用可選的 JSX。
這也是將 React 加上到現存網頁裡最簡單的方法。當你覺得使用大型的 toolchain 對你有幫助，你也可以隨時把它們加入！
推薦的 Toolchain
React 團隊主要推薦以下的方案：
- 如果你正在學習 React 或建立全新的 single-page 應用程式，請使用 Create React App。
- 如果你正在建立一個使用 Node.js 的 server-rendered 網頁，請使用 Next.js。
- 如果你正在建立一個靜態內容的網頁，請使用 Gatsby。
- 如果你正在建立一個 component 函式庫或與現存程式碼倉庫進行接軌，請使用更靈活的 Toolchain。
Create React App
Create React App 是一個適合學習 React 的環境，而且也是使用 React 建立一個全新的 single-page 應用程式的最佳方法。
它會為你設定好開發環境，以便你能夠使用最新的 JavaScript 特性，提供良好的開發者體驗，並且為線上環境最佳化你的應用程式。你需要在你的機器上安裝 Node >= 14.0.0 and npm >= 5.6。要建立項目，請執行：
npx create-react-app my-app
cd my-app
npm start提示
npx不是拼寫錯誤 —— 它是一個 npm 5.2+ 附帶的 package 執行器。
Create React App 並不會處理 backend 邏輯或資料庫；它只會建立一個 frontend build pipeline，以便你配合任何 backend 來使用。基本上，它是使用 Babel 和 webpack，但你不需要了解任何關於它們的細節。
當你準備好發佈到線上環境，執行 npm run build 會在 build 文件夾裡建立一個你的應用程式的最佳化版本，你可以從 Create React App 的 README 和 使用者指南了解更多資訊。
Next.js
Next.js 是一個受歡迎和輕量的框架，用於使用 React 所建立的靜態和 server-rendered 的應用程式。它自身已包括了 styling 和 routing 的方案，而且它假設你在使用 Node.js 作為伺服器環境。
從 Next.js 的官方指南了解更多。
Gatsby
Gatsby 是使用 React 建立靜態網頁的最佳方法。它讓你使用 React component，但會輸出 pre-rendered HTML 和 CSS 來保證最快的載入時間。
從 Gatsby 的官方指南和 starter kit 範例集了解更多。
更靈活的 Toolchain
以下的 toolchain 會提供更多的靈活性和選擇。我們推薦給比較有經驗的使用者：
- Neutrino 結合了 webpack 強大的功能與簡單的預設，並包括了 React 應用程式和 React component 的預設。
- Nx 是一套用於 full-stack monorepo 開發的 toolkit，內建支援 React、Next.js、Express 以及更多。
- Parcel 是一個快速、零設定的網路應用程式 bundler，並且可以配合 React 一起使用。
- Razzle 是一個不需要設定的 server-rendering 框架，但它比 Next.js 提供更多的靈活性。
從零開始建立 Toolchain
一個 JavaScript 的建立 toolchain 通常包括：
- 一個 package 管理員，例如 Yarn 或 npm。它能讓你充分利用數量龐大的第三方 package，並且輕鬆的安裝或更新它們。
- 一個 bundler，例如 webpack 或 Parcel。它能讓你編寫模組化的程式碼，並將它們組合成小小的 package 以最佳化載入時間。
- 一個 compiler，例如 Babel。它能讓你編寫現代 JavaScript 程式碼，並可以在舊版本的瀏覽器裡使用。
如果你傾向從零開始設定屬於自己的 JavaScript toolchain，請查看這指南，它會重新建立一些 Create React App 的功能。
別忘了確保你的自訂 toolchain 有為線上環境進行正確的設定。