【React學習筆記】React 入門第一課 | HTML、CSS、JavaScript

這是 React 學習筆記的第一課,主要介紹 React 的起源、建議學習 React 需具備的基礎知識以及透過圖表介紹 MPA、SPA 兩種網站類型的差異。
React

什麼是 React ?

  React 為 Facebook 公司於 2013 年(現已更名為Meta)所維護並開源的 JavaScript 函式庫(Library)也可稱為前端框架,主要用來優化使用者介面(User Interface)的製作。根據 React 官方資料得知,React 的應用程式是由無數個 Component (組件)所組成,嘗試簡化複雜且大量的代碼使網站的運作效能有所提升。

寫在學習 React 之前

   在學習 React 前,建議先具有以下基礎知識:

  •  熟悉 HTML、CSS 、JavaScript 基礎語法
  • npm 指令的基礎了解
  • 對網頁資料傳輸有基本的概念
HTML CSS JS(photo by pixabay)

  安裝好以下程式:

  • Node.js
  • Vscode(Visual Studio Code)
node.js
node.js (photo by pixabay)
vscode
vscode (photo by stickPNG)

React 的使用方式

  主要分為 MPA 複合式應用程式(Multi-Page Application)與 SPA 單頁式應用程式(Single-Page Application)兩種。 MPA 主要為將網頁的部分區塊以 React 完成,反之 SPA 則將整個網頁都由 React 完成,最大的差異來自於資料傳輸的不同。(這就是為什麼建議對網頁資料傳輸有基本了解)。

MPA(Multi Page Application)
MPA(Multi Page Application)
SPA(Single Page Application)
SPA(Single Page Application)

  MPA 類型的網站,每次開啟新的分頁或者在網頁中執行新的動作時,都會重新向資料庫請求一次完整的資料。反之,SPA 類型的網站,第一次開啟網頁時會向資料庫端請求完整資料,後續即透過 React 存取了網頁的大部分資料,大大提升了網頁瀏覽的效能。(更多 MPA 與 SPA 類型網站的比較請參考此連結