React 教學系列文 0- 為甚麼要學 React？React 和 Vue、原生 JS 的差別？

嗨～我是請網這邊走，我打算寫一系列的 React 教學文章，幫助新手學習現在這個最流行的前端框架，這是整個系列的第一篇，我會先簡單介紹一下 React，並回答一些我當初是新手的疑惑，例如，為甚麼要學 React？和原生 JS 的差別？和 Vue 的差別？希望可以快速幫你建立前端框架的基本背景，那就讓我們開始吧～！

React 簡介

React 是一個 Facebook 開源的 JavaScript 框架，主要用於構建用戶界面(UI)，是目前最流行的框架之一。也是必要的前端技能之一。

React 學習前，你應該具備的知識

在學習 React 前，要先確保你有這方面的知識，因為 React 是建立在這些知識上的前端框架，如果你是第一次接觸網頁的新手，可以先從 w3s 開始學習基礎知識～

• HTML/CSS: 理解網頁的基本結構和樣式
• JavaScript: 掌握 JS 的基礎語法和概念，如變數、函式、物件、陣列 … 等
• ES6: 熟悉 ES6 的新語法，如箭頭函式、解構等(非必需但建議)

為甚麼我們要學習 React？

接著讓我們從技術層面和現實層面來討論為甚麼要學 React。

以技術層面來說

在過去，使用原生 JavaScript 開發大型 web 應用是一件非常困難的事情，除了一堆商業、UI、功能的邏輯交雜在一起，我們還需樣管理成百上千個 DOM 元素、處理大量狀態、實現可重用 UI 組件或特效等等問題，很容易讓程式碼變得冗餘、難以維護。

而 React 前端框架的出現解決了這些痛點。它提出了一種全新的構建用戶界面 (UI) 的方式，也改變了前端開發的環境。

學習 React 並不是為了替代原生 JavaScript，而是為了在一定層面上簡化和提高大型應用的開發效率。而 React 的設計思想也能幫助我們構建優雅、高效、可擴展的前端應用，並且這些思想也能夠讓我們在軟體領域走的更深更遠。

以現實層面來說

因為 React 提高了前端的開發效率，越來越多公司拋棄 JQuery 並選擇 React，也因此豐富了 React 的生態系統，有龐大的開發者社群，提供很多封裝好的工具或函式庫、UI 庫，並也提供更多的工作機會。

也因此，不管是為了更快的開發還是找工作，或是培養更深度的程式設計思想，學習前端框架是必要的路程之一。

接著讓我們看看 React 和原生的 JS 差別。

React 和原生 JS 的差別

如同前面所說，使用原生 JavaScript 開發時，我們需要直接操作和管理 DOM 元素的增刪改查。這種編程模式會導致代碼冗長、難以維護，尤其是在大型項目中更是如此。

而 React 和原生 JS 最大的差別，也就是它的解決方法，為以下幾點：

1. React 會幫助我們操作 DOM，我們只需要專注在 UI 邏輯，這不但增加開發效率，也增加程式執行的效率。
2. 組件化，每一個組件都是一個檔案，不再像以往一整個頁面都寫在同一個 HTML 檔案，讓我們更好管理 JS 和 CSS。
3. 單向數據流，可以想像把資料當作河水，它只能從上游(資料來源)流向下游(使用者介面)，不能反向回去或橫流叉流，以此來更好管控資料。

以上三點是我認為 React 和原生 JS 很大不同的地方，也是新手常常卡住的地方。

React 和 Vue 的差別

React 和 Vue.js 都是流行的前端框架，在很多方面有相似之處，這裡我不以技術層面來談，而是以新手學習的角度來說說 React 和 Vue 的差別，

學習曲線

Vue.js 的學習曲線相對平緩。它的開發模式比較貼近原生 HTML、CSS、JS 的風格，上手相對簡單。即使是完全沒接觸過任何框架的新手，也能夠在短時間內學會 Vue 的基本操作。

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script setup>
// Your JS
</script>

<style>
// Your CSS
</style>

可以看出 Vue 很像原來的 HTML + CSS + JS

• 而 React 則需要學習一些新概念，而且開發的方式和原生 HTML、CSS、JS 有一點不台一樣，新手會比較不習慣，所以 React 的學習曲線會陡峭一些。尤其是涉及到 React Hooks、Context API 等高階特性時，理解起來會更有挑戰性。當然 Vue 也有相對的高階特性，但因為 Vue 的框架風格，讓新手比較容易學習。

