此篇文章為看過 Scrimba 線上課程 （The Frontend Developer Career Path） 之教學影片後的筆記整理，內容與例子大多出自該教學影片。

---

簡介

React 中的 component 傳遞是由上往下的，無法在同級的 component 間 / 在其他的分支間傳遞。如果要在同級間傳遞，就要將 state 提升到上一層 component，如果在不同分支，就要一直往上提升到兩個 component 間都有共用的為止。往上提升後，再把 props 一層一層往下傳，傳到天荒地老。

Github
Live Demo

簡介

這個為了練習使用 React 的邏輯以及編寫方式所刻的頁面。這裡練習了如何使用 TMDB 提供的 API 來獲取需要的資料、使用 useState 以及 useEffect來更新資料、拆分 component、使用 styled component 的方法。下面記錄了搜尋頁面 fetch API 的詳細步驟，其他頁面則只是記錄重點功能。參考資料附在文末。

另外，因為專案一直在添加新的功能，因此檔案名字以及 Code 都會有調整，並不完全跟筆記的一樣。

Github
Live Demo

簡介

Meme Generator 提供用戶製作迷因圖。使用串接 API 的方式將迷因圖呈現在畫面上，輸入文字後便可以下載該迷因圖。

Live Demo
Github

簡介

這是一個有基本功能的 todo list 練習，為了練習語法以及邏輯，所以參考了教學影片，文末附上教學影片之連結。這裡練習了各個 Component 之間的傳遞、React Hook 也認識了之前沒有用過的幾個 CSS 小方法。下面詳細記錄了自己的學習步驟。

此篇文章為看過 Scrimba 線上課程 （The Frontend Developer Career Path） 之教學影片後的筆記整理，內容與例子大多出自該教學影片。

---

Function Component

• function component 長這樣

此篇文章為看過 Scrimba 線上課程 （The Frontend Developer Career Path） 之教學影片後的筆記整理，內容與例子大多出自該教學影片。

---

useEffect 小栗子

• 可運作 side effect （可以影響其他 component 且在 render 期間無法完成的），如 fetch 資料、訂閱、或手動改變 DOM。
• useEffect 包含了 componentDidMount ，componentDidUpdate ，以及 componentWillUnmount 的功能
• 每一次render都會執行useEffect，因此要設定在某個條件下才會觸發這個 function