建立 2026-09-15 更新 2026-09-15

認識 React

React 是用來組使用者介面的 JavaScript 函式庫。你把畫面拆成可重用的元件（component），用 JSX 描述「現在資料長這樣時，畫面該長那樣」；資料變了，React 再幫你更新 DOM。本站用繁體中文整理日常真正會用到的那一層，對齊官方文件 react.dev（繁中版）。

最需要掌握的 20%

學 React 不必先背完整 API。先把下面七件事做熟，就能自己做出互動小應用，也讀得懂大多數教學與程式碼：

1. 用 Vite 起專案：官方建議新專案走 框架（Next.js 等）；只學 React 本身時，用 Vite 最單純。
2. 函式元件：一個函式回傳 JSX，就是一個元件；元件可以互相嵌套。
3. JSX：長得像 HTML，其實是 React.createElement 的語法糖。屬性用 className、htmlFor，插入資料用 { }。
4. Props：父元件把資料當參數傳給子元件，子元件只讀、不改 props。
5. State（useState）：元件自己記得的資料。更新 state 會觸發重新渲染。
6. 事件與條件／列表：onClick 傳函式；&& 或三元運算子決定要不要畫；.map() 配穩定的 key 畫清單。
7. 把 state 往上提（lifting state）：兩個元件要看同一份資料時，放到共同的父元件。接著才需要 useEffect 處理「畫面以外」的事（抓 API、訂閱）。

React 適合什麼場景

• 需要依資料反覆更新的畫面：表單、清單、儀表板、購物車。
• 同一套 UI 邏輯要在多個頁面或產品裡重用。
• 之後可能接到 Next.js、Remix 等框架做路由與伺服器渲染。

它不是完整的「網站框架」。路由、資料抓取、建置設定要另外選工具。官方預設建議用框架起步，見 Creating a React App。本站先把函式庫本身講清楚，再決定要不要上框架。

官方學習資源

React 團隊沒有獨立的「React 證照」。權威來源是 react.dev、官方井字遊戲教學，以及 React Conf 演講。

建議學習順序

1. 用 Vite 建立專案
2. 元件與 JSX、Props
3. State 與 事件
4. 條件渲染與列表
5. 提升 State，需要抓資料時再看 useEffect

相關連結以官方為準：react.dev、Learn React、API 參考。想認識唯客學院，請看 關於我們。