前言

每年的這時候，中文社群總能多出一堆十分有質量的文章，原因是一年一度的鐵人賽又開幕啦！我一直都很喜歡鐵人賽的文章，在我還是菜鳥的時候，陪我度過大量的時光，以前就很想報名參加這個活動，不但能為中文技術社群貢獻一些心力，更能讓自我對於該技術的理解更上一層樓。

為什麼選這個題目

前端變化的速度很快，各式各樣的新技術不斷出現在眾人的視野中，就算將目光收斂至已經很成熟的框架體系 - React 之中，每年還是能看到不少的變化，尤其是今年多了 hook 這個新的語法，讓以往 React Developer 覺得理所當然的概念，變得不一樣了，現在整個 react 生態圈刮起了一道 hook 炫風，身為一個前端開發者，馬上開始著手學習，是一件比汽車維修員踢足球帶板手還要合理的事情！

本篇文章會有什麼

為了避免我與前人寫下的教學文太過接近，我想講 react 16 以後的新特性，尤其著重在講解 hook 的一些使用技巧上，思考了一陣子大綱的編排，我相信很多鐵人賽的讀者都跟之前的我一樣，對於 React 不是這麼的了解，所以我會花幾天的篇幅去講基本的內容，比方說如何建立一個 React 的專案，或是檔案結構的建議之類的東西，這 30 天大致上的內容如下：

目錄

1. 前言
2. 新手補給站(0)_React 的基本認識
3. 新手補給站(1)_JSX
4. 新手補給站(2)_component state props
5. hook(0)_為什麼要有 hook
6. hook(1)_useState
7. hook(2)_useEffect,useLayoutEffect
8. hook(3)_useContext,useReducer
9. hook(4)_useCallback,useMemo
10. hook(5)_useRef,useImperativeHandle,useDebugValue
11. 邏輯復用(0)_邏輯復用是什麼
12. 邏輯復用(1)_render props
13. 邏輯復用(2)_high order component
14. 邏輯復用(3)_hook
15. 專案實作(0)
16. 專案實作(1)
17. 專案實作(2)
18. 專案實作(3)
19. 專案實作(4)
20. 專案實作(5)
21. 專案實作(6)
22. 專案實作(7)
23. Jest & React testing library
24. 幫專案寫測試(1)
25. 幫專案寫測試(2)
26. React debug tool-profiler
27. 幫專案作效能優化(1)
28. 幫專案作效能優化(2)
29. storybook
30. 幫專案寫元件展示

前置條件

• 熟悉 javascript ES6 語法
• 最好是碰過一點點 React

在我寫下這篇文章的時候， react 的版本號在 v16.8.6 ，如果正在觀看的你發現跟當前的版本號有一段差距，請斟酌觀看