iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

2
Modern Web

給初入JS框架新手的React.js入門系列 第 31

後記 - 一個菜雞、胡言亂語

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

對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子。對了,希望以後鐵人賽可以有排程發文功能

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


上一篇
【React.js入門 - 30】 學了React之後,然後呢?
系列文
給初入JS框架新手的React.js入門31

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-03-14 10:49:42

翻了很多資料的菜雞 XDDD
恭喜完賽 /images/emoticon/emoticon32.gif

想說過了這麼久突然有人來留言是不是有什麼事 嚇了一跳XD 謝謝你啦~

我要留言

立即登入留言