平常在學校上課的時候，我總會有一種感覺:

對IT人來說，在「以簡單的方式講技術」和「正確傳達觀念」之間取得平衡是一件很難的事。

很多時候為了要傳達正確的觀念，在用字遣詞上要比較精確、或是在介紹工具的順序很難取捨，卻會讓初學者霧煞煞。舉例來說，我在學React時看的第一份tutorial的第一句話是這樣的:

React是由元件(Component)組成，元件再由組件(props)和狀態(state)組成。

這種感覺就跟我在學C語言時遇到的第一堂課很像:

printf是可以印出東西的函數，它可以有很多參數。

props和state在React很常被一起討論，所以要先講哪個還是要一起講，挺難抉擇的。但突然出現「元件、組件、狀態」，對於JS框架的初學者來講，就像是剛學程式時突然聽到函數、參數一樣，每個名詞我好像都聽的懂，但不是很確定跟現在教學者想表達的一不一樣，然後就硬摸著頭皮邊猜邊學下去，努力在短時間把聽到的這些東西全部吸收。

所以這次的系列文，我試著用說故事的方式去講。這個工具出現的背景是什麼?它的功用是什麼? 它的基本語法是什麼? 它的例子是什麼? 它是不是會牽扯到其他東西? 它是不是有什麼重要的原理要懂? 這次每一篇都是盡量照這個模式去寫。然後我在一開始把腳步放很慢，因為我覺得剛進入框架的人會有種自己好像在學新的語言的feel，需要慢慢去熟悉「前端框架不是模板(template)，而是一套遵循JS語法的新邏輯」，像props就講了3篇哈哈XD。

然後整個系列的進度安排也是盡量像講故事一樣，一開始我預設的故事是這樣的:

前端框架是什麼 -> 為了「解決以前的問題」的函式庫->第一個問題是很多重複的功能 -> 用自訂元件來解決 -> 想跟過去一樣用參數控制自訂元件 -> 產生props來解決 -> 做元件時發現畫面不會變 -> 產生state來更新畫面 -> 很多props和state在專案，debug不方便 -> 講debug tool

然後我看了一下，發現還剩下這些東西要講

1. fetch
2. 生命週期 (會提到fetch、state和props)
3. 元件溝通 (會提到生命週期、state和props)
4. custom hook (要有可以模組化的東西)
5. input互動(會提到生命週期和state)
6. react-router-dom (會提到元件溝通)

所以最後決定塞兩個練習進去當作起承轉合。剩下就把想講但還沒講的東西排一排，沒有特別的邏輯。

講fetch -> 講生命週期，討論fetch應該在哪裡做 -> 利用生命週期去做元件溝通 -> 練習前面所有元件觀念 -> 用custom hook簡化前面的練習成果

不過搞不好自己還是寫的不清楚就是了(?)

這次滿戰戰兢兢的，因為第一次寫這種文，然後當初是靠codecademy有懂沒有懂之下自學React，又由於一些特別的背景，平常我也是摸著頭自己一個人寫專案，所以滿擔心有哪裡講錯或是自己不知道。雖然有先趁暑假備10篇左右，但發文前後還是會再回去review好幾次。

鐵人賽之前，我只是一個菜雞；鐵人賽之後，我是翻了很多資料的菜雞。

心得大概是John子。對了，希望以後鐵人賽可以有排程發文功能。

感謝在系列中幫我指正的人，也感謝願意看完這系列的你。