## 前言 本篇要介紹的是如何在react設定變數和Hook，由於最近在玩AI，所以利用AI產生了本篇文章，看看效果如何。 ## 介紹 React Hooks 是 React 16.8 引入的一個功能，讓你在不編寫 class 的情況下使用 state 和其他 React 特性。`useState` 和 `useEffect` 是兩個最常用的 Hooks。 ## useState `useState` 是一個 Hook，它允許你在函數組件中添加 state。它返回一個包含當前 state 和更新 state 的函數的數組。 ### 使用方法 useState ```javascript import React, { useState } from 'react'; const Example = () => { // 宣告一個新的 state 變量，叫做 "count" const [count, setCount] = useState(0); return ( <div> <p>你點擊了 {count} 次</p> <button onClick={() => setCount(count + 1)}> 點擊我 </button> </div> ); }; ``` ### 詳細說明 useState - **初始化 state**：`useState` 的參數是 state 的初始值。在這個例子中，`count` 的初始值是 `0`。 - **讀取 state**：你可以直接使用 `count` 來讀取當前的 state 值。 - **更新 state**：使用 `setCount` 函數來更新 state。每次調用 `setCount`，React 都會重新渲染組件並顯示最新的 state 值。 ## useEffect `useEffect` 是一個 Hook，它允許你在函數組件中執行副作用操作。副作用操作包括數據獲取、訂閱、手動更改 DOM 等。 ### 使用方法 useEffect ```javascript import React, { useState, useEffect } from 'react'; const Example = () => { const [count, setCount] = useState(0); // 相當於 componentDidMount 和 componentDidUpdate: useEffect(() => { // 使用瀏覽器 API 更新文檔標題 document.title = `你點擊了 ${count} 次`; }); return ( <div> <p>你點擊了 {count} 次</p> <button onClick={() => setCount(count + 1)}> 點擊我 </button> </div> ); }; ``` ### 詳細說明 useEffect - **執行副作用**：`useEffect` 接受一個函數作為參數，這個函數會在組件渲染後執行。每次渲染後，`useEffect` 都會執行這個函數。 - **清理副作用**：如果你的副作用需要清理（例如訂閱或計時器），可以在 `useEffect` 函數中返回一個清理函數。 ```javascript useEffect(() => { const timer = setInterval(() => { console.log('計時器運行中'); }, 1000); // 清理計時器 return () => clearInterval(timer); }, []); ``` - **依賴陣列**：你可以傳遞一個依賴陣列作為 `useEffect` 的第二個參數，只有當依賴陣列中的值發生變化時，`useEffect` 才會執行。 ```javascript useEffect(() => { document.title = `你點擊了 ${count} 次`; }, [count]); // 只有當 count 改變時才會重新執行 ``` ## 最後 就上述來看，使用AI來產生教學文章的效果還是不錯的，但這裡我要要提醒一下，雖然AI可以幫助我們省去收尋和創造文章的時間，但說到底還是要自身學會後這項技術才真正屬於你。

## 前言 上篇已經建立好專案了，本篇會教你常用的**html**和**css**，畢竟前端的基本功就是切版。 ## 修改tsx和css <font color="red">p.s無論是刪除或者是修改，在改完後記得儲存 ctrl + s，這樣你的畫面才會跟著改變</font> 1. 首先把 `index.css` 和 `App.css` 裡的東西全部刪除。 2. 開啟 `index.css`，將以下css加入: ```css /*可以讓元素的 width 和 height 包含內邊距和邊框，方便設計*/ *, *::before, *::after { box-sizing: border-box; } ``` 3. 開啟 `App.tsx`，將綠框和紅框的部分刪除，如下圖:  4. 接著你會得到下圖，紅框的部分就是**React**框架中**html**的部分:  ## html 簡單來說html是呈現資料(文字)、圖片、影片等等的地方。 修改 `App.tsx`: ```tsx import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); return ( <> <div>Hello World!</div> <div>Hello World!</div> </> ); } export default App; ``` 開啟[localhost:5173/](http://localhost:5173)，你就會看到我們上面加入的`Hello World!`，如圖:  ## className 在html中的class，在react裡會寫做className，甚麼是className呢? 就是給你html裡的元素一個類別，讓你的css可以根據各個類別的名稱去做設定，我們來給程式碼設個className，如下: ```tsx import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); return ( <> <div className="item1">Hello World!</div> <div className="item2">Hello World!</div> </> ); } export default App; ``` ## css css就是用來設定html內元素的字體顏色、大小、背景顏色、邊框等等，下面會介紹一些常用的css並解釋其用途。 1. **color**: 文字的顏色。 2. **font-size**: 文字的大小。 3. **font-weight**: 文字的粗度。 4. **padding**: 元素內的間距。 5. **margin**: 元素外的間距。 6. **background-color**: 背景顏色。 7. **border**: 邊框。 8. **border-radius**: 圓角。 9. **width**: 元素的寬度。 10. **height**: 元素的高度。 11. **flex**: 排版。 接著讓我們嘗試一下，修改 `App.css`: ### color 和 font size 和 font weight ```css /*沒有. 就是針對元素去做設置*/ div { font-weight: 600; } /*有. 就是針對該className去做設置*/ .item1 { color: red; font-size: 24px; } .item2 { color: blue; font-size: 16px; } ``` 會得到下圖:  ### padding 和 margin 和 background color padding、margin這兩個有很多種寫法，這邊以padding來舉例: 1. `padding: 10px;`，這樣代表上下左右內間距都為10px。 2. `padding: 10px 0;`，第一個數表示上下，第二個數表示左右。 3. `padding: 0 10px 0;`，第一個數表示上，第二個數表示左右，第三個數表示下。 4. `padding: 10px 0 10px 0;`，這四個數分別代表上、右、下、左。 5. `padding-{方向}: 10px;`: 也可以單獨針對所需要的方向來做設置。 接著修改 `App.css` 試試看，下面兩種寫法: ```css .item1 { padding-bottom: 10px; } ``` ```css .item1 { margin-bottom: 10px; } ``` 會發現無論是哪種程式碼，乍看之下都會一樣，如下圖:  這時候我們將 `.item1` 加上background-color，這樣就可以很清楚的知道padding、margin的差別了，如下: ```css .item1 { padding-bottom: 10px; background-color: yellow; } ```  ```css .item1 { margin-bottom: 10px; background-color: yellow; } ```  ### border 和 border-radius 和 width 和 height 馬上嘗試一下，修改 `App.css`: ```css .item1 { width: 300px; height: 80px; border-radius: 8px; border: 1px solid red; } .item2 { width: 150px; height: 150px; border-radius: 50%; border: 1px solid blue; } ``` 這裡看一下 `.item2` 只要width、height相等並讓 `border-radius: 50%` 這樣就會得到一個圓了，如圖:  ### flex 這是用來布局版面的常用的有: 1. `display: flex;`: 賦予該元素flex屬性。 2. `flex-direction`: 排版方向可以設置為row(橫的)或是column(直的)。 3. `justify-content`: 以排版方向畫一條線當作主軸，並以主軸為基準來進行排版，如下圖:  4. `align-items`: 以主軸的90度來畫一條線當作交錯軸，並以交錯軸為基準來進行排版，如下圖:  讓我們實際試一下，修改 `App.css`: ```css .item1 { width: 300px; height: 80px; border-radius: 8px; border: 1px solid red; display: flex; flex-direction: column; align-items: end; justify-content: flex-end; } .item2 { width: 150px; height: 150px; border-radius: 50%; border: 1px solid blue; display: flex; flex-direction: row; align-items: center; justify-content: center; } ``` 就可以得到下圖:  ## 最後 今天的介紹就到這裡，html、css在這篇文章中只是稍微帶過而已，讀者可以上網搜尋專門在教html和css的文章，下次見。

## 前言 最近有一個朋友想加入前端的行列，但他完全沒有接觸過程式(HTML、CSS 都不懂的那種)。所以我想做一個麻瓜都能懂得React系列，此系列會盡量以最詳細的方式來做介紹，其中會包含HTML、CSS、Typescript等等。 ## 環境建置 首先我們需要下載兩樣東西: 1. [Nodejs](https://nodejs.org/en)，打開連結後點擊紅框區域下載，並安裝。  2. [VsCode](https://code.visualstudio.com/)，打開連結後點擊紅框區域下載，並安裝。  兩者在安裝過程中不用修改任何東西一直點 **Next**(**下一步**) 即可。 ## 確認Nodsjs是否安裝成功 安裝完成後，讓我們確定**Nodejs**已經安裝成功，打開命令提示字元(CMD)並輸入: 如何開啟命令提示字元(CMD): **Windows + Q** 並輸入**命令提示字元**或**CMD** ```console node -v ``` <font color="red">輸入完</font> `node -v` <font color="red">後請按Enter</font> 出現和下圖一樣表示你已經安裝成功(版本號不同沒有關係)。  ## 創建React專案 打開命令提示字元(CMD)並輸入: ```console npm create vite@latest my-react-app --template react ``` `my-react-app` 是你專案的名稱可以自行定義，我的專案名是 `react-demo`。 選擇React，如下圖:  接著選擇Typescript，如下圖:  ## 使用VsCode開啟專案 開啟剛剛下載的**VsCode**，依照下圖開啟專案資料夾，資料夾路徑通常為(C:\Users\電腦的使用者名稱\專案名稱):  看到下圖表示專案已開啟  ## 下載專案所需套件 接著我們需要下載該專案所需的套件，首先按照下圖新增一個**Terminal**:  接著輸入: ```console npm i ``` 然後等待一些時間，出現和紅框部分一樣後表示下載成功  ## 讓該專案在網頁上呈現 要讓專案出現在網頁上，請在**Terminal**輸入: ```console npm run dev ``` 等待一些時間，出現和紅框部分一樣後表示成功  打開網址: 預設網址通常為[localhost:5173/](http://localhost:5173)，如下圖  ## 專案目錄結構  這裡簡單介紹一下目錄結構，看不懂沒關係之後有使用再回來看即可: 1. **資料夾node_modules**: 上面透過`npm i`下載後的套件都會放在這裡。 2. **資料夾public**: 用來放靜態檔案的地方，像是網站的圖標(icon)等等。 3. **資料夾assets**: 用來存放圖片、語音、影片等等。 4. **.css**: 以此為結尾的檔案是用來寫**css**的地方。 5. **.tsx**: 以此為結尾的檔案是用來寫**Typescript**和**Html**的地方。 6. **package.json**: 管理該專案所需使用到的套件以及配置一些選項的地方。 7. **vite.config.ts**: 定義和調整**Vite**構建工具的地方。 ## 最後 這樣就可以準備開始你的前端之旅了，下篇會學到如何更改 `localhost:5173` 的頁面，下次見。

## 前言 最近想要紀錄一下自己的開銷但又懶得打字，就想到透過iphone內建的**備忘錄**和**捷徑**功能應該可以達到我要的效果。 完成後發現在iphone上運行正常，但在apple watch上卻無法將文字寫入備忘錄也沒有任何的提示，不過身為一個工程師怎麼能被區區捷徑給難倒，於是就有了這篇文章的誕生。 ## 新增備忘錄 首先打開iphone `開啟備忘錄 -> 新增備忘錄並輸入"記帳"`。 <img src="/image/general-post-img/apple-watch-1.png" width="400"> <br> ## 製作捷徑 打開iphone `開啟捷徑 -> 新增捷徑，然後取名為"記帳"`，並依照下圖新增動作 <img src="/image/general-post-img/apple-watch-2.png" alt="Apple Watch聽寫備忘錄捷徑製作" width="400"> <br> 此處解釋一下各個動作: 1. **聽寫文字**: 選擇你的語言和暫停之後。 2. **文字**: 將第一步的 `聽寫文字` 放入這裡，且可以依需求加上其他資訊，這裡我是加上**換行**和**當前時間**。 3. **加入到變數**: 若不知道在哪，可以根據以下動作來找到 `搜尋動作 -> 工序指令 -> 加入到變數`，將第二步的 `文字` 放入並給它取一個名稱為 `text`。 4. **附加到備忘錄**: 將剛剛取的 `text` 附加到我們一開始創建的 `記帳 備忘錄` 裡。 ## iphone上執行 完成步驟1和步驟2後，接著要來執行看看效果，在iphone上有兩種方法可以執行捷徑: 1. 直接執行捷徑，然後說出你要寫入至備忘錄的文字即可。 2. 對iphone說出 `嘿 siri 記帳`，iphone就會自動幫你執行捷徑了，然後說出你要寫入至備忘錄的文字即可。 ## 在apple watch上執行 若想要apple wacth上執行，請先做完以下兩個步驟: 1. 打開 `設定 -> 搜尋捷徑 -> 開啟"iCloud同步"`。 2. 打開 `捷徑 -> 長案剛創建的記帳捷徑 -> 點選詳細資訊 -> 開啟"顯示在Apple Watch上"`，如下圖 <img src="/image/general-post-img/apple-watch-3.png" alt="Apple Watch加入捷徑" width="400"> <br> <img src="/image/general-post-img/apple-watch-6.png" alt="Apple Watch加入捷徑" width="400"> <br> 等個1 ~ 2分鐘就可以在apple watch上看到該捷徑了，一樣有兩總種方法可以執行: 1. 將捷徑加入到**桌面的複雜功能**手動執行 2. 也可以像是iphone一樣透過 `嘿 siri 記帳` 來執行。 ## 成果 可以看到效果非常不錯~ <img src="/image/general-post-img/apple-watch-4.png" alt="Apple Watch聽寫備忘錄展示" width="400"> <br> <img src="/image/general-post-img/apple-watch-5.png" alt="Apple Watch聽寫備忘錄展示" width="400"> <br> ## 最後 以上就是讓apple watch透過捷徑執行聽寫備忘錄的方法，若有問題可以在網頁右下角 `+` 內的留言板和我聯絡，文章歡迎引用請標明出處即可，下次見~