React.js の簡単な紹介

React は、完全にブラウザ内でレンダリングされる動的な Web サイトの作成を可能にします。 その中心要素は、HTML や XML に似た構文である JSX です。

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

<div>
  <h1 id="This-is-heading">This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div>

XML

<example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example>

JSX

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

HTML、XML、JSX の類似性は明らかです。 JSX は HTML を JavaScript 内に独自に統合するため、その名前は JavaScript XML です。

この HTML と JavaScript の融合により、動的な HTML 操作が可能になります。 たとえば、ボタンをクリックするとクラス名を切り替えることができます。

反応コンポーネント

React は、JSX を返すカスタム コンポーネントの定義を容易にします。 基本的に、React コンポーネントは JSX を生成する JavaScript 関数です。

ルート React コンポーネントをレンダリングすると、JSX は自動的に HTML に変換され、Web ページに統合されます。 React では、他のコンポーネント内に含めるためのカスタム コンポーネント (カスタム タグに似た) を作成できます。

ExampleReactComponent を利用するコンポーネントは次のとおりです。

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

小道具

HTML 属性と同様に、React コンポーネントは props を使用します。

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

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

MainComponent をレンダリングすると、PropsExample を { exampleValue: "example-value" } 引数として使用して props を呼び出します。 JavaScript 変数は、{}.

を使用して JSX 内に埋め込まれることに注意してください。

状態

データは通常、表示のために変数に保存されます。 React はデータ管理に「状態」を利用し、ゲッター/セッター メカニズムとして機能します。 状態が変更されると、React はコンポーネントの HTML を自動的に更新します。

この例は、状態変更時の HTML の自動更新を示しています。

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>
  );
}

Vite を使用して React アプリを構築する

Vite などのツールは、React コンポーネントと JSX をブラウザで実行可能な JavaScript にバンドルする作業を合理化します。

React プロジェクトを開始するには:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

結論

この React.js の概要では、基礎的な理解を提供します。 Vite プロジェクトを設定した後、理解を深められるよう React コンポーネントの作成を試してください。 さらに詳しい学習リソースは、https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421から入手できます。

以上がReact.js の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。