Create React App (CRA) 速覽

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

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

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

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

Create React App 的工作原理

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

使用 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 將設置以下項目結構：

<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 本身。安裝完成後，您可以啟動開發(fā)服務器並開始處理您的項目。

主要功能

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

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

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

• 樣式: 支持導入 CSS 文件，構建時會將所有 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)境包。

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

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

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

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

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

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

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

放棄使用 CRA

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

總結

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

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

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