大家好，我是查理！
懷抱著既緊張又期待的心情參加，也抓著朋友們一起組團，這樣就能一起緊張(剉咧等)了。

我們都是在網頁中暢遊的小小工程師，團員丹尼要來做新手友善的微型專案，團員廷仔要來從 Roadmap 的來看後端技術，團員 Hugh 則是帶著設計師與工程師的靈魂探索查克拉(Chakra UI)與動畫之力，而我則是來打造自己 React Hook Libary。

煎餅(我的貓)則是負責睡覺。

團隊超連結

我知道 React

前陣子市場上充斥者 Vue 的課程時，我毅然決然就是要學 React，當時也沒想那麼多，也剛好踏上了 React 17，也就是距離 React 16.8 Hook 剛推出不久 (其實也差了一年)。寫著 Vue 的朋友，說根本看不懂 React，覺得好難，我說：「我才看不懂 Vue。」我想，水系跟草系難怪會屬性相剋 (離題

但不論是 Vue 或是 React，這些框架都讓我們能更專心地處理畫面，好好的設計產品與使用者之間的互動。而 React 在有了 Hook 之後，更能輕易地感受到 Hook 帶來直覺與方便性。

(傑尼傑尼)

但 Hook 是甚麼？

Hook 其實就跟一般 function 一樣，在你需要的時候引入使用。

React Hook 並非 100% 全新的內容，是建立在 React 既有的觀念上的新 API，Hook 將狀態的管理，使原本複雜的 component 能在 state 的運用上更加清楚且直覺。

function App () {
  const [number, setNubmer] = React.useState(0)

  const handleClick = () => {
    setNumber(number + 1)
  }

  return (
    <div>
      <button onClick={handleClick}>ADD NUMBER</button>
      <div>{number}</div>
    </div>
  )  
}

React.useState 是其中一個 Hook，假如你沒學過 React，或還沒使用過 Hook，對於這樣程式碼的第一印象，是不是覺得「直覺」呢？ (或許不用看到 this 比較沒有壓力 XD)

「不就是 function。」沒錯，就是 function！

而 Custom Hook，也就是本系列主角，讓我們更好的將邏輯抽出，製作出可重複使用的 Hook，畢竟 function 就是這樣！

動機

本系列的動機無非就是想解決自己的開發煩惱，如果你也有換個專案就找不到心中的 Hook、不想每次又 useState 起手、一樣的 handler 寫到膩、或是積了一堆 hook 不知道怎麼拆，歡迎加入本系列一起解決煩惱，打造出自己的 Custom Hook Libary 吧！

※溫馨提醒：建立 Custom Hook 的前提仍然是基於 React Hook，useState 起手是不可避免的唷 ʅ（´◔౪◔）ʃ

ROADMAP

很怕在打造過程又不小心雷到自己，因此這 30 天的旅途大致上是：

• Basic Hook: useState, useEffect, useCallback, useMemo, useRef 回頭好好認識基本的 Hook。
• Commom Usage: 建立常見的功能，如：toggle, trigger, date, event-related...等等。
• Libraries(Packages): 加入其他套件切磋切磋。
• Publish: 產出！因有些特定邏輯只會出現在特定專案，我們不會把每個 Custom Hook 都打包起來，建立特定邏輯時再把這些 Hook 疊起來使用吧！

圖片出處
(用 Hook 建立新的 Hook，再用新的 Hook 建立新的 Hook，再用新的...疊起乃)

接下來

你可能會需要準備一點：

• ES6+的語法
• React的基本知識
• 跟電腦

就讓我們手勾手，一起與 React(傑尼傑尼) 踏上旅途吧！

若本系列有錯誤的內容，歡迎隨時跟我告知。