Create React App (CRA) 速覽

Facebook 推出的命令行工具 Create React App (CRA) 簡化了 React 項目的創(chuàng)建過程。它預(yù)配置了 webpack 構(gòu)建流程，免去了搭建復(fù)雜構(gòu)建管線的麻煩。

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

使用 npm run build 可以創(chuàng)建生產(chǎn)環(huán)境包，生成一個優(yōu)化后的應(yīng)用程序版本，準備部署。它還支持環(huán)境變量、代碼分割、TypeScript、漸進式 Web 應(yīng)用以及使用 web vitals 進行性能衡量。

如果 CRA 提供的功能不足，用戶可以選擇運行 npm run eject，這會將 webpack 配置和構(gòu)建腳本復(fù)制到項目中，允許進行自定義?；蛘撸脩艨梢?fork react-scripts 包并維護自己的分支，添加所需的功能。

Create React App 的工作原理

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

使用 npm：

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

使用 Yarn：

yarn create react-app new-app
cd new-app
yarn start

Create React App 將設(shè)置以下項目結(jié)構(gòu)：

<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 包，其中包含所有配置和構(gòu)建腳本。換句話說，您的項目依賴于 react-scripts 包，而不是 create-react-app 本身。安裝完成后，您可以啟動開發(fā)服務(wù)器并開始處理您的項目。

主要功能

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

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

• 資源導(dǎo)入: 可以從 JavaScript 模塊導(dǎo)入 CSS 文件、圖像或字體。構(gòu)建應(yīng)用程序后，Create React App 會將這些文件復(fù)制到構(gòu)建文件夾。

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

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

• ESLint: 在開發(fā)過程中，代碼將通過 ESLint 進行靜態(tài)代碼分析。

• 創(chuàng)建生產(chǎn)環(huán)境包: npm run build 創(chuàng)建一個優(yōu)化的生產(chǎn)環(huán)境包。

• 部署: 生成的構(gòu)建結(jié)果是靜態(tài)文件，可以方便地部署到各種環(huán)境。

• 環(huán)境變量: 支持使用以 REACT_APP_ 開頭的環(huán)境變量。

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

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

• TypeScript 支持: 可以使用 --template typescript 選項創(chuàng)建 TypeScript 項目。

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

• Web Vitals: 使用 web-vitals 庫跟蹤 Web Vitals 指標(biāo)。

放棄使用 CRA

如果 CRA 的功能不足，可以使用 npm run eject 將 webpack 配置和構(gòu)建腳本復(fù)制到項目中，以便自定義?；蛘?，可以 fork react-scripts 包并維護自己的分支。

總結(jié)

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

(FAQs 部分略去，因為與文章內(nèi)容重復(fù)，且篇幅過長。)

以上是創(chuàng)建React App：快速獲取React項目的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！