React on EricChung的程式勇者村

json-server 是什麼？前端開發很常用的假 API 工具介紹

Sat, 23 May 2026 20:05:00 +0800

前端開發最常遇到的問題之一，就是畫面想先做，但 API 還沒完成。這時候，如果還要自己手刻一個後端，只是為了讓前端有資料可以串，通常很浪費時間。json-server 就是在解決這個問題。

json-server 的 npm 頁面介紹的是一個非常實用的工具：你只要準備一份 JSON 資料，它就能快速幫你產生一組可用的 REST API。對前端工程師來說，這代表你不用等後端，也能先把列表、表單、編輯、刪除這些功能做起來。

這個網站在做什麼？

這個網站其實是 npm 上的套件介紹頁。它的用途不是單純下載，而是讓開發者快速了解：

這個套件是做什麼的
要怎麼安裝
怎麼啟動
支援哪些功能
套件目前版本和使用狀況

以 json-server 這頁來看，頁面上可以直接看到安裝指令：

1

npm i json-server

也可以看到最基本的啟動方式：

1

npx json-server db.json

這兩個資訊就已經很夠你快速上手。

json-server 的核心功能是什麼？

它最核心的功能，就是把一個 JSON 檔案變成一組 REST API。

例如你有一個 db.json：

1
2
3
4
5
6


{
 "posts": [
 { "id": 1, "title": "Hello" },
 { "id": 2, "title": "World" }
 ]
}

啟動 json-server 後，就可以得到類似下面的 API：

1
2
3
4
5
6


GET /posts
GET /posts/1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

這代表什麼？代表你前端原本需要後端才能做的 CRUD 流程，現在可以先自己模擬出來。

為什麼前端工程師會常用它？

原因很實際，因為它真的省時間。

第一，它可以讓前端先開發，不用卡在「API 還沒好」。第二，它很適合做 demo、作品集、教學範例。第三，它能讓你提早驗證資料格式和畫面流程。第四，它的使用門檻低，不需要先寫很多後端程式。

如果你是 React 開發者，這種工具特別方便，因為你可以直接拿 fetch 或 axios 去串它，流程和串正式 API 很接近。

這個 npm 頁面還透露哪些資訊？

根據我查看頁面時的內容，截至 2026-05-23，可以看到幾個重點：

版本是 1.0.0-beta.15
每週下載量約 332,131
License 是 MIT
GitHub repository 是 typicode/json-server
有 412 個 dependents
累積 165 個版本

這些資訊代表它不是冷門工具，而是真的有不少開發者在使用。不過也要注意，頁面顯示的版本仍然是 beta，如果你要放進正式團隊開發流程，最好先確認版本相容性和使用情境。

它適合用在哪些情境？

json-server 很適合這幾種情況：

前端畫面先做，但後端還沒完成
想快速做一個假資料 API
想練習 CRUD 串接
要做作品集或 demo
教學時想快速展示 API 行為

但它比較不適合拿來當真正的正式後端。因為它的主要目的是開發輔助，不是完整商業系統的後端解法。

總結

如果你把 json-server 想成「前端開發時的假後端工具」，這個理解基本上就是對的。它最大的價值不是功能多複雜，而是可以讓你非常快地把資料流跑起來。對前端來說，這件事很重要，因為很多畫面問題、互動問題、狀態管理問題，都要真的有 API 可以串時才會看得清楚。

所以，如果你常常碰到「前端要先做，但 API 還沒來」這種情況，那 json-server 是非常值得認識的一個工具。

新手第十五步：React 入門　前端最熱門的框架，到底在紅什麼？

Fri, 17 Apr 2026 00:00:00 +0000

你學完 HTML、CSS、JavaScript 之後，應該已經可以做出會動的網頁了。

但只要功能一變多，很快就會開始出現這些問題：

一個資料改了，很多地方都要手動更新
按鈕事件越綁越多，程式碼開始打結
頁面狀態一多，很難知道現在到底是哪裡出了問題
同樣的 UI 要重複寫很多次

這就是前端框架存在的原因。
而在所有前端框架裡，React 幾乎是目前最熱門、也最常出現在職缺上的名字。

1. React 是什麼？

React 是由 Meta（Facebook） 開發的前端函式庫，用來建立使用者介面（UI）。

你可以把它理解成一套更有組織的方式，讓你去寫：

畫面怎麼長
資料怎麼變
當資料改變時，畫面怎麼自動更新

React 最有名的地方，不是它「能做動畫」或「能發 API」，而是它把前端畫面拆得更清楚、更容易維護。

簡單說：

React 幫你把「資料」和「畫面」的關係整理好。

2. 為什麼前端要用 React？

先想像一個購物車頁面。

當你把商品數量從 1 改成 2 的時候，頁面上很多地方都要一起改：

