👋 歡迎回到《前端達人 · React 播客書單》第 9 期（正文內容為學習筆記摘要，音頻內容是詳細的解讀，方便你理解），請點擊下方收聽

你是不是常在網上看到?.tsx?項目、Babel、Webpack、tsconfig、Vite、CRA、ESLint……一臉懵？

今天這集，我們用最清晰的方式帶你搭起屬于自己的?React + TypeScript 項目開發環境，手把手從 0 開始，跑出第一個頁面！

🛠? Part 1｜快速搭建：選 CRA，不走彎路

如果你是第一次上手 React + TS 項目，用官方推薦的 CRA（Create React App）絕對是最穩的方式。

? CRA 是什么？

• 一行命令搭起開發環境

• 幫你集成好 Webpack、Babel、TypeScript、開發服務器

• 默認就支持 TS 模板，超適合新手

🧾 創建命令如下：

npx create-react-app myapp --template typescript

運行后你會得到一個結構完整、TS 配置好的項目，目錄結構、熱更新、打包策略全部就位！

📌 小貼士：

• npx?是 npm 的一次性執行命令

• --template typescript?是關鍵，否則默認是 JS 項目

💡 Part 2｜webpack 是什么？我需要學它嗎？

CRA 背后其實用的就是 Webpack，把你的?.tsx、.css、圖片等打包成瀏覽器能理解的 JS 文件。

雖然 CRA 幫你“藏”起來了，但你還是得了解：

• 📦 Webpack 會自動分析你的依賴關系

• 🔁 支持熱更新、代碼拆分

• 💅 通過 loader 加載 CSS、圖片等資源

• 🚀 配合 Babel 和 TypeScript 編譯現代 JS

以后你脫離 CRA 自己搭項目時，這就是你必須掌握的技能！

🧠 Part 3｜TypeScript 編譯器 tsc 是幕后英雄

你寫的?.tsx?是不能直接跑在瀏覽器里的，TypeScript 編譯器?tsc?會幫你：

1. 檢查類型是否正確

2. 把代碼轉成標準 JS

核心文件是?tsconfig.json，用來配置編譯行為。

🧾 Part 4｜一個重要配置項：noEmitOnError

有時候你寫的代碼雖然能轉譯成 JS，但其實是有類型錯誤的。 如果不攔住這些代碼，它可能跑出 bug！

{"compilerOptions": {"noEmitOnError":?true}
}

這行配置的意思是：

“一旦你寫錯類型，TS 編譯器就別生成 JS 了。”

這對中大型項目尤其重要，能從源頭避免類型錯誤進入打包流程！

📦 Part 5｜從零到運行，完整流程回顧

1. 運行命令創建項目

2. 啟動開發服務器（npm start）

3. 看到 React 默認首頁

4. 修改?App.tsx，寫自己的組件

5. 項目已支持 TypeScript，全程類型提示、報錯提示無縫接入！

? 本期 Key Takeaways

工具 / 概念	用途
CRA	零配置搭建 React + TS 項目
Webpack	打包資源、支持模塊系統
Babel	轉譯現代 JS
TypeScript + tsc	靜態類型檢查 + 編譯 TS
noEmitOnError	類型出錯時不生成 JS，防止 bug 泄露

#React?#React播客?#前端達人?#前端播客?#TypeScript