yijay

1. 安裝 sass 2. 修改副檔名 3. 引入該檔案 1. 安裝 sass 有人可能會問說，node-sass 不行嗎? 是可以，不過可能會遇到些 問題 ，且已經不支持，請改裝 sass 移至 react 專案，安裝 sass cd my-app npm i sass (or yarn add sass) 2. 修改副檔名 .css 改為 .scss 3. 引入該檔案 視自己的 .scss 檔名及路徑來修改，引入後即可使用 import "./index.scss"

忘就忘了 只能繼續記.. 1. react-router-dom 安裝 2. 路由基本使用 3. <Switch> 用此來選擇正確地點 1. react-router-dom 安裝 移動至 react 專案，在其目錄下安裝 cd my-app npm react-router-dom (or yarn add react-router-dom) 2. 路由基本使用 引入 react-router-dom、網頁 元件 import { BrowserRouter, Route } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; 把路由語法寫上基本上就能使用 <BrowserRouter> <Route path="/about/home"> <Home /> </Route> <Route path="/about"> <About /> </Route> </BrowserRouter> 如果不知道現在在操作甚麼的話.. 請點此參考... 執行結果如下，但也可以看出問題，所以必須搭配 <Switch> 3. <Switch> 用此來選擇正確地點 引入 <Switch> 元件 import { BrowserRouter, Route, Switch } from 'react-router-dom'; <Swicth> 寫上去即完成 <BrowserRouter> <Switch> <Route path="/about/home"> <Home /> </Route> <Route path="/about...

 這.. 建立一次後.. 就是一直 coding.. 是我的話.. 不會記得... 1. 下指令建專案 (基本上這樣就可以了..) 2. 刪除不需要之檔案 3. 建立基本結構 (yijay 常用之結構..) 4. 測試專案 1. 下指令建專案 要先安裝 Node (10.16↑) 環境 及 npm (5.6↑) 套件管理器 在指定的資料夾下以下指令：npx create-react-app my-app 下完即開始安裝 安裝完成 移動到該資料夾：cd my-app 執行程式：yarn start (如果僅裝 npm，那請下 npm start 來執行) 以下畫面即完成安裝 2. 刪除不需要之檔案 有些東西未來有可能還是會用到，但 yijay 還很新.. src 資料夾的東西刪了很多，保留 index.js 即可 修改 index.js，理論上執行畫面就不會報錯了 3. 建立基本結構 此結構，因人而異，因公司而異，沒有一定 (押韻!!) components：各頁面之元件 global：常數、小工具等共用之程式 pages：各頁面 styles：css 檔 4. 測試專案 在 pages/home/index.js coding 在 src/index.js 把 home 引入進來 測試成功.. 感動 :))

記錄一下.. 面試或工作、 前後端溝通 上 (一般 HTML 或 React、Node.js) 都常用到.. 我個人是比較喜歡用 axios ~ 股票 API (JSON 格式)： https://www.twse.com.tw/exchangeReport/STOCK_DAY?response=json&date=20210702&stockNo=2330 會看到這樣的資料 (json) 如果以上不能用，可以使用這位大哥的 API (text 格式)：https://script.google.com/macros/s/AKfycbw5PnzwybI_VoZaHz65TpA5DYuLkxIF-HUGjJ6jRTOje0E6bVo/exec?name=${name}&age=${age} 會看到這樣的資料 (text) 程式撈取結果大概會長這樣 fetch： 1. promise based (可改為 async/await) 2. HTML5 API let btn = document.querySelector('.btn'); btn.addEventListener('click', () => { fetch('https://www.twse.com.tw/exchangeReport/STOCK_DAY?response=json&date=20210702&stockNo=2330', { method: 'GET', }) .then((response) => { return response.json(); }) .then((result) => { console.log(result); }); }); ajax： 1. xhr based 2. 須引用 jQuery $('.btn').on('click', () => { $.ajax({ ...

 記錄一下.. 面試也常問..