商品小計要更新
總金額要更新
導覽列上的購物車數量要更新
如果超過免運門檻，提示訊息也要更新

如果你用原生 JavaScript 手動處理，通常會變成：

先抓商品數量的 DOM
再抓總金額的 DOM
再抓購物車 icon 的 DOM
每改一次資料，就手動一個一個改畫面

這樣在小專案還可以，但功能一多就會變得很痛苦。

React 的想法不一樣：

你不用一直想「我要改哪個 DOM」，你只要想：

現在資料是什麼
這份資料應該長出什麼畫面

當資料改變時，React 會幫你把該更新的地方更新掉。

這種寫法叫做 宣告式（Declarative）。

3. React 在解決什麼問題？

React 主要在解決 3 件事：

1. 畫面重複利用

一個按鈕、一張商品卡片、一個導覽列，常常會在網站很多地方重複出現。
React 可以把它們拆成元件（Component），寫一次、重複使用很多次。

2. 資料和畫面同步

當資料變了，畫面要跟著變。
React 幫你把這件事變得很自然，不需要你一直自己手動操作 DOM。

3. 大型專案的可維護性

當頁面越來越多、互動越來越複雜時，React 的元件化寫法會比一大包原生 JS 更容易整理。

4. React 的 3 個核心觀念

如果你剛接觸 React，先搞懂這三個觀念就夠了。

元件（Component）

React 把 UI 當成一塊一塊的小積木。

例如一個網站可以拆成：

Header
Sidebar
ProductCard
Button
Footer

每一塊都可以是一個 React 元件。

1
2
3


function Welcome() {
 return <h1>歡迎來到我的網站</h1>;
}

這就是最基本的 React 元件。它本質上就是一個函式，回傳一段 UI。

Props

元件之間要傳資料時，會用到 props。

1
2
3


function Welcome(props) {
 return <h1>你好，{props.name}</h1>;
}

1

<Welcome name="Eric" />

這樣畫面就會顯示：你好，Eric

你可以把 props 想成「父元件傳給子元件的參數」。

State

如果 props 是外面傳進來的資料，那 state 就是元件自己管理的資料。

最常見的例子就是計數器：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { useState } from "react";

function Counter() {
 const [count, setCount] = useState(0);

 return (
 <button onClick={() => setCount(count + 1)}>
 目前次數：{count}
 </button>
 );
}

當 count 改變時，React 會自動重新 render，畫面上的數字也會跟著更新。

5. 一個最小 React 範例

來看一個最簡單、最能感受到 React 特色的例子。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import { useState } from "react";

function App() {
 const [message, setMessage] = useState("你好，React！");

 function changeMessage() {
 setMessage("訊息被改掉了！");
 }

 return (
 <div>
 <h1>{message}</h1>
 <button onClick={changeMessage}>點我換訊息</button>
 </div>
 );
}

export default App;

這段做了什麼？

用 useState 建立一個狀態 message
畫面先顯示 你好，React！
點按鈕後呼叫 setMessage
React 發現 state 變了，就重新更新畫面

這裡最重要的地方是：

你完全沒有手動去抓 DOM，也沒有自己寫 document.getElementById()。
你只是在改資料，React 幫你把畫面同步更新。

這就是 React 最核心的爽感。

6. JSX 是什麼？為什麼看起來像 HTML？

React 程式碼裡最讓新手困惑的地方，通常就是這個：

1

return <h1>Hello React</h1>;

這看起來像 HTML，但它其實不是純 HTML，而是 JSX。

JSX 是一種讓你可以在 JavaScript 裡面寫類似 HTML 語法的寫法。
它的目的是讓 UI 結構更直覺、更容易閱讀。

例如：

1
2
3


const name = "Eric";

return <h1>你好，{name}</h1>;

這裡的 {name} 代表「把 JavaScript 變數插進畫面裡」。

你可以把 JSX 想成：

用比較好讀的方式去描述 UI 長什麼樣子。

7. React vs 原生 JavaScript：差在哪？

這個問題很多新手都會問，而且問得很好。

原生 JavaScript 的做法

你通常會：

先抓 DOM
幫按鈕綁事件
在事件裡手動更新文字
有更多區塊時，再一個一個更新

這樣的好處是：

沒有額外框架
很直接
很適合做小功能

但缺點是：

畫面邏輯和 DOM 操作很容易混在一起
當功能變多，維護成本會快速上升

React 的做法

React 比較像是：

先定義資料
再定義資料對應的畫面
當資料改變時，React 幫你更新 UI

它的優點是：

更適合大型專案
元件可以重複使用
狀態管理比較清楚

所以結論不是「React 取代原生 JS」，而是：

原生 JS 是基礎，React 是讓大型 UI 開發更有效率的工具。

8. React vs Vue：新手該怎麼看？

