前端框架 on EricChung的程式勇者村

新手第十五步：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 的世界了嗎？下一篇見！

新手第六步：Vue.js 入門　前端框架到底在解決什麼問題？

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

上一篇我們用原生 JavaScript 做了計數器。雖然可以動，但你有沒有發現——當功能一多，程式碼就開始變得雜亂？

這正是前端框架要解決的問題。今天我們來聊聊目前最適合新手入門的框架：Vue.js。

1. 為什麼要用框架？

先想像一個場景：你要做一個購物車頁面，商品數量改了，頁面上的「小計」、「總計」、「結帳按鈕顯示金額」都要跟著更新。

用原生 JS 你要：

抓到「小計」元素，修改它
抓到「總計」元素，修改它
抓到「按鈕」元素，修改它
下次改需求還要重來一遍…

用 Vue.js 你只需要： 修改一個變數，頁面上所有相關顯示自動同步更新。

這個核心概念叫做**「響應式（Reactivity）」**——數據變了，畫面自動跟著變。

2. Vue.js 是什麼？

Vue.js 是一個用 JavaScript 寫的前端框架，由前 Google 工程師尤雨溪（Evan You）在 2014 年創建。

它有幾個讓新手特別喜歡的特點：

學習曲線平緩：和 React 相比，Vue 對新手更友善，語法更接近原生 HTML/JS
文件超完整：官方中文文件寫得非常好，遇到問題查文件通常就能解決
漸進式引入：可以只在部分頁面使用 Vue，不用整個專案重寫

3. 快速體驗 Vue：不需要安裝任何東西

最快的方式是直接用 CDN 引入 Vue，就像引入一個 JS 檔案一樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<!DOCTYPE html>
<html>
<head>
 <title>我的 Vue 練習</title>
</head>
<body>
 <div id="app">
 <h1>{{ message }}</h1>
 <button @click="changeMessage">點我換訊息</button>
 </div>

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
 const { createApp, ref } = Vue;

 createApp({
 setup() {
 const message = ref("你好，Vue！");

 function changeMessage() {
 message.value = "訊息被改掉了！";
 }

 return { message, changeMessage };
 }
 }).mount("#app");
 </script>
</body>
</html>

存檔，打開瀏覽器，你會看到標題寫著「你好，Vue！」，點按鈕後自動變成「訊息被改掉了！」——不需要手動 getElementById，Vue 自動幫你搞定！

4. Vue 的核心概念

模板語法：`{{ }}`

雙大括號是 Vue 的「插值語法」，把變數的值直接顯示在 HTML 裡：

1

<p>你好，{{ name }}！你今年 {{ age }} 歲。</p>

只要 name 或 age 變數的值改變，頁面會自動更新，不需要任何額外操作。

響應式變數：`ref()`

在 Vue 3 裡，用 ref() 建立會「被追蹤」的響應式變數：

1
2
3


const count = ref(0); // 數字
const name = ref("小明"); // 文字
const show = ref(true); // 布林值

修改時要用 .value：

1

count.value = count.value + 1;

但在 HTML 模板裡用 {{ count }} 就好，Vue 自動處理 .value。

事件綁定：`@click`

Vue 用 @ 符號取代原本的 addEventListener，寫起來清爽很多：

1
2
3
4
5
6


<!-- 原生 JS -->
<button id="btn">點我</button>
<script> document.getElementById("btn").addEventListener("click", doSomething) </script>

<!-- Vue 的寫法 -->
<button @click="doSomething">點我</button>

屬性綁定：`v-bind` 或 `:`

想把 JS 變數的值套用到 HTML 屬性上，用 : 綁定：

1
2


<img :src="imageUrl" :alt="imageAlt">
<a :href="linkUrl">點我</a>

條件渲染：`v-if`

根據條件決定要不要顯示某個元素：

1
2


<p v-if="isLoggedIn">歡迎回來！</p>
<p v-else>請先登入。</p>

列表渲染：`v-for`

用來把陣列資料一筆一筆顯示出來：

1
2
3


<ul>
 <li v-for="item in fruits" :key="item">{{ item }}</li>
</ul>

1

const fruits = ref(["蘋果", "香蕉", "橘子"]);

5. 給新手的實戰練習：用 Vue 重做計數器

還記得上一篇用原生 JS 做的計數器嗎？現在用 Vue 來做同樣的功能，感受一下差異：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<!DOCTYPE html>
<html>
<head>
 <title>Vue 計數器</title>
 <style>
 body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #f0f4f8;
 font-family: Arial, sans-serif;
 }
 .counter { text-align: center; }
 #count-display { font-size: 80px; color: #2c3e50; margin: 0; }
 button {
 font-size: 18px;
 padding: 10px 30px;
 margin: 10px;
 cursor: pointer;
 border: none;
 border-radius: 8px;
 background-color: #3498db;
 color: white;
 }
 button:hover { background-color: #2980b9; }
 </style>
</head>
<body>
 <div id="app" class="counter">
 <p id="count-display">{{ count }}</p>
 <button @click="count++">＋ 加一</button>
 <button @click="count = 0">重置</button>
 </div>

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
 const { createApp, ref } = Vue;

 createApp({
 setup() {
 const count = ref(0);
 return { count };
 }
 }).mount("#app");
 </script>
</body>
</html>

注意到了嗎？JavaScript 的部分從 10 行縮短到 3 行。Vue 幫你處理了所有「抓元素、更新畫面」的瑣事，你只需要專注在「資料邏輯」本身。

6. Vue vs 原生 JS：什麼時候用哪個？

情境	建議
簡單的互動（一個按鈕、一個動畫）	原生 JS 就夠了
需要管理很多資料狀態的頁面	用 Vue
單頁應用程式（SPA）	強烈建議用 Vue
學習基礎概念	先學原生 JS，再學 Vue

結語：框架是工具，不是魔法

Vue.js 讓你寫更少的程式碼、更快做出功能，但它的底層還是 JavaScript。所以上一篇學的變數、函式、DOM 概念，在 Vue 裡全都用得到。

框架只是幫你把重複的工作自動化，你的 JS 基礎夠紮實，框架學起來就會快很多。

接下來你可以做什麼？ 有了 Vue 的基礎後，下一篇我們要學 Git 版本控制——這是所有工程師都必備的技能，讓你的程式碼永遠有「後悔藥」可以吃，也是團隊協作的核心工具。

準備好學工程師的必備神器了嗎？下一篇見！