React 從入門到串接 API(上)

#react #api #Vite
React 從入門到串接 API(上)
五倍技術部
技術文章
React 從入門到串接 API(上)

什麼是 React

雖然現在提到 React 都會說它是前端三大框架之一,不過嚴格來說 React 並不是框架,React 是一個 JavaScript 函式庫,主要用來開發使用者介面,也就是只負責 View 的部分,React 是由 Meta(Facebook) 開發並開源。

為什麼要使用 React

React 有以下特色:

  • Virtual DOM:React 會先將資料轉換成 Virtual DOM,再透過 Virtual DOM 來操作真實的 DOM,這樣可以避免直接操作 DOM 所帶來的效能問題。
  • Component:React 將 UI 分割成一個個的 Component,每個 Component 都有自己的狀態,並且可以透過 props 傳遞資料。
  • 單向資料流:React 的資料流是單向的,資料只能從上層元件傳到下層元件,這樣可以避免資料流混亂的問題。
  • JSX:React 使用 JSX 語法,可以在 JavaScript 中撰寫 HTML,讓開發者可以在同一個檔案中撰寫 HTML 與 JavaScript。
  • 生態系:React 有龐大的生態系,有許多第三方套件可以使用。
  • 開發工具:React 有許多開發工具可以使用,例如:React Developer Tools、Redux DevTools 等等。
  • 社群:React 有龐大的社群,有許多開發者可以交流,並且有許多開發者維護的第三方套件可以使用。

環境準備

要使用 React 來開發網頁非常簡單,只需要安裝 Node.js 就可以了,如果還沒有安裝 Node.js 的話,可以參考 Node.js 官網

建立新專案

按照 React 官網 最新的文件提到,如果要建立一個新專案,建議使用目前社群中最多人使用的 React 框架來開發,例如 Next.js

官方建議選擇框架開始,是因為現代專案一些標準需求,框架就幫你準備好並且最佳化,而不用隨著時間進展一直加入相關的套件來讓自己的專案肥大化。當然你也可以在沒有框架的情況下使用 React,如果只是想要簡單學習 React 的話,那麼可以使用 Vite 來建立專案。

由於本篇文章主要會介紹 React 的基礎,所以會使用 Vite 來建立專案,Vite 是一個由 Vue.js 團隊開發的前端開發工具,可以快速建立專案,並且支援 React、Vue.js、Svelte 等等。

在終端機輸入以下指令,使用 Vite 建立一個新專案:

$ pnpm create vite react-app --template react

這裡使用 pnpm 來建立,也可以替換成 yarn 或是 npm,建立完成後,要進入專案資料夾並且安裝相關套件:

$ cd react-app
$ pnpm i

安裝完成後,現在的專案結構會是這樣:

react-app
├── node_modules
├── public
├── src
│   ├── assets
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── pnpm-lock.yaml
└── vite.config.js

大概介紹一下比較重要的部分:

  • src:放置專案的程式碼,這是主要開發的部分,main.jsx 是進入點,App.jsx 是主要的元件。
  • index.html: 專案的進入點,會載入 main.js 並且渲染到 #app 的元素中。

最後就可以啟動開發伺服器:

$ pnpm dev

解析前端畫面如何組成

在瀏覽器打開終端機指示的 URL 就可以看到專案的畫面:

專案畫面

現在這個畫面主要都在 App.jsx 上可以看到對應的程式碼:

App.jsx 程式碼

App.jsx 是一個 React 元件,這個元件會回傳一個 JSX,而 JSX 則是一種語法糖,可以在 JavaScript 中撰寫 HTML。

App.jsx 會透過前面提到的,會從進入點的 main.jsx 載入:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

main.jsx 會載入 App.jsx 並且透過 ReactDOM 渲染到 index.html#root 的元素中。

React 的狀態

現在可以在網頁畫面上看到有一個 count is 0 的按鈕,每當點擊的時候,數字都會一直往上加,這個數字就是 React 的狀態(State),而在 React 中,狀態是一個非常核心的概念。它允許我們儲存並且管理元件的資料,並且可以在狀態改變的時候,重新渲染元件。

而在 React 中,狀態是不可變的,也就是說,我們不能直接改變狀態,在現代的 React,我們可以透過 Hooks 來修改狀態,這樣才能讓 React 知道狀態改變了,並且重新渲染元件。

以上就是 React 的基本介紹,下一篇文章會介紹怎麼使用 React 的 Hooks 來串接 API 並實作一個 Todo List。如果想要先了解更多的話,可以參考React 全攻略 - 入門到進階
的課程。