你前面已經看過 Vue 文章了，那 React 和 Vue 差在哪？

先講結論：

Vue 對新手通常比較友善
React 在職場上更常見，生態系也非常大

Vue 的感覺

Vue 的模板語法比較接近 HTML，很多新手第一次看會覺得比較自然。

例如 Vue 會寫：

1

<button @click="count++">點我</button>

對剛接觸前端框架的人來說，這種寫法通常比較好懂。

React 的感覺

React 會把 UI 和邏輯更緊密地寫在一起，用 JSX 來組合。

1

<button onClick={() => setCount(count + 1)}>點我</button>

一開始你可能會覺得 React 比較「像在寫 JavaScript」，門檻稍微高一點。
但也因為這樣，它在組合彈性和工程化上非常強。

那到底學哪個？

如果你是完全新手：

Vue 通常比較快上手

如果你考慮求職市場：

React 通常更值得優先投入

不過你不用把它想成二選一。
框架只是工具，重點還是你對 HTML、CSS、JavaScript 基礎有沒有真的懂。

9. 給新手的學習順序建議

如果你準備開始學 React，我建議順序是這樣：

先把 JavaScript 基礎打穩
學 React 元件、props、state
再學事件處理和列表渲染
接著學 useEffect
最後再碰 API 串接、路由、狀態管理

很多人卡住不是因為 React 太難，而是因為 JavaScript 基礎不夠穩，就直接跳進框架。

React 確實有學習曲線，但只要你知道它在解決什麼問題，很多概念會突然變清楚。

結語：React 紅不是沒有原因

React 之所以紅，不是因為它比較潮，而是因為它真的很適合拿來開發大型、互動複雜的前端介面。

它的核心思想其實不花俏：

把 UI 拆成元件
把資料和畫面關係整理清楚
讓資料改變時，畫面自動同步

只要你把這三件事理解了，React 就不會再只是「那個很紅的框架」，而是你手上很有用的工具。

接下來你可以做什麼？
下一篇我們可以直接接著寫 React useState 入門，因為 state 是 React 最核心、也最早一定會碰到的觀念。等你把 useState 和 useEffect 都打通之後，React 就會開始真正連起來。

準備好正式進入 React 的世界了嗎？下一篇見！

新手第十四步：React useEffect 入門　搞懂副作用，不再亂用！

Fri, 17 Apr 2026 00:00:00 +0000

很多 React 新手一看到 useEffect，第一反應都是：「這個看起來很強，我是不是什麼事情都可以丟進去？」

結果寫著寫著，就開始出現這些狀況：

頁面一直重複 re-render
API 被呼叫兩三次
明明只是想把名字組起來，卻還多寫一個 state
元件卸載後還在跑計時器，畫面越來越怪

useEffect 不是萬用工具，它是拿來處理「副作用」的。
只要你先搞懂這句話，後面大部分問題都會少很多。

1. `useEffect` 是什麼？

React 元件最主要的工作，是根據 state 和 props 去畫畫面。

但有些事情不是單純畫畫面就能完成，例如：

向後端抓資料
監聽視窗大小變化
設定 setInterval
手動改 document.title
訂閱或解除訂閱外部事件

這些事情都會影響元件外部，或需要和外部世界互動，這種行為就叫做 副作用（Side Effect）。

而 useEffect，就是 React 提供給你的「副作用處理區」。

1
2
3
4
5
6
7
8
9


import { useEffect } from "react";

function App() {
 useEffect(() => {
 console.log("元件渲染完成後執行");
 });

 return <h1>Hello React</h1>;
}

上面這段的意思是：React 先把畫面渲染出來，然後再執行 useEffect 裡面的程式。

2. 什麼時候該用 `useEffect`？

你可以先記一個最實用的判斷方式：

如果這件事跟「畫面外部」有關，就可能要用 useEffect。

例如下面這些情況，就是典型的 useEffect 使用時機。

抓 API 資料

1
2
3
4
5
6
7


useEffect(() => {
 fetch("/api/products")
 .then((res) => res.json())
 .then((data) => {
 console.log(data);
 });
}, []);

監聽事件

1
2
3
4
5
6
7


useEffect(() => {
 function handleResize() {
 console.log(window.innerWidth);
 }

 window.addEventListener("resize", handleResize);
}, []);

改變瀏覽器標題

1
2
3


useEffect(() => {
 document.title = "購物車頁面";
}, []);

這幾個例子有一個共同點：它們都不是單靠 JSX render 就能完成的事。

3. 什麼時候不該用 `useEffect`？

這才是新手最容易踩雷的地方。

如果某個值可以直接從現有資料算出來，那就不要再用 useEffect 多繞一圈。

錯誤示範：把可推導的值塞進 `useEffect`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { useEffect, useState } from "react";

function UserCard({ firstName, lastName }) {
 const [fullName, setFullName] = useState("");

 useEffect(() => {
 setFullName(firstName + " " + lastName);
 }, [firstName, lastName]);

 return <h2>{fullName}</h2>;
}

這段可以跑，但寫法不好，因為 fullName 明明可以直接算出來，沒必要多一份 state。

正確寫法：直接算

1
2
3
4
5


function UserCard({ firstName, lastName }) {
 const fullName = firstName + " " + lastName;

 return <h2>{fullName}</h2>;
}

這樣更簡單，也更不容易出 bug。

記住一句話：能在 render 階段直接算出來的東西，就不要丟進 useEffect。

4. 依賴陣列到底在控制什麼？

useEffect 的第二個參數，通常是大家最容易看不懂的地方：

1
2
3


useEffect(() => {
 // 做某些事情
}, []);

這個陣列叫做依賴陣列（dependency array），它在控制的是：

「哪些值改變時，這個 effect 要重新執行？」

1. 不寫依賴陣列

1
2
3


useEffect(() => {
 console.log("每次 render 都會執行");
});

只要元件重新 render，這段就會再跑一次。

2. 傳空陣列 `[]`

1
2
3


useEffect(() => {
 console.log("只在初次掛載時執行");
}, []);

通常用在：

初次載入資料
初次註冊事件
初始化某些外部設定

3. 傳入特定依賴 `[count]`

1
2
3


useEffect(() => {
 console.log("count 改變了");
}, [count]);

這表示只有 count 改變時，這個 effect 才會重新執行。

5. cleanup 是什麼？為什麼很重要？

有些副作用不是做完就算了，它還需要在適當時機清掉。

最常見的例子就是：

事件監聽
計時器
WebSocket 連線
訂閱外部資料

這時候就要用 return 回傳一個清理函式，也就是 cleanup。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


useEffect(() => {
 function handleResize() {
 console.log(window.innerWidth);
 }

 window.addEventListener("resize", handleResize);

 return () => {
 window.removeEventListener("resize", handleResize);
 };
}, []);

這段的意思是：

元件掛載時，註冊 resize 事件
元件卸載時，把事件監聽移除

如果你不做 cleanup，常見結果就是：

事件越綁越多
記憶體浪費
元件已經不在了，副作用卻還繼續跑

6. 給新手的實戰範例：切換網頁標題

先來看一個很簡單、但很適合理解 useEffect 的例子。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import { useEffect, useState } from "react";

function Counter() {
 const [count, setCount] = useState(0);

 useEffect(() => {
 document.title = `你點了 ${count} 次`;
 }, [count]);

 return (
 <div>
 <h2>目前次數：{count}</h2>
 <button onClick={() => setCount(count + 1)}>
 點我加一
 </button>
 </div>
 );
}

這段程式做了兩件事：

畫面上顯示 count
當 count 改變時，順便更新瀏覽器分頁標題

為什麼這裡適合用 useEffect？

因為 document.title 是React 畫面外部的東西。
React 可以控制 <h2> 裡顯示什麼，但瀏覽器標題不是 JSX 自己就會處理的，所以這種時候就該交給 useEffect。

7. 新手最常犯的 3 個錯誤

錯誤 1：把所有邏輯都塞進 `useEffect`

很多人一遇到資料變化，就直覺寫 useEffect。但其實很多值都可以直接 render 時計算，不需要繞遠路。

錯誤 2：依賴沒寫完整

如果 effect 裡用到了某個值，但依賴陣列沒放進去，就可能造成資料不同步，或拿到舊值。

錯誤 3：忘了 cleanup

特別是事件監聽和計時器，忘記清掉的後果通常不是立刻爆炸，而是過一段時間才出現怪問題，最難查。

8. 你可以先這樣記

如果你現在腦袋有點亂，先不用急著背細節，記住下面這個版本就夠用了：

useEffect 是拿來處理副作用的
能直接 render 算出來的值，不要用 useEffect
[] 代表只在初次執行
[value] 代表 value 改變時重新執行
有監聽、計時器、訂閱時，記得 cleanup

結語：先學會少用，才會真的用

很多新手學 useEffect 的第一個問題，是「它能做什麼？」
但更重要的問題其實是：「什麼時候不該用它？」

因為 useEffect 本身不難，難的是你要分得出來：

這是單純 render 邏輯
還是這真的是副作用

只要這條線分清楚，你的 React 程式碼就會乾淨很多，也比較不容易掉進無限 re-render 的坑裡。

接下來你可以做什麼？
下一篇如果你願意，我們可以接著寫 React useState 與 useEffect 的搭配實戰，用真正的 API 抓資料、載入中狀態、錯誤處理，一次把 React 最常見的流程串起來。

學會 useEffect 之後，你就開始真的在寫 React 了。