前端框架

-2024 / 04 / 04

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

this.web

嗨～我是請網這邊走，我打算寫一系列的 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 最大的差別，也就是它的解決方法，為以下幾點：

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

以上三點是我認為 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

如果你有以下幾點特徵，

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

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

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

如果你有以下幾點特徵，

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

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

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

小結

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

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

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

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

前端基礎

前端動效