import "./yourCss.css";

function HelloReact() {
  // Your JS

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

React 的寫法對於新手來說會比較不習慣，但學會了 React，學 Vue 就很快了，反過來先學 Vue，則會很不容易上手 React

框架風格

• Vue 封裝了很多語法，例如 v-if、v-on …，這些語法讓新手也能很快上手，但缺點就是你要學很多 Vue 自帶的語法 (不過我是覺得不算難學啦)。並且和上面所說的一樣，Vue 寫起來就像原生 HTML + JS。
• React 則更側重於函數，組件主要以函數的形式編寫，函數返回的是 HTML，對於新手來說不太值觀。它提倡 immutable data (不可變數據) 以及基於狀態來驅動 UI 更新的編程範式，需要開發者習慣一種新的編程思維。

生態系統

React 和 Vue 都有龐大且成熟的生態系統，只不過 React 出現的更早，也因此更完整且成熟，基本上大部分的需求都能找到別人寫好的函式庫或工具來解決。

網路資源

• React 由於使用者基數龐大，網路上的教學資源、技術文章、解決方案就相對更加豐富。不過大部分都是國外文章、資源。
• Vue.js 則是中文學習資源雖然較多，尤其是中國出了非常多 Vue 的教學影片。

但比較下來，我更喜歡國外創作者的 React 教學資源，有非常多優良的教學，也有很完整，從 0 到 1 帶你建立一個能夠收費、功能完整的 app 網站，可以學到非常多的技術。

工作機會

在台灣，React 和 Vue 的工作機會差不多，但國外基本上是 React，而中國則更偏好 Vue。

總的來說，Vue 更好學習、開發體驗較好，但很多自帶的封裝語法；React 資源豐富，核心思想值得學習，且寫起來就是在寫 JS 函數，會讓你更熟悉 JS。

藉由這個比較，我們來討論新手究竟要先學哪個框架。

新手該先學哪個前端框架

這個問題一直以來都有很多前端新手在詢問，基本上問題的答案要根據你的狀況來決定。我會從幾個層面來幫助你決定要先學哪個框架。

你已經有心儀的公司職缺

如果你已經有心儀的公司想要進入，那沒甚麼好說的，公司用甚麼技術就學什麼技術。

想學習框架並深度理解 JS

如果你有以下幾點特徵，

1. 你已經有一定的程式基礎
2. 你對 JS 已經有一定的熟練度
3. 你想藉由框架更深度理解 JS
4. 你在時間上比較充裕 (可以學習一年)

我會建議你學 React，這是因為寫 React 可以培養好的程式設計觀念，也會讓你更熟悉 JS。且 React 的國外資源真的相當豐富。有非常多的專案教學。反之 Vue 就只能去 Bilibili 找，且很多也沒有源碼讓參考。

你是第一次接觸程式設計且時間較急迫

如果你有以下幾點特徵，

1. 前端是你第一次接觸程式設計
2. 對 JS 沒有非常熟悉
3. 有一定的時間壓力要找工作

我會建議你學 Vue，這是因為 Vue 上手簡單，且開發體驗很好。

但我這 React 系列的教學文，就是希望盡可能降低 React 的入手門檻，讓每個人都能快速上手 React。總之，無論選擇哪一個框架入門，最重要的都是要掌握通用的前端核心知識，樹立組件化、模塊化、工程化的程式思維，才能幫助我們走得更遠。

小結

總結來說，這篇文章稍微介紹了 React 基礎知識，從為什麼選擇學習React，到它與原生 JS 以及 Vue 的關鍵區別。

無論是從技術層面還是現實需求來看，React 都展現出了其強大的功能和廣泛的應用前景。此外，我們也探討了新手應該如何選擇適合自己的前端框架，無論你的目標是深入了解 JavaScript，還是迅速進入前端開發領域，React 都是很重要的框架。

在接下來的文章中，我會進一步深入介紹 React 的核心概念，包括組件化開發、狀態管理以及 React 生態系統中的重要工具和函式庫。

希望這些內容能幫助你更扎實且快速的上手 React，並在前端開發的道路上走得更遠。讓我們一起期待下一篇的深入學習吧！