Hi！大家好，我是神 Q 超人，很開心又過了一年了（咦？

自從去年鐵人賽毅然決然退隱修煉後，一直在等著的就是這個機會 XD ，希望能夠記取去年到後半段不知道在寫什麼的窘境，本篇就算是目錄型態，會規劃一年一度的這三十天「我會做什麼」，雖然可能會破了一些梗，也有會想到什麼而加東加西，但換個角度想會讓人期待的對吧！

今年還是強勢選擇 React ，而運氣很好的，在上次鐵人賽才結束， React 馬上就釋出了 Hooks ，也讓我這次能夠分享新的東西給大家！

除此之外，比較特別的是多了 TypeScript ，因為秉持著鐵人賽的精神，也得讓自己多點收穫，還有另外一點運氣很好的是 第二屆 F2E 前端精神時光屋 剛結束，筆者在幾個作品上剛熱騰騰的用上，也從中學習到 TypeScript 尬上 React 的新滋味，已經迫不及待的分享給大家了！

最後想和大家說，雖然我喜歡分享，但

更讓我覺得難得的是與我「產生連結的人」，

這麼說絕對不是要讓大家有壓力的看文章！也不代表所有筆者的立場！只是我認為 IT 圈子其實很小，但是想和各式各樣的人相遇又很難，

而打文章卻能讓所有人相連，讓你們看見我，

也造就許多機會，讓我能看見更大的世界！

所以啊！趁著大神雲集的鐵人賽期間，如果有看見有趣的文章，不妨留下你的回應，讓自己也擁有看得更廣更多的機會吧！

目錄

1. React | 別再放一堆 CDN，把 Webpack 裝起來就對
2. React | 想要程式整齊，長命百歲，給我用 ESLint
3. React | JSX 瀏覽器看不懂？要翻譯就靠 Babel
4. React | SCSS 加上 Webpack 混搭款，讓你寫 CSS 上天堂
5. React | F5 按鍵守護者，讓網頁自動刷新的 Webpack-dev-server
6. React | 一次說完 JSX 基本用法
7. React | 從 Hooks 開始的 Component 新生活
8. React | Function Component 的 State 在哪裡
9. React | 掌管 Lifecycle 和一切作用的 useEffect
10. React | Props-Type 替你把關 Component 的 Props
11. React | 你有傳送門，我有 useContext
12. Redux | React 的快樂小夥伴-Redux 資料管理篇
13. Redux | React 的快樂小夥伴-Redux 事件處理篇
14. Redux Logger | Redux 的改變， Redux-logger 看得見
15. React Saga | 見一次就愛上的 async flows
16. React Router | SPA 的換頁不是你的換頁
17. Jest | 不知道對不對，就把邏輯通通給我測起來
18. Jest | 用 Mock 打造國家機器，驗證函式執行
19. Test With React | Component 的測試方式不私藏
20. Test With Redux | Component 被 Redux 罩著怎麼測試？
21. Test With Redux | 從測試角度操作 Redux-Saga 和 Reducer
22. Test With Router | 創建假 History，騙過真 Router
23. TypeScript | 你説 JS 是什麼弱型別？TypeScript 強勢登場
24. TypeScript | 只要別搞混 Class，你想得到通通有
25. TypeScript | 善用 interface 抽象概念，為 Class 找到出路
26. TypeScript | 精選設計模式實戰，打通 interface 及 class 的運用觀念
27. TSX | 最強聯名款 TSX 上市-Babel、Webpack、Jest 篇
28. TSX | 最強聯名款 TSX 上市-SCSS 篇
29. TSX | 最強聯名款 TSX 上市-ESLint 篇
30. TSX | Component 後，TypeScript 的定位在哪？