創建React App：快速獲取React項目

Create React App (CRA) 速覽

Facebook 推出的命令行工具 Create React App (CRA) 簡化了 React 項目的創建過程。它預配置了 webpack 構建流程，免去了搭建複雜構建管線的麻煩。

CRA 可通過 npm 或 Yarn 運行，它會設置一個包含 react-scripts 包的項目結構，其中包含所有配置和構建腳本。該工具還包括一個本地開發服務器，並支持 ES6 和 ES7 特性、CSS 模塊、Jest 單元測試和 ESLint。

使用 npm run build 可以創建生產環境包，生成一個優化後的應用程序版本，準備部署。它還支持環境變量、代碼分割、TypeScript、漸進式 Web 應用以及使用 web vitals 進行性能衡量。

如果 CRA 提供的功能不足，用戶可以選擇運行 npm run eject，這會將 webpack 配置和構建腳本複製到項目中，允許進行自定義。或者，用戶可以 fork react-scripts 包並維護自己的分支，添加所需的功能。

Create React App 的工作原理

Create React App 是一個獨立工具，可以使用 npm 或 Yarn 運行。只需幾條命令即可在一個新文件夾中生成並運行一個新的 React 應用：

使用 npm：

<code class="language-bash">npx create-react-app new-app
cd new-app
npm start</code>

使用 Yarn：

<code class="language-bash">yarn create react-app new-app
cd new-app
yarn start</code>

Create React App 將設置以下項目結構：

<code>new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock</code>

它還會向您的項目添加一個 react-scripts 包，其中包含所有配置和構建腳本。換句話說，您的項目依賴於 react-scripts 包，而不是 create-react-app 本身。安裝完成後，您可以啟動開發服務器並開始處理您的項目。

主要功能

• 本地開發服務器: npm start 將啟動一個 webpack 開發服務器，包含一個觀察程序，會在您更改內容後自動重新加載應用程序。從 v4 開始，Create React App 支持 React 的快速刷新作為熱模塊替換的替代方案。

• ES6 和 ES7 支持: 使用 babel-preset-react-app 預設支持 ES6 和 ES7 特性，例如 async/await、對象 rest/spread 屬性、動態 import() 等。

• 資源導入: 可以從 JavaScript 模塊導入 CSS 文件、圖像或字體。構建應用程序後，Create React App 會將這些文件複製到構建文件夾。

• 樣式: 支持導入 CSS 文件，構建時會將所有 CSS 文件合併到一個包中。支持 CSS 模塊（*.module.css）和 Sass（.scss 文件，需要單獨安裝 node-sass）。

• 單元測試: npm test 使用 Jest 運行測試，並啟動一個觀察程序，以便在您更改內容時重新運行測試。

• ESLint: 在開發過程中，代碼將通過 ESLint 進行靜態代碼分析。

• 創建生產環境包: npm run build 創建一個優化的生產環境包。

• 部署: 生成的構建結果是靜態文件，可以方便地部署到各種環境。

• 環境變量: 支持使用以 REACT_APP_ 開頭的環境變量。

• 反向代理: 可以通過在 package.json 中配置 proxy 字段來代理請求。

• 代碼分割: 支持使用動態 import() 進行代碼分割。

• TypeScript 支持: 可以使用 --template typescript 選項創建 TypeScript 項目。

• 漸進式 Web 應用 (PWA) 支持: 可以使用 --template cra-template-pwa 或 --template cra-template-pwa-typescript 選項創建 PWA 項目。

• Web Vitals: 使用 web-vitals 庫跟踪 Web Vitals 指標。

放棄使用 CRA

如果 CRA 的功能不足，可以使用 npm run eject 將 webpack 配置和構建腳本複製到項目中，以便自定義。或者，可以 fork react-scripts 包並維護自己的分支。

總結

Create React App 是開始新 React 項目的便捷工具，它簡化了構建流程，並提供了豐富的功能。無論是快速原型還是大型項目，它都能節省大量開發時間。

(FAQs 部分略去，因為與文章內容重複，且篇幅過長。)

以上是創建React App：快速獲取React項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！