Create React App 是什麼？ Create React App（簡稱 CRA）是 React 團隊維護的專案建立工具，一行指令就能產生可以執行的 React 專案，webpack、Babel 這類建構工具由它預先設定好，你不必自己接線。React 團隊已在 2025 年 2 月 14 日宣布對新專案棄用 CRA，原因之一是它目前沒有活躍維護者。本文說明 CRA 做了什麼、官方為什麼棄用、棄用之後現況如何，以及新專案與既有專案各自可以怎麼選。
Create React App 是什麼：把建構設定包成一個指令
React 官方部落格說明了 CRA 出現的背景：2016 年發布 CRA 時，建立 React 專案沒有明確的做法，要自己安裝一堆工具並接在一起，才能支援 JSX、程式碼檢查（linting）與熱更新（hot reloading）。社群因此做了各種 boilerplate，但 boilerplate 不容易更新，生態也因此碎裂。
CRA 的做法是把幾個工具合併成單一建議設定。官方認為這讓專案有簡單的方式升級工具，也讓 React 團隊能把 Fast Refresh、React Hooks lint rules 這類工具層級的改動，推給最廣泛的使用者。
CRA 官方文件的承諾是「不需要自己安裝或設定 webpack、Babel 這類工具，它們已預先設定並隱藏」。實際建立專案的指令是：
npx create-react-app my-app
cd my-app
npm start這是 CRA 官方 README 與文件的 Quick Start 寫法。本文不會示範執行它，因為官方已不建議用它開始新專案，後面會說明。
CRA 內建的四個指令
CRA 官方文件列出專案裡可以執行的內建指令：
| 指令 | 用途 |
|---|---|
npm start | 以開發模式執行，檔案修改後頁面會重新載入，建置錯誤與 lint 錯誤顯示在主控台 |
npm test | 以互動式 watch 模式啟動測試執行器 |
npm run build | 為正式環境建置，輸出到 build 資料夾，檔案會壓縮並加上雜湊值 |
npm run eject | 單向操作，把設定檔與 webpack、Babel、ESLint 等相依套件複製進專案，之後設定都要自己維護 |
eject 是 CRA 的特色，也是它的限制：官方文件寫明執行後無法回頭，所以 CRA 把設定藏起來，官方文件內建的調整方式就是 eject。
react-scripts：設定其實放在這個套件裡
CRA 的建置設定放在 react-scripts 這個套件裡，官方文件稱它為專案唯一的建置相依套件（single build dependency），webpack、Babel、ESLint 等都是它帶進來的相依套件。用 npm view 查詢 npm registry 上的中繼資料可以看到 react-scripts 5.0.1 的相依範圍。npm view 只讀取資料，不會安裝任何套件：
const { execSync } = require('node:child_process');
// npm view 只查詢 registry 的中繼資料，不會安裝任何套件
const view = (args) => JSON.parse(execSync(`npm view ${args} --json`, { encoding: 'utf8' }));
const cra = view('create-react-app dist-tags');
const craTime = view('create-react-app time');
const rs = view('react-scripts dist-tags');
const rsTime = view('react-scripts time');
const rsDeps = view('[email protected] dependencies');
const rsPeers = view('[email protected] peerDependencies');
console.log('create-react-app latest:', cra.latest, '發布於', craTime[cra.latest]);
console.log('react-scripts latest:', rs.latest, '發布於', rsTime[rs.latest]);
console.log('[email protected] dependencies:');
for (const name of ['webpack', 'babel-preset-react-app', 'eslint', 'jest', 'webpack-dev-server']) {
console.log(` ${name}: ${rsDeps[name]}`);
}
console.log('[email protected] peerDependencies:', JSON.stringify(rsPeers));
從輸出可以讀到幾件事：
react-scripts的latest是 5.0.1，發布於 2022 年 4 月 12 日。create-react-app這個建立專案用的套件，latest是 5.1.0，發布於 2025 年 2 月 15 日，也就是官方部落格宣布棄用的隔天。官方部落格說他們同時發布了支援 React 19 的新版本。[email protected]把 webpack 鎖在^5.64.4、ESLint 鎖在^8.3.0、Jest 鎖在^27.4.3。這是它宣告的相依範圍，代表 CRA 專案的工具版本跟著react-scripts走，不會自己升級。peerDependencies寫typescript為^3.2.1 || ^4。這是 5.0.1 當時宣告的範圍。
為什麼 React 官方棄用 Create React App
React 官方部落格〈Sunsetting Create React App〉在 2025 年 2 月 14 日發布，開頭寫明：對新 app 棄用 Create React App，並鼓勵既有 app 遷移到框架，或遷移到 Vite、Parcel、Rsbuild 這類建構工具。
官方給的理由有兩層：
- 工具本身的限制：官方認為 CRA 讓人容易上手，但有幾個限制，使它難以建出高效能的正式環境 app。原則上可以把 CRA 演進成框架來解決這些問題。
- 沒有人維護：官方寫明 CRA 目前沒有活躍維護者（no active maintainers），而且已經有許多框架解決這些問題，所以決定棄用。
部落格也列出新安裝時會看到的警告，文字是 create-react-app is deprecated.，每次安裝只顯示一次。CRA 的官方網站與 GitHub 專案都加上了棄用說明。
「停止維護」的精確意思
官方的說法是 CRA 會以維護模式（maintenance mode）繼續運作。GitHub README 的 Deprecated 警示框寫得更直接：CRA 曾是 2017 到 2021 年建立 React 專案的關鍵工具，現在處於長期停滯（long-term stasis），建議遷移到 React 框架。README 同時提醒，如果你是跟著教學學 React，繼續把教學做完仍然有價值，但不建議用 CRA 開始正式環境的專案。
所以比較精確的理解是：
- 已經棄用，官方不建議新專案使用。
- 處於長期停滯，也沒有活躍維護者。
- 官方說 CRA 會以維護模式繼續運作，既有專案不需要因為這則公告立刻改動。
新專案怎麼選：框架或建構工具
官方的建議分成兩條路，React 文件〈Creating a React App〉的開頭也寫明：要建立新的 app 或網站，建議從框架開始。
| 路線 | 官方提到的選項 | 適合的情境 |
|---|---|---|
| 框架（官方優先建議） | Next.js（App Router）、React Router（v7）、Expo（原生 app） | 多數新 app。這些框架整合了建構工具、渲染、路由、資料取得與 code splitting |
| 建構工具 | Vite、Parcel、Rsbuild | app 有特殊限制、想自建框架，或想從零學習 React 如何運作 |
官方部落格提醒，這些框架都支援 client-side rendering（CSR）與單頁應用（SPA），可以部署到 CDN 或靜態主機，不需要伺服器。判斷方式是：如果你的 app 需要路由，多半會受益於框架。
React 文件〈Build a React app from Scratch〉則是給選擇建構工具的人，它用 Vite 示範建立專案的指令：
npm create vite@latest my-app -- --template react-ts同一份文件也提醒，從零開始通常等於自建一個專屬框架：之後如果需要 SSR、SSG 或 React Server Components，就得自己實作。
站內已有 Vite 的專案建立流程、目錄結構與建置流程，想直接用 Vite 起步可前往〈React 工具鏈規格解析：基於 Vite 的初始化流程、目錄架構與生產環境建構〉，本文不重複安裝步驟。
既有 CRA 專案要遷移：常見差異對照
官方的遷移導引分成兩邊：遷移到框架時，部落格列出 Next.js、React Router、Expo 各自的遷移文件；遷移到建構工具時，列出 Vite、Parcel、Rsbuild 的遷移文件。實際動手前，可以先對照 CRA 與 Vite 兩邊的差異，下表只列有官方文件可對照的項目：
| 項目 | CRA | Vite |
|---|---|---|
| 環境變數前綴 | 自訂變數必須以 REACT_APP_ 開頭，透過 process.env 讀取 | 以 VITE_ 開頭的變數才會暴露給前端程式碼，透過 import.meta.env 讀取 |
| 開發時的 API 代理 | 在 package.json 加 proxy 欄位 | 設定方式見下方連結的站內文章 |
| 建置輸出 | 輸出到 build 資料夾 | 見〈React 工具鏈規格解析〉 |
CRA 官方文件特別提醒：環境變數在建置時嵌入產物，任何人都能從網頁檔案看到，所以不要放私密金鑰。Vite 文件同樣提醒，不想洩漏到前端的變數不要用 VITE_ 前綴。
開發環境 API 代理與 CORS 怎麼轉換到 Vite 設定，可前往〈Vite proxy 開發伺服器轉發設定、CORS 繞過與 Production 部署排查〉。
如果專案用 CRA 內建的 ESLint 設定，遷移後檢查工具要自己接上，ESLint 的用途與設定檔可前往〈ESLint 是什麼？JavaScript 程式碼檢查工具的用途、規則與設定檔入門〉。
常見問題
CRA 專案現在還能用嗎？
既有專案可以繼續用，官方說 CRA 會以維護模式繼續運作。但官方不建議以它開始新的正式環境專案，也沒有新功能的計畫。
學 React 還需要裝 CRA 嗎？
不需要。官方 README 提到，跟著教學學 React 仍有價值，但如果是自己動手建立新專案，官方建議的起點是框架；想學 React 怎麼接上建構工具，可以照〈Build a React app from Scratch〉用 Vite、Parcel 或 Rsbuild。
CRA 裡寫的 JSX 和 ES 語法是誰處理的？
CRA 預先設定的工具鏈（官方部落格寫明 Create React App 這類預先設定的工具鏈內部就包含 JSX 轉換）。JSX 轉譯的做法與兩種 transform 見〈JSX 是什麼？React JSX 語法規則、與 HTML 的差異和轉譯原理〉；JavaScript 語法標準本身見〈ECMAScript 是什麼？和 JavaScript 的關係、ES6 與年度版本怎麼看〉。
參考資料與延伸閱讀
- React Blog：Sunsetting Create React App
- React 官方：Creating a React App
- React 官方：Build a React app from Scratch
- GitHub：facebook/create-react-app（README 的 Deprecated 說明）
- Create React App 文件：Getting Started
- Create React App 文件：Available Scripts
- Create React App 文件：Adding Custom Environment Variables
- Create React App 文件：Proxying API Requests in Development
- Vite 文件：Env Variables and Modes
- npm：create-react-app
- npm：react-scripts
- 站內延伸閱讀：〈React 工具鏈規格解析：基於 Vite 的初始化流程、目錄架構與生產環境建構〉、〈Vite proxy 開發伺服器轉發設定、CORS 繞過與 Production 部署排查〉、〈ESLint 是什麼？JavaScript 程式碼檢查工具的用途、規則與設定檔入門〉、〈JSX 是什麼？React JSX 語法規則、與 HTML 的差異和轉譯原理〉
發佈留言