React.js 快速介紹

React 能夠建立完全在瀏覽器中呈現的動態網站。 它的核心元素是 JSX，一種類似 HTML 和 XML 的語法。

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Website Development	Predefined tags (e.g., H1, H2, P)
XML	Extensible Markup Language	Data Structuring	Customizable Tags
JSX	JavaScript XML	Combines HTML and JavaScript	HTML & Custom Tags

說明性範例

HTML

<code class="language-html"><div>
  <h1>This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div></code>

XML

<code class="language-xml"><example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example></code>

JSX

<code class="language-javascript">function ExampleReactComponent() {
  return (
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  );
}</code>

HTML、XML 和 JSX 之間的相似性是顯而易見的。 JSX 在 JavaScript 中獨特地整合了 HTML，因此得名：JavaScript XML。

HTML 和 JavaScript 的融合實作了動態 HTML 操作。 例如，按一下按鈕可以切換類別名稱。

反應組件

React 簡化了傳回 JSX 的自訂元件的定義。 本質上，React 元件是一個產生 JSX 的 JavaScript 函數。

渲染根 React 元件後，JSX 會自動轉換為 HTML 並整合到網頁中。 React 允許建立自訂元件（類似於自訂標籤）以包含在其他元件中。

這是一個使用 ExampleReactComponent 的組件：

<code class="language-javascript">function RootReactComponent() {
  return (
    <div>
      <h1>This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  );
}</code>

道具

與 HTML 屬性類似，React 元件也使用 props。

<code class="language-javascript">function PropsExample(props) {
  console.log(props); // Prints { exampleValue: "example-value" }
  return (
    <div>
      <h1>Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1>This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}</code>

渲染 MainComponent 呼叫 PropsExample，並使用 { exampleValue: "example-value" } 作為 props 參數。 請注意，JavaScript 變數使用 {}.

嵌入到 JSX 中

狀態

資料通常儲存在變數中以供顯示。 React 利用「狀態」進行資料管理，作為 getter/setter 機制。 當狀態被修改時，React 會自動更新元件的 HTML。

此範例示範了狀態變更時自動 HTML 更新：

<code class="language-javascript">import { useState } from 'react';

function IncrementDecrement() {
  const [value, setValue] = useState(0); // Initial value: 0

  function increment(e) {
    setValue(value + 1);
  }

  function decrement(e) {
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}</code>

使用 Vite 建構 React 應用

像 Vite 這樣的工具簡化了將 React 元件和 JSX 捆綁到瀏覽器執行 JavaScript 中的過程。

啟動 React 專案：

<code class="language-bash">npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev</code>

結論

對 React.js 的介紹提供了基本的理解。 建立 Vite 專案後，嘗試建立 React 元件以加深理解。 更多學習資源請上https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421。

以上是React.js 快速介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！