React — 事件處理 (Handling Events) 與 CRUD

• React element 事件處理與 DOM element 事件處理的語法差異
  • 事件的名稱: 在 React 中都是 camelCase，而在 HTML DOM 中則是小寫
  • 事件的值: 在 JSX 中是一個 function，而在 HTML DOM 中則是一個 string
• React element 事件
  • onClick()
  • onChange()
  • onSubmit()
  閱讀全文 »

React Hook — UseEffect

UseEffect 的語法

1

useEffect(() => {  }, [depandancy])

• useEffect 有兩個參數
  • 第一個參數 : Effect function
  • 第二個參數 : Depandancy array
• 根據不同 depandancy 決定何時要執行 Effect function

React Hook — React 的狀態管理(一) UseState、createContext

🔖 什麼是 useState ?

React 的 useState 可以讓我們「手動管理狀態」，也就是說當我們改變了一個元件的資料狀態，例如文字、顏色等等，我們可以不用再刷新頁面，而是在頁面直接渲染。
而 React 的特色就是資料的「單向流綁定」，當某資料狀態改變了，可以讓整個畫面相同資料的狀態改變。

React — Styled-component

⭐ 前言

Styled-component 是讓我們在 React 元件系統撰寫 CSS 時更加方便。
同時，也可以利用 props 動態調整樣式!

React Hook — React的狀態管理(二) Redux、Recoil

React Hook 介紹

什麼是 Hook ?

Hook 的規則

🔎 參考資料

• React 官網

[AC學期2-3]利用Node.js及Express框架打造伺服器及靜態網頁(二)

⭐ 為何會使用 Express 框架 ?

1. Express 是極簡的 Node.js 網路框架 (Web framework)
2. 提供大量的 HTTP 模組程式方法、中介軟體 (middleware) 及路由系統
3. 引用樣板引擎 (template engine) 打造網頁前端頁面
4. 可以串接資料庫並可直接以 JavaScript 來操作資料庫

以上為 Express 框架最大的四個特色，我們會逐步依照下方學習重點來學習使用方式!

AC學期2-3: 自學經驗回顧

⭐ 遇到的問題及解決方式

在學習 Express 框架及串接 MongoDB 資料庫時，碰到的問題主要是 「目前的資料是什麼類型?」 以及 「對專案課程及框架概念似懂非懂」，又因為不知道資料的類型，我更無法去使用相對應的方式做邏輯處理。
所以，為了讓自己更理解整個專案及課程，我先地毯式將課程內容利用圖像化方式寫下重點以及資料流串接的方向。
再來，因為整體專案的檔案分類是利用 MVC 架構，我在二次實作時，會提早把功能分出去，例如:

• 先分好路由檔案，然後若有其他檔案需要導入路由，我會直接做串接，如此便省去最後再重構程式碼的時間
• 先把資料庫檔案分出去，若有其他檔案需使用資料庫檔案，便可以直接指向這個資料夾做載入