JSX とレンダリング要素を理解する日 - ReactJS

「30 日間の ReactJS」チャレンジの 3 日目へようこそ!今日は、React の中核概念の 1 つである JSX について詳しく説明します。この投稿を終えるまでに、JSX と、React が JSX を使用して Web ページ上の要素をレンダリングする方法をしっかりと理解できるようになります。

JSX とは何ですか?
JSX は JavaScript XML の略です。これは、JavaScript ファイル内に HTML のようなコードを記述できるようにする JavaScript の構文拡張機能です。 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 では、class のような属性を使用して CSS クラスを適用します。

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

ただし、JSX では、class は JavaScript の予約キーワードであるため、class の代わりに className を使用する必要があります。

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

JSX への式の埋め込み
JSX の強力な機能の 1 つは、JavaScript 式を JSX 内に直接埋め込むことができることです。これにより、アプリのロジックに基づいてコンテンツを動的に生成できます。

例:

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

ここで、{name} は JavaScript 式であり、評価されて name 変数の値に置き換えられ、「Hello, Meraj!」としてレンダリングされます。画面上に表示されます。

React での要素のレンダリング
React では、要素のレンダリングはページ上にコンテンツを表示するプロセスです。 React 要素は、アプリの UI の構成要素です。

要素をレンダリングするには、ReactDOM.render() メソッドを使用します。このメソッドは 2 つの引数を取ります:

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

このコードは、ルートの ID を持つ HTML 要素内の要素をレンダリングするように React に指示します。

React の仮想 DOM の力
React は仮想 DOM を使用して、UI への変更を効率的に管理します。要素を更新すると、React は新しいバージョンと以前のバージョンを比較し、実際の DOM の変更された部分のみを更新します。このアプローチにより、React が高速かつ効率的になります。

実際の例: 買い物リスト
ホワイトボードに買い物リストを書くことを考えてください。 1 つの項目を変更する必要がある場合、リスト全体を消去して書き直す必要はありません。変更された特定の項目を更新するだけです。 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 が JSX を使用して要素をレンダリングする方法を理解することで、React 開発の強力な基盤が確立されます。

明日は、React アプリケーションの中核となる構成要素であるコンポーネントとプロップについて詳しく見ていきます。

以上がJSX とレンダリング要素を理解する日 - ReactJSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。