1、安裝node.js

這里建議安裝nvm多版本管理node.js，想用哪個版本，一條命令即可~
多版本管理node.js

2、安裝構建工具

Rollup、esbuild、webpack 和 Vite 四種前端構建工具的對比分析。
在vue那篇文章里面，默認使用的Vite構建工具。

2.1 核心特性

??Rollup?? 專注于 ES 模塊打包，支持 Tree Shaking，輸出代碼簡潔高效；插件生態較豐富 庫/框架開發，生成輕量級、高性能的 JS 庫。
??esbuild?? 基于 Go 語言，極速構建（快 10-100 倍）；支持 TS/JSX，但功能較基礎 快速開發環境，適合預構建和簡單任務。
??webpack?? 全能型打包工具，支持多種資源（JS/CSS/圖片等），生態龐大，配置復雜 復雜應用開發，尤其是企業級項目。
??Vite?? 雙引擎架構（開發用 esbuild，生產用 Rollup）；基于原生 ESM，按需編譯 現代 Web 應用開發，追求極速啟動和熱更新。

2.2 性能對比??

??構建速度??：
??esbuild?? 最快（Go 語言多線程并行），適合開發階段。
??Vite?? 開發模式下冷啟動快（跳過打包），生產模式依賴 Rollup。
??webpack?? 最慢（需構建完整依賴圖），但可通過緩存優化。
??Rollup?? 中等速度，適合小型庫打包。
??熱更新（HMR）??：
??Vite?? 最快（基于 ESM 按需編譯）。
??webpack?? 較慢（需重新計算依賴樹）。
??Rollup?? 需插件支持，原生不支持 HMR。

2.3 適用場景??

??Rollup?? JS 庫/框架（如 Vue/React 源碼打包），需 Tree Shaking 和干凈輸出。 多資源類型的大型應用開發。
??esbuild?? 開發環境預構建、快速原型開發；作為底層工具（如 Vite 的依賴預構建）。 生產環境復雜優化（如代碼分割）。
??webpack?? 企業級 SPA、多頁面應用；需處理復雜資源或兼容舊瀏覽器。 對構建速度要求極高的現代項目。
??Vite?? 現代框架（Vue/React）項目；追求開發體驗和 ESM 原生支持。 需深度定制或舊瀏覽器兼容的項目。

3、創建應用

這里我們用vite構建工具創建react

npm create vite@latest my-app -- --template react

然后上下選擇創建的框架：

??推薦選擇 TypeScript + SWC 或 JavaScript + SWC??（性能優先，適合大多數現代項目）
某些 Babel 插件（如自定義代碼轉換）可能無法直接遷移到 SWC。
npm run dev 啟動時間：SWC 約 1-2 秒，Babel 約 5-10 秒。
生產構建速度：SWC 通常比 Babel 快 50% 以上。
Babel 是一個 JavaScript 編譯器，將ES代碼轉換成js代碼

4、項目啟動

 cd react-demopnpm installpnpm run dev

出現下面的說明啟動成功：

參考文章

Vue學習001-創建 Vue 應用