Day 了解 JSX 和渲染元素 - ReactJS

歡迎來到「ReactJS 30 天」挑戰的第三天！今天，我們將深入探討 React 的核心概念之一：JSX。讀完本文後，您將對 JSX 以及 React 如何使用它在網頁上渲染元素有一個深入的了解。

什麼是 JSX？
JSX 代表 JavaScript XML。它是 JavaScript 的語法擴展，可讓您在 JavaScript 檔案中編寫類似 HTML 的程式碼。 JSX 讓您更輕鬆地直接在程式碼中建立和視覺化 UI 元件，從而混合應用程式的邏輯和結構。

JSX 的工作原理
當您編寫 JSX 時，您正在編寫 HTML 和 JavaScript 的混合體。 React 接受它並將其轉換為代表您的 UI 的標準 JavaScript 物件。

這是一個基本範例：

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

這行程式碼建立了一個代表

的 React 元素。標籤上寫著「Hello, world!」。

JSX 不是 HTML
儘管 JSX 看起來很像 HTML，但重要的是要記住它並不完全相同。 JSX 是 React 用於創建元素的語法糖。

例如，在 HTML 中，類別等屬性用於應用 CSS 類別：

<h1 class="header">Hello, world!</h1>

但是在 JSX 中，你需要使用 className 而不是 class，因為 class 是 JavaScript 中的保留關鍵字：

const element = <h1 className="header">Hello, world!</h1>;

在 JSX 中嵌入表達式
JSX 的強大功能之一是您可以直接在其中嵌入 JavaScript 表達式。這允許您根據應用程式的邏輯動態生成內容。

例如：

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

這裡，{name} 是一個 JavaScript 表達式，它將被計算並替換為 name 變數的值，呈現為「Hello, Meraj!」在螢幕上。

在 React 中渲染元素
在React中，渲染元素是在頁面上顯示內容的過程。 React 元素是應用程式 UI 的建構塊。

要渲染元素，可以使用 ReactDOM.render() 方法。此方法需要兩個參數：

1. 要渲染的 React 元素。
2. 要渲染它的 DOM 元素。

以下是渲染「Hello, world!」的方法。例如：

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <h1>Hello, world!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

此程式碼告訴 React 使用 root 的 id 渲染 HTML 元素內的元素。

React 虛擬 DOM 的強大
React 使用虛擬 DOM 來有效管理 UI 的變更。當你更新一個元素時，React 會將新版本與前一個版本進行比較，並只更新實際 DOM 中已更改的部分。這種方法使 React 快速且有效率。

現實生活中的例子：購物清單
想像一下白板上的購物清單。如果您需要更改一項，則不必刪除整個清單並重寫它。您只需更新更改的特定項目即可。 React 的虛擬 DOM 的工作原理類似，只更新需要更改的部分。

為什麼要用 JSX？

• 可讀程式碼： JSX 讓您以易於閱讀和理解的方式編寫元件。您可以直接在程式碼中看到 UI 的結構。
• 更少的程式碼：使用 JSX，與使用 React.createElement() 手動建立元素相比，您可以編寫更少的程式碼。
• 與 JavaScript 整合：由於 JSX 是 JavaScript 的語法擴展，因此您可以直接在 UI 程式碼中嵌入邏輯。

使用 Vite 設定 JSX
由於我們使用 Vite 進行開發，好消息是 Vite 已預先配置為開箱即用地支援 JSX。這意味著您可以立即開始編寫 JSX，無需任何額外的設定。

如果您按照第 2 天的步驟進行操作，則您的 Vite 專案已經設定完畢。您可以開始使用 JSX 建立元件並立即查看它們的渲染效果。

結論
JSX 是一個強大的工具，它彌合了 HTML 和 JavaScript 之間的差距，使使用 React 建立動態和互動式 UI 變得更加容易。了解 JSX 的工作原理以及 React 如何使用它來渲染元素將為您的 React 開發之旅奠定堅實的基礎。

明天，我們將深入探討元件和道具——任何 React 應用程式的核心構建塊。

以上是Day 了解 JSX 和渲染元素 - ReactJS的詳細內容。更多資訊請關注PHP中文網其他相關文章！