PrimaryButton type: 'gold' | 'green' | 'dark-green' size: 'mini' | 'small' | 'middle' | 'large'  type: 'gold' | 'blue' | 'purple' size: 'mini' | 'small' | 'middle' | 'large' 

知識背景 編碼 Encode 加密 Encrypt 雜湊 hash 綜合應用 編碼 Encode 換個方式來呈現資料，沒有任何安全性，主要看編碼後的用途 QRcode, UTF8. Base64 等等

目標客層 想要出租自己的登山或露營等各類戶外用品的使用者 可以是個人群體出租或是商家出租 想體驗戶外活動但還不想花太多錢買裝備的使用者 價值主張 是什麼樣的產品與服務？ 租借平台 提供專門的登山露營租賃平台給想要把自己用品出租的使用者

[time=Thu, Feb 3, 2022 5:45 PM] 使用 webpack 編譯打包各個模組後，產生 /dist 目錄資料夾內容供部署至 server 上使用，客戶端在透過瀏覽器訪問此網站獲取內容，然而在獲取內容上是較消耗時間資源的。 瀏覽器使用了緩存的技術，搭配 Webpack 配置將資源緩存至客戶端中，避免每次的重新下載，達到降低網路流量以及服務器的壓力，使網站加載速度更快。 在 web 應用程式中，往往修改較頻繁的是我們的業務邏輯，但是第三方庫則是不會頻繁更動，這時我們可以透過 webpack 合理的劃分我們 chunk。 Webpack 中拆分 chunk 可以分為：

在部署到不同環境上時，會需要配置不同的環境變數。 配置步驟： 1. 安裝 yarn add env-cmd 2. 建立 .env-cmdrc 定義環境變數 { "dev": { "REACT_APP_BASEURL": "dev"

[time=Thu, Feb 3, 2022 5:54 PM] 文章大意： webpack 中的術語 React 執行 build 生成的檔案 webpack 中的術語 超級相像的拉 :)，大致上為同一份邏輯程式碼，在不同場景下的名稱。

:::info antd 4.x 後的版本也是用 craco 進行配置的 (參考) 所以開始之前，可以先了解一下 craco 並且配置配起來 craco 配置 ::: 依照 antd 官方說明，antd 是通過 ES6 Module 的 export 來匯出各個元件，直接使用 import { Button } from 'antd' 就有匯入單元 JS 檔案的效果。 官方示例 首先先安裝 antd

[time=Thu, Feb 3, 2022 5:55 PM] 只加載當前需要用到的頁面 bundle，路由懶加載 Lazy Loading， 先來看看在專案 build 完後並且本地啟動所需要加載的東西 $ yarn build // 執行打包 $ yarn global add serve // 安裝全局 server $ serve -s build // 啟動剛剛打包完的專案 :::info

使用 CRA(created-react-app) 建立項目時，如果想要完全的控制依賴項目(Webpack, Babel 等)，可以執行 script npm run eject，但這是個不可逆操作，也將無法跟隨官方升級 react-script 版本。(目前也沒有執行過這個指令) 既然這樣就使用 craco 來覆蓋配置，以及設定 alias path 自定路由並且讓 Vscode 讀懂，就能顯示配置路由下的檔案以及直接跳轉至檔案。 配置步驟： 1. 安裝 yarn add @craco/craco 2. 修改 package.json 裡的 script 指令 刪除 react-script 由 craco 來啟動

class component 擁有自己的生命週期，而 functional component 沒有 React 16.8 新增了 Hooks 功能，讓 functional Components 能夠依賴這些 Hooks 擁有自己的狀態(useState) 及生命週期(useEffect) :::info 生命週期有主要三個階段: componentDidMount 創建 componentDidUpdate 更新 componentWillUnmount 銷毀 :::

useState useEffect useContext useReducer useMemo useCallback useState 狀態管理 const [state, setState] = useState(initState)

不知道多舊版的 win chrome 出現的錯誤： :::danger TypeError: Object.entries is not a function ::: 遇到版本問題第一個想法就是 polyfill 查了一下 React polyfill 套件: react-app-polyfill，使用 create-react-app 安裝的裡面就有含了 step.1 package.json 新增 'ie 11'

React 提供了 Portal 方法，讓 children 可以 render 到 parent component DOM 樹以外的 DOM 節點。 像是以下範例 ... return ( <React.Fragment> <MyModal /> <MyForm /> </React.Fragment>

React 優化項目系列，減少大量且不必要的元件重新渲染週期 React 優化項目(一)：React.memo 如何觸發更新的 紀錄 props value React 優化項目(二)：useCallback 紀錄 func 記憶體位置

React 優化項目系列，減少大量且不必要的元件重新渲染週期 React 優化項目(一)：React.memo 如何觸發更新的 紀錄 props value React 優化項目(二)：useCallback 紀錄 func 記憶體位置

React 優化項目系列，減少大量且不必要的元件重新渲染週期 React 優化項目(一)：React.memo 如何觸發更新的 紀錄 props value React 優化項目(二)：useCallback 紀錄 func 記憶體位置

寫過 vue router 並開始寫 react router 的時候發現，定義頁面的時候沒有 name 可以定義，所以當我要換頁時只能透過 path 來決定要換的頁面 一開始要操控換頁的寫法是: <Link to=`/routerTry/catsArea/${params.catId}/comments`> Load comments... </Link> 直接把定義的路由再寫一次上去。 這樣當我頁面、層級一多，命名變得更複查的時候不就要一直翻看 Route 所定義的 path，不小心要改個 path，有用到的地方都要一個個去改。

儲存時間的標準格式 時間是相對性的。 timestamp > 1481361366000，肉眼不好分辨。 表示從 1970-01-01 00:00:00 UTC (格林威治標準時間) 開始累計到某時間點的毫秒數 (milliseconds) 1593163158 這個 timestamp 代表的是： 「UTC +0 時區的 2020-06-26 09:19:00」，同時也代表著 「UTC +8 時區的 2020-06-26 17:19:00」，這兩個時間是一樣的，都是同一個時間。

useQuery fetch data is different in network and console.log network 跟 console.log 印出不一樣 :astonished: 哎呀，原來是 cache 住拉 我發了 issue 呢，快來抗抗 >> useQuery fetch data is different in network and console.log 最終解法是在 InMemoryCache > typePolicies 加上 data 的 key 值 MsgInvite const createApolloClient = ({ onError }) => { return new ApolloClient({

使用 useQuery refetch network 回傳資料與實際 console.log 印出不一樣 哎呀，資料被 cache 住啦! 當進到某頁面使用 useQuery 取得第一次 data，執行刪除操作後使用 refetch 重新拉取 data uesQuery 如下： const { data: myRoomList, loading: listLdg, refetch // 執行刪除操作後執行 refetch 重新拉取 data