0-1 沒學過 React 可以從 Hooks 開始嗎
大約在 2019 年二月， React 16.8 版開始正式支援 Hooks 的用法後，熟悉 React 的開發者即使還沒用過，但一定聽過 Hooks 這個詞；對於原本 Vue 的開發者來說，在 Vue 3 中也受到 React Hooks 的啟發，增加了 Composition API 到原有的框架中。
到底這個大家都在說的神奇鉤子（Hooks）是什麼？
實際上，React Hooks 的推出大大降低了 React 的學習門檻，過去 React 的學習者需要先對 JavaScript 中類別（class）、this、生命週期的概念有相當程度的掌握後，才能比較了解 React 到底在做什麼，因為多數的 React 元件都是透過 class 語法在建立。但在 React Hooks 推出後，所有的 React 元件都可以透過函式的方式來建立，也就是說，，只需要有了 JavaScript 中函式的概念後，就可以開始學習使用 React， React 本身學習的難度將地了，剩下的就是看開發者本身 JavaScript 的基本功是否扎實。
我（沒有）學過 React 可以直接學 Hooks 嗎#
沒學過 React 反而可能是你的優勢#
簡單來說，這本書的內容就是希望能讓沒學過 React 的開發者能夠從 Hooks 直接上手 React，正因為你沒接觸過 React，所以你可以完全不受過去經驗的影響，學起來反而沒有什麼包袱，甚至可能更容易上手，因為 Hooks 是一個新的思維方式，而你不會一直想要把新東西對應回傳統的寫法。
需要具備的能力#
雖然這麼說，但在學習 React Hooks 之前，還是需要你至少有基本的網頁開發和 JavaScript 的知識。如果你是完全沒有任何網頁開發經驗的初學者，這本書「目前」可能還不太適合你，學習上可能會比較吃力，或者會面臨到只是照著輸入程式碼但不清楚發生什麼事的情況。下面列出幾個我認為在閱讀者本書前至少該有的基本能力：
- 聽過 HTML、CSS 和 JavaScript
- 知道怎麼撰寫 HTML 檔案
- 知道 CSS 中可以使用 inline-style 或 class 等方式撰寫樣式
- 具備基本的 JavaScript 語法基礎，包括建立函式、撰寫 if 判斷式、for 迴圈等等
- 不需要完全會用 JavaScript ES6 的語法，但知道更好
- [加分] 了解終端機的基本操作
- [加分] 使用過 Node.js 以及 npm 指令
- [加分] 有使用過 Github，並了解 Git 指令的基本做
懂查就不害怕：善用 MDN 與官方文件#
對於沒有 React 經驗的開發者來說，這本書從 React 的基礎講起，學習如何把網頁透過 JSX 放入 JavaScript 中，接著我們會進到函式型元件（functional component）、最後開始運用 Hooks 來完成各種不同的功能，包括在 React 各個元件中進行資料傳遞、製作具有互動效果的網頁、透過 AJAX 拉取資料、基本的表單處理等等。
這裡你可能會覺得有很多不懂的名詞，什麼 JSX、函式型元件（functional component） 、資料傳遞、狀態（state）和 props 等等，這些你不必擔心，內文中都會逐一涵蓋到這些內容。
唯一需要你主動去做的，就是當你在閱讀中看到不懂、不確定用法的東西時，如果是 JavaScript 語法部分，請你使用「JS 關鍵字 + MDN」去做搜尋，例如，當你看到程式中出現 const { age } = data 解構賦值的用法而你不知道這是什麼意思時，請試著使用關鍵字「解構賦值 MDN」去尋找並閱讀資料：
如果是 React 相關的，則可以到 React 的官方網站去搜尋。
要留意的是，在這本書中並不會說明 React 傳統上使用的 class 元件、生命週期等概念，雖然在新的 React 中你不需要這些東西就可以做到各種功能，但這些東西仍然相當重要，特別是如果你需要和其他團隊成員共同開發，或者維護其他人的專案，關於這些「重要但刻意不告訴你」的部分會在本書最後的章節中進行說明。
這本書會帶你從 Hooks 開始認識、熟悉並使用 React，但作為 React 入門書，而非字典書，未來還有許多地方是需要讀者自己去補足與學習的。
對於有 React 經驗的開發者#
對於有經驗的 React 開發者來說，過去學習 React 時大多是從 ES6 中的 class 語法開始學起，透過一個又一個的 class 來建立不同的元件（component），然後學習 React 中不同元件是如何掛載到網頁上、重新轉譯（render）、最後到脫離網頁上的這一整個生命週期（life cycle）。
這樣的學習途徑並沒有任何錯誤，但在學習 Hooks 的時候勢必會碰到一點阻礙，就是你會一直想要把 Hooks 的寫法或概念對應回傳統 class 的寫法，因為你認為這樣有助於你更釐清這個新東西，但實際上卻不一定如此。如同 Redux 的作者 Dan Abramov 所說，Hooks 是一個新的思維方式，因此有些時候，你必須忘掉原本學過的，這樣反而更能幫助你學習新的事物。
tip
💡 提醒：看似反其道而行，但有些時候，你必須先忘掉原本學過的，如此更能幫助你學習新的事物。
如果你已經撰寫過 React 的話，可以直接跳到你需要的單元後閱讀即可，不需要從頭開始看那些已經知道的內容。
只有一點要提醒的是，在學習 React Hooks 的過程中，希望你可以先假裝沒學過 React 的 class 元件、生命週期等等，因為如果一直想要把新語法對應回傳統的知識，學起來會發現這裡卡卡的、那裡卡卡的。等到你對於 Hooks 的思維漸漸熟練後，再回過頭去對應傳統 React 的寫法，相信你更能夠統整這兩種不同語法。