Search for a command to run...
Series
最近負責的專案遇到一點寫法上的瓶頸，codebase搞得亂七八糟的(太菜😅)，所以開始看一些跟模式(pattern)有點相關的文章。 這篇筆記主要內容出自於 React component as prop: the right way™️，在講述如何傳遞元件(component)當作props。 會想傳遞components當作props，主要是為了方便分享state或props、並且讓程式碼更靈活更彈性，而文章作者將傳遞方式大致上分為三種模式： Pass components as Ele...
忘記之前部署React專案到Netlify的設定，來完整記錄一下。 React 建立部署資料夾 部署 React 專案要用 npm run build 建立build資料夾管理部署檔案。 Router 接下來在 public 資料夾，新增名為 _redirects (沒有附檔名)的檔案，並在檔案中寫入以下路徑： /* /index.html 200 原本React專案中的主要檔案 (像是 index.html ) 都放在 public 資料夾，這個設定是React用來將 public 資料夾的內...
React Router DOM v5 安裝指令： $ npm i react-router-dom@5 Component Overview : Active Router : 替component註冊(register) route，只有符合這個route的component才會顯示(類似於state conditionally render) ''} > 如果要讓 <Route> 起作用，必須在其外圍包住 <BrowserRouter></BrowserRouter>...
有時候會希望可以不透過state、props傳遞的方式呼叫child component內部的function，這種方式稱為imperative approach。 以下示範如何用 ref、forwardRef 和 useImperativeHandle hook 達成： // Form.js (parent component) import {useState, useRef} from 'react' export default function Form(){ const [...
在React官方文件開宗明義地說了： Building your own Hooks lets you extract component logic into reusable functions. 即custom hook就是將程式碼包裝成一個自訂的hook拿來重複利用，就如同使用vanilla JavaScript會把重複程式碼封裝成一個函式重複使用。 至於custom hook是要包裝什麼樣子的程式碼？ 先簡單地說，custom hook就是包裝有重複使用到hook的程式碼片段。 ...
useRef 可以直接用來 修改DOM節點屬性 和 儲存可變值(mutable value)；更棒的是，使用 useRef 不僅會hold住參照值，也不會造成額外的render。 useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the ful...