建立全新的 React 應用程式

使用整合的 toolchain 以得到最佳的使用者和開發者體驗。

本頁將介紹一些受歡迎的 React toolchain,它們有助於以下的工作:

  • 擴大文件和 component 的規模。
  • 使用來至 npm 的第三方函式庫。
  • 偵測早期常見的錯誤。
  • 實時在開發環境裡編輯 CSS 和 JS。
  • 最佳化線上環境輸出。

本頁所建議的 toolchain 都不需要進行任何設定就能開始使用

你可能不需要 Toolchain

如果你沒有碰到以上所提到的問題,或者還沒有習慣使用 JavaScript 的工具,你可以考慮在 HTML 網頁裡加上 <script> 標籤來使用 React,以及使用可選的 JSX

這也是將 React 加上到現存網頁裡最簡單的方法。當你覺得使用大型的 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 >= 8.10 和 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 來使用。基本上,它是使用 Babelwebpack,但你不需要了解任何關於它們的細節。

當你準備好發佈到線上環境,執行 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 會提供更多的靈活性和選擇。我們推薦給比較有經驗的使用者:

從零開始建立 Toolchain

一個 JavaScript 的建立 toolchain 通常包括:

  • 一個 package 管理員,例如 Yarnnpm。它能讓你充分利用數量龐大的第三方 package,並且輕鬆的安裝或更新它們。

  • 一個 bundler,例如 webpackParcel。它能讓你編寫模組化的程式碼,並將它們組合成小小的 package 以最佳化載入時間。

  • 一個 compiler,例如 Babel。它能讓你編寫現代 JavaScript 程式碼,並可以在舊版本的瀏覽器裡使用。

如果你傾向從零開始設定屬於自己的 JavaScript toolchain,請查看這指南,它會重新建立一些 Create React App 的功能。

別忘了確保你的自訂 toolchain 有為線上環境進行正確的設定