建立全新的 React 應用程式

使用整合的 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 有為線上環境進行正確的設定。