🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 11月18日

[React] 編寫程式碼前先理解基本概念

理解 React 的基本概念

開始之前

React 現在是全球最受歡迎的前端庫之一。本文將針對首次學習 React 的讀者，清楚易懂地解釋 React 的基本概念。我們將依序探討組件、JSX、應用程式結構等理解 React 時不可或缺的元素。

React 是什麼

全球最受歡迎的前端庫

React 是由 Meta 公司（前 Facebook）開發的 JavaScript 庫，用於構建用戶介面（UI）。由於能有效地創建網站或網頁應用程式的畫面，因此受到許多企業和開發者的支持。

React 的特點在於組件的組合來構建 UI。我們可以透過結合 HTML、CSS、JavaScript 創建稱為「組件」的小部件，並將這些部件以層次結構組合，以構建大型應用程式。

React 的基本思想

React 的基本思想是「將外觀與功能結合在一起」。在傳統的網頁開發中，通常會將 HTML（結構）、CSS（外觀）、JavaScript（行為）分開管理。然而在 React 中，我們會將這些元素按 UI 部件進行整合管理。

這一觀念讓組件的開發和維護變得更容易，且也提高了重用性。

組件的概念

組件是什麼

組件是知道如何將自己渲染為 HTML 的函數。更具體地說，組件是一個 JavaScript 函數，而該函數返回的內容是 JSX（稍後介紹）。

function Welcome() {
  return <h1>Hello, React!</h1>;
}

在上述示例中，名為 Welcome 的組件返回了一個 <h1> 標籤。可以看到，在 React 中定義為函數的組件返回類似 HTML 的內容，這是其基本架構。

組件的層次結構

在 React 中，我們通過組合小組件來創建更大的組件。這就像組裝樂高積木一樣。

如圖所示，位於最上層的 App 組件下有 Header、Main、Footer 等子組件，並且其下還會有孫組件。通過這樣的層次結構，即使是複雜的應用程式，也能保持有序的狀態。

組件設計的重要性

思考如何分割組件是設計 React 應用程式的重要部分。通過適當的粒度分割組件，可以提高代碼的重用性和可維護性。

一般來說，組件的分割基準如下：

單一責任原則：每個組件只應有一個職責
重用性：在多個地方使用的部分應作為獨立的組件
適當的大小：保持大小不過大也不過小，以便於理解

JSX - 用 JavaScript 寫 HTML

JSX 是什麼

JSX 是一種擴展 JavaScript 語法的語法，使得可以使用類似 HTML 的結構。換句話說，我們可以在 JavaScript 中編寫 HTML。

const element = <h1>Hello, JSX!</h1>;

這看起來像 HTML，但實質上它是 JavaScript 代碼。這種特殊的語法就是 JSX，並且是 React 的一大特點。

JSX 的運作方式（Babel）

JSX 並不是瀏覽器可以直接理解的語法。實際上，背後有像 Babel 這樣的轉換工具，將 JSX 轉換為普通的 JavaScript。

Babel 將看似 HTML 的 JSX 轉換為瀏覽器能理解的 JavaScript 是一個重要的點。因此，在未安裝 Babel 的環境中無法使用 JSX。

JSX 的三個重要規則

編寫 JSX 時必須遵守以下三個規則。

規則1：JSX 必須被單個父元素包裹
在 JSX 中，只能返回單一的父元素，而子元素可以有多個。

// ❌ 錯誤：返回了多個父元素
function Bad() {
  return (
    <h1>標題</h1>
    <p>內容</p>
  );
}

// ✅ 正確：被單一父元素包裹
function Good() {
  return (
    <div>
      <h1>標題</h1>
      <p>內容</p>
    </div>
  );
}

規則2：組件必須閉合
在 HTML 中，某些自結束標籤可以省略，但在 JSX 中，必須用 /> 封閉所有標籤。

// ✅ 正確
<img src="image.jpg" />
<br />
<input type="text" />

規則3：類別使用 className 屬性
在 HTML 中使用 class 屬性，但在 JSX 中使用 className。這是因為 class 是 JavaScript 的保留字。

// ✅ 正確
<div className="container">內容</div>

// ❌ 錯誤
<div class="container">內容</div>

JSX 中顯示變數

在 JSX 中，我們可以使用大括號 {} 動態顯示 JavaScript 變數或表達式。

const name = "React";
const year = 2024;

function Greeting() {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>今年是 {year} 年</p>
      <p>明年是 {year + 1} 年</p>
    </div>
  );
}

這個功能使得動態內容的顯示變得簡單。

React 片段的用法

有時我們希望用單個父元素包裹多個元素，但又不想在 DOM 中增加多餘的元素。在這種情況下，我們可以使用 React 片段。

// 用 div 包裹會增加多餘的 DOM 元素
function WithDiv() {
  return (
    <div>
      <h1>標題</h1>
      <p>內容</p>
    </div>
  );
}

// 使用片段則能返回多個元素而不新增 DOM 元素
function WithFragment() {
  return (
    <>
      <h1>標題</h1>
      <p>內容</p>
    </>
  );
}

透過使用 <> 的縮寫語法，可以在不增加多餘 DOM 元素的情況下包裹多個元素。

React 應用程式的結構

App 組件 - 應用程式的起點

React 應用程式有一個作為入口點的組件。一般來說，這個組件通常被命名為 App。

function App() {
  return (
    <div className="App">
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

由於在最上層有 App 組件，因此可以在其中嵌入其他組件，從而構建整個應用程式。

建立組件的層次結構

以 App 組件作為起點，讓我們以如下的層次結構來組建應用程式。

透過這樣的自上而下的方式配置組件，使得整體應用程式的結構更易於把握。

分割組件並進行管理

基本的匯入與匯出

為了使用在其他檔案中定義的組件，我們需要理解匯入與匯出的機制。

在匯出（公開）檔案中，我們可以這樣寫：

// Header.jsx
function Header() {
  return <header>標題</header>;
}

export default Header;

在匯入（使用）檔案中，我們可以這樣寫：

// App.jsx
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

這一機制使得我們可以按檔案單位分割並管理組件。

預設匯出與命名匯出

JavaScript 的匯出有兩種類型：預設匯出和命名匯出。

預設匯出
每個檔案最多只能定義一個，並且在匯入時可以隨意命名。

// Button.jsx
function Button() {
  return <button>點擊</button>;
}

export default Button;

// App.jsx
import Button from './Button';  // 可以隨意命名匯入
import MyButton from './Button'; // 這樣也可以

命名匯出
從一個檔案中可以匯出多個元素，在匯入時需要使用相同的名稱。

// utils.jsx
export function formatDate(date) {
  return date.toLocaleDateString();
}

export function formatTime(time) {
  return time.toLocaleTimeString();
}

// App.jsx
import { formatDate, formatTime } from './utils';

檔名與組件名的關係

為了方便管理組件，檔名與組件名保持一致是非常重要的。

Header.jsx  → Header 組件
Footer.jsx  → Footer 組件
Button.jsx  → Button 組件

遵循這一規則可以讓我們一眼看出哪個檔案定義了哪個組件，從而提高開發效率。

CSS 與圖片的匯入

與組件一樣，我們也可以匯入 CSS 檔案或圖片等資產來使用。

// Header.jsx
import './Header.css';        // 引入 CSS 檔案
import logo from './logo.png'; // 引入圖片檔案

function Header() {
  return (
    <header className="header">
      <img src={logo} alt="標誌" />
      <h1>我的網站</h1>
    </header>
  );
}

export default Header;

通常我們會將每個組件的 CSS 檔案分開管理。這樣可以明確樣式的作用範圍，提升可維護性。