跳至主要內容

開始使用

建立 React 應用程式是建立單頁面 React 應用程式的一種官方支援方式。它提供現代的編譯設定，無需任何配置。

快速入門​

npx create-react-app my-app
cd my-app
npm start

如果您之前已透過 npm install -g create-react-app 全域安裝 create-react-app，建議您使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 來解除安裝套件，以確保 npx 始終使用最新版本。

(npx 附屬於 npm 5.2 以上版本，請參閱 舊版 npm 版本的說明)

然後開啟 https://127.0.0.1:3000/ 來查看您的應用程式。

準備好部署至製作環境時，以 npm run build 建立壓縮的套件。

npm start

立即開始​

您不需要安裝或設定 Webpack 或 Babel 等工具。它們已預先設定並隱藏起來，讓您可以專注於撰寫程式碼。

建立一個專案，即可開始。

建立一個應用程式​

您的本機開發機器上需要安裝 Node >= 14（但伺服器上則不需要）。您可以使用 nvm（macOS/Linux）或 nvm-windows 在不同的專案間切換 Node 版本。

若要建立新的應用程式，您可以選擇下列方法之一：

npx​

npx create-react-app my-app

(npx 附屬於 npm 5.2 以上版本，請參閱 舊版 npm 版本的說明)

npm​

npm init react-app my-app

npm init <initializer> 可在 npm 6+ 中使用

Yarn​

yarn create react-app my-app

yarn create 可在 Yarn 0.25+ 中使用

選取範本​

您現在可以選擇透過將 --template [template-name] 附加至建立指令來從範本開始新的應用程式。

如果您沒有選取範本，我們將使用我們的基礎範本建立您的專案。

範本的名稱格式永遠為 cra-template-[template-name]，但您只需在建立指令中提供 [template-name] 即可。

npx create-react-app my-app --template [template-name]

您可以在 npm 上搜尋 "cra-template-*" 來找出可用的範本清單。

我們的 自訂範本 文件說明了您可以如何建構自己的範本。

建立 TypeScript 應用程式​

您可以使用範本來開始新的 TypeScript 應用程式。若要使用我們提供的 TypeScript 範本，請將 --template typescript 附加至建立指令。

npx create-react-app my-app --template typescript

如果您已經有一個專案並想加入 TypeScript，請參閱我們的 加入 TypeScript 文件。

選取套件管理員​

當您建立新的應用程式時，CLI 會根據您用於執行 create-react-app 的工具使用 npm 或 Yarn 安裝依賴項。例如

# Run this to use npm
npx create-react-app my-app
# Or run this to use yarn
yarn create react-app my-app

輸出​

執行這些指令中任一個，都會在目前資料夾中建立一個名為 my-app 的目錄。在那個目錄中，它會產生最初的專案結構並安裝傳遞性依賴項

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

沒有設定或複雜的目錄結構，只有建置應用程式所需的文件。安裝完成後，您可以開啟您的專案資料夾

cd my-app

腳本​

在新的專案中，您可以執行一些內建指令

npm start 或 yarn start​

以開發模式執行應用程式。開啟 https://127.0.0.1:3000 在瀏覽器中查看。

如果您變更了程式碼，頁面將會自動重新載入。您會在主控台中看到建置錯誤和程式碼品質警告。

Build errors

npm test 或 yarn test​

於互動模式中執行測試監視器。預設會執行自上次提交後有變動的檔案相關測試。

閱讀更多關於測試的資訊.

npm run build 或 yarn build​

於 build 資料夾中建置供應程式生產環境的應用程式。正確地將 React 綑綁於生產模式中，並針對最佳效能最佳化建置。

建置已最小化且檔名包含雜湊值。

您的應用程式已準備就緒可以部署。