建立專案
要寫 React，本機需要 Node.js（建議 20 以上）與套件管理員。官方文件把「做產品」與「學 React」分開：產品用框架，練習用 Vite 最單純。
官方怎麼建議起步
Creating a React App 建議新應用選：
| 需求 | 常見選擇 |
|---|---|
| 網站、SSR、檔案路由 | Next.js |
| 以函式庫為主、自己組路由 | React Router 的框架模式 |
| 手機 App | Expo（React Native） |
不要再用 Create React App：官方已停止維護。舊教學若出現 npx create-react-app，改成 Vite 或上方框架即可。
本站後續範例假設你用 Vite + React，這樣看到的是 React 本身，不是框架的檔案慣例。
用 Vite 建立
終端機執行：
瀏覽器開啟終端機印出的網址（預設 http://localhost:5173）。改 src/App.jsx 存檔後，畫面會熱更新。
--template react-ts 可改 TypeScript。觀念相同，本站範例用 JavaScript 減少語法干擾。
目錄在做什麼
my-react-app/
├── index.html # 唯一 HTML，裡面有 <div id="root">
├── package.json
├── vite.config.js
└── src/
├── main.jsx # 把 <App /> 掛到 #root
├── App.jsx # 根元件，從這裡開始改
└── index.css
main.jsx 大致是：
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);
createRoot 把 React 樹接上真實 DOM。StrictMode 在開發模式會多跑一次某些邏輯，用來提早抓不安全的副作用，上線建置不會這樣做。
下一步
打開 App.jsx，把內容換成自己的元件。接著讀 元件與 JSX。
安裝與畫面可對照 YouTube 優質教學 裡 SuperSimpleDev、Traversy Media 的 Vite 段落。