Search for a command to run...
Series
近期看了一些新東西，有些觀念沒弄清楚，所以整個翻新之前的React新手系列文章。 這篇入門主要是跟著React官方文件和Udemy課程去整理和撰寫的。 一開始看到 React 很認真地在想為什麼需要它？但是當自己開始試做幾個side project，不斷在不同份檔案重複貼上相同的標籤或程式碼的時候，才認真體會到需要學習 React 的好處。總之入手新東西總是要有一點時間把玩和紀錄，所以出現了這篇系列文！ React 簡介 React由Facebook開發，是一個非常熱門的 JavaSc...
接下來要認識 Components。 Component 在 React 裡面分為 Function Component 和 Class Component，我目前的規畫是先熟悉Function Component的寫法，再去瞭解Class Components，會這樣規劃是基於以下幾個原因： 雖然以前大家都是用Class Component，但React 在16.8版推出Hook以後，現在專案開發的趨勢是使用 Function Component 這種比較簡潔的寫法； 就我所知，學習 Cla...
延續前一篇用來練習傳遞React props做的成績填寫小程式。 前一篇的成績填寫小程式 有個惱人的問題，就是使用者只要一打開小程式就會立刻跟你要成績，感覺有點咄咄逼人。 為了修正這個小程式，目前構想是這樣的： 打開程式以後，要點選按鈕才會跳出成績填答的詢問視窗，並更新畫面上所顯示的成績。 因此這篇想了解React的事件處理，在按鈕上新增修正成績的事件來修正這個小程式。 React component 的事件處理跟JS DOM 處理事件的方式相當類似，基本上使用JSX語法處理事件只需要掌...
前面鋪陳Function Components這麼久，終於來到Hooks! Hooks出現前，React使用者都是用Class Components，但為了簡化Class Components複雜的寫法和設計，於是React 16.8 以後推出 Hooks! 在正式介紹Hooks的功能之前，我想用這篇來整理Hooks的特色和規則： Hooks 是 React 16.8 以後推出的功能 Hooks 只能在Function Component裡面使用，這也是為什麼前面要先介紹 Function C...
在第0篇有提到state在React的重要性： state 是用來驅動component更新(re-evaluate)，並且根據修改的地方重新渲染(re-render)畫面。 在正式說明state之前，有個關於function component的重要性質必須提及： 重新渲染(re-render)畫面，代表重新呼叫(call)function component，所以component裡面的變數等都會重新建立 從JavaScript語法的角度試想一下，每次呼叫函式(function)，函...
延續前一篇筆記 state 的概念和範例程式，繼續了解另一個跟state有關的重要概念 ─ State Lifting。 首先修改上次的程式碼。 上次我們是利用瀏覽器提供的 prompt() 方法詢問成績，但為了完成這個動作得複製兩次 Student component 來完成，而前一篇學到state，我想應該可以透過state來記錄並顯示更新前後的成績。 為了記錄成績，理所當然地會先在跟成績有關的 Grade component 加上 state 變數，所以如下範例移除原本跟成績有關的 p...