1. create-react-app (CRA)

簡介：

create-react-app 是官方推薦的 React 項目腳手架工具，提供了一個開箱即用的開發環境，幫助開發者快速啟動 React 應用。它會自動配置 Webpack、Babel、ESLint 等工具，讓你專注于開發而不需要手動配置工具鏈。

特點：

• 零配置：CRA 自動配置了常用的工具鏈，開發者無需手動配置 Webpack、Babel 等。
• 適合初學者：對于初學者來說，create-react-app 是一個非常友好的選擇，能夠幫助開發者集中精力學習 React 和 JavaScript。
• 可以 eject：如果你有更復雜的需求，可以通過 eject 命令暴露配置，進行自定義調整。
• 穩定性強：CRA 已經廣泛應用于各種生產項目，官方也持續維護和更新。

依賴：

• react, react-dom, webpack, babel, eslint 等。

項目結構：

my-app/
├── node_modules/            # 存放項目依賴的目錄
├── public/                  # 公共靜態文件（如 index.html）
│   ├── index.html           # HTML 模板文件，React 會將內容插入這個文件
├── src/                     # 源代碼文件
│   ├── index.js             # 應用的入口文件，通常用來渲染根組件
│   ├── App.js               # 主組件，應用的根組件
├── .gitignore               # Git 忽略文件，指定不需要版本控制的文件
├── package.json             # 項目的元數據文件，包含依賴管理和腳本命令
├── package-lock.json        # 鎖定版本的文件，確保每次安裝依賴時版本一致
└── README.md                # 項目說明文檔

包管理：

使用 npm 或 yarn 進行包管理。以下是常用命令：

• 啟動開發服務器：npm start
• 構建生產版本：npm run build
• 運行測試：npm test

---

2. Vite

簡介：

Vite 是一個現代化的前端構建工具，強調極速的啟動和構建速度。Vite 利用了原生 ES 模塊的優勢，使用 ESBuild 進行代碼編譯，提供超快的開發體驗，適合開發 React、Vue 等前端框架的應用。

特點：

• 快速啟