yijay

「想讓全世界看到我的網頁」，那就來把 react 上到 github page 吧！ 1. 透過 vite 快速安裝 react (比 webpack 快，比 CRA 瘦) 2. 安裝 gh-pages 來快速發佈至 github page 3. 修改 base path 完成發佈 1. 透過 vite 快速安裝 react 這邊會建立一個「home」資料夾，並快速安裝 react yarn create vite home --template react 如果沒裝 yarn 也可以使用 npm 來安裝 npm create vite@lateset home -- --template react 裝好 vite 接著在來把依賴套件裝起來 yarn install 那我們可以先看看資料夾內容，應該差不多，不過接著的 HMR 及運行速度才是重點 vite、react 那就來試用看看這個 vite build tool run 起來 react 的狀況吧！ yarn dev 我這邊是 0.3s 就運行起來，然後自己嘗試更改一些程式可以發現 HMR 快得驚人 ．．． http://localhost:3000/ 2. 安裝 gh-pages 來快速發佈至 github page 我們先連接至自己 github 上的 repository，並把專案推上去 git init git branch -M main git add . git commit -m 'first commit' git remote add origin https://github.com/你的帳號/你的repo.git git push -u ori

react 使用 Google Analytics (以下簡稱GA)， 你也可以不使用套件，直接使用GA上提供的「全域網站代碼(gtag.js)」 1.安裝 GA 套件 2.初始化 GA 3.將 url 加入 GA 4.將 button 加入 GA 5.將 select 加入 GA 6.將其寫成 component 置於 src/index.js 1.安裝 GA 套件 npm i react-ga4 2.初始化 GA import ReactGA from 'react-ga4' ReactGA.initialize('G-XXXXXXXXXX') //你的GA評估ID 3.將 url 加入 GA ReactGA.send('https://www.xxx.xxx') //你要偵測的URL 理論上加完，並執行該網頁，就會在GA平台上看到如下的狀況 4.將 button 加入 GA const gaEventTrack = () => { // body 外無 hasAttribute 方法，避免錯誤 const body = document.querySelector('body'); body.addEventListener('click', (e) => { let target = e.target; // 查找元素不包含 data-ga-action，且到 BODY 後跳出 while(target.hasAttribute('data-ga-action') === false && target.tagName !== 'BODY'){ // 父元素覆寫當下元素 target = target.parentNode; } if(target.hasAttribute('data-ga-action')){ const dataGaCategory = target.getAttrib