LabEx
ログイン登録

React JSX の基本

ReactBeginner

はじめに

React の世界へようこそ！この実験（Lab）では、React でユーザーインターフェースを構築する上で不可欠な要素である JSX について深く掘り下げていきます。JSX（JavaScript XML）は JavaScript の構文拡張であり、HTML に似たコードを JavaScript ファイル内に直接記述することを可能にします。これにより、UI コードはより読みやすく、表現力豊かで、保守しやすくなります。

この実験（Lab）を通して、以下の JSX の基本ルールを習得します。

  • HTML に似た要素の記述方法
  • 動的な JavaScript 式の埋め込み
  • CSS クラスの適用
  • 自己終了タグの使用
  • フラグメント（Fragments）を使用した複数の要素のグループ化

基本的な React プロジェクトは、~/project/my-app ディレクトリにセットアップ済みです。早速始めましょう！

コンポーネントの return で h1 のような JSX 要素を記述する

このステップでは、基本的な JSX 要素を記述し、ブラウザでレンダリングされる様子を確認します。JSX を使用すると、React コンポーネント内で HTML に非常に似たマークアップを直接記述できます。

まず、開発環境を起動しましょう。すべての作業は~/project/my-app ディレクトリ内で行います。

ターミナルでプロジェクトディレクトリに移動し、必要な依存関係をインストールして、開発サーバーを起動してください。

cd ~/project/my-app
npm install

インストールが完了したら、次のコマンドを実行して開発サーバーを起動します。

npm run dev -- --host 0.0.0.0 --port 8080

サーバーが実行されていることを示す出力が表示されます。次に、画面上部の Web 8080 タブをクリックして、ライブアプリケーションを表示します。 "Hello, React!" と表示されているはずです。

次に、左側のファイルエクスプローラーから src/App.jsx ファイルを開きます。このファイルには App という名前のシンプルな React コンポーネントが含まれています。

h1 要素を変更しましょう。<h1> タグ内のテキストを "Welcome to JSX" に変更します。

src/App.jsx の内容を以下のコードに置き換えてください。

import "./App.css";

function App() {
  return <h1>Welcome to JSX</h1>;
}

export default App;

ファイルを保存します（Ctrl+S または Cmd+S）。Web 8080 タブのアプリケーションは自動的に更新され、新しいテキストが表示されます。

波括弧で JavaScript 式を埋め込む

このステップでは、波括弧 {} を使用して JavaScript 式を JSX に直接埋め込む方法を学びます。これは動的なコンテンツをレンダリングできる強力な機能です。

波括弧の中には、有効な JavaScript 式を記述できます。変数、関数呼び出し、算術演算などが考えられます。

App コンポーネントを修正して、動的なタイトルを表示してみましょう。再度 src/App.jsx ファイルを開いてください。

App 関数内の return ステートメントの前に、title という名前の JavaScript 定数を宣言し、文字列値を割り当てます。その後、この定数を <h1> 要素内で使用します。

src/App.jsx ファイルを以下のコードに更新してください。

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1>{title}</h1>;
}

export default App;

ファイルを保存します。次に、Web 8080 タブを確認してください。見出しが "React JSX Basics" に更新されているのがわかるはずです。React は {title} という式を評価し、その値を <h1> タグの内容としてレンダリングします。

CSS クラスのために className 属性を追加する

このステップでは、スタイリングのために JSX 要素に CSS クラスを追加する方法を学びます。

通常の HTML では、CSS クラスを割り当てるためにclass属性を使用します。しかし、classは JavaScript の予約語です。競合を避けるため、JSX では代わりにclassNameを使用します。

まず、スタイルルールを追加しましょう。src/App.cssファイルを開き、タイトル用のスタイルを定義するために以下の CSS コードを追加してください。

.title-style {
  color: #61dafb;
  text-align: center;
}

src/App.cssファイルを保存します。

次に、このクラスを<h1>要素に適用しましょう。src/App.jsxを開き、h1タグにclassName属性を追加します。

src/App.jsxファイルを以下のように更新してください。

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1 className="title-style">{title}</h1>;
}

export default App;

ファイルを保存し、Web 8080タブに切り替えます。App.cssで定義したスタイルに従って、タイトルテキストが中央揃えになり、水色で表示されているはずです。

img 要素に自己終了タグを使用する

このステップでは、JSX で自己終了タグを使用する方法を学びます。HTML では、<img>、<br>、<input>などの要素は「void」または「empty」要素であり、閉じタグを持たないことを意味します。

JSX では、すべてのタグを明示的に閉じる必要があります。子を持たない要素の場合、閉じ山括弧の前にスラッシュ / を追加する自己終了構文を使用します。例：<img />。

React コンポーネントは、単一のルート要素のみを返すことができます。複数の要素をレンダリングするには、それらを<div>などのコンテナでラップする必要があります。

タイトルの下に画像を追加しましょう。<h1>と新しい<img>タグの両方を<div>でラップします。

src/App.jsxファイルを以下のコードに更新してください。

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <div>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </div>
  );
}

export default App;

このコードでは、<img>タグを追加しました。これは自己終了タグ（/>）であることに注意してください。また、波括弧を使用して、imageUrl変数から動的にsrc属性を設定しました。

ファイルを保存し、Web 8080タブを確認してください。タイトルの下に LabEx ロゴが表示されているのが見えるはずです。

フラグメント <> </> で複数の要素をレンダリングする

このステップでは、DOM に余分なノードを追加せずに複数の要素をグループ化する、より良い方法である React フラグメントについて学びます。

前のステップでは、コンポーネントは単一のルート要素を返す必要があるため、<h1>と<img>要素をラップするために<div>を使用しました。しかし、この余分な<div>は不要な場合があり、CSS レイアウト（Flexbox や Grid など）に干渉することがあります。

React はフラグメントと呼ばれるソリューションを提供します。フラグメントを使用すると、DOM に余分なノードを追加せずに子要素のリストをグループ化できます。短縮構文 <> ... </> を使用できます。

Appコンポーネントをリファクタリングして、<div>の代わりにフラグメントを使用しましょう。

src/App.jsxを開き、開始の<div>と終了の</div>をそれぞれ<>と</>に置き換えてください。

最終的なsrc/App.jsxコードは以下のようになります。

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </>
  );
}

export default App;

ファイルを保存します。Web 8080タブでの視覚的な出力は、前のステップと全く同じように見えます。しかし、ブラウザの開発者ツールで HTML をインスペクトすると、<h1>と<img>要素が、親の<div>なしで、直接の兄弟になっていることがわかります。これにより、よりクリーンで効率的な DOM 構造が作成されます。

まとめ

React JSX の基本ラボを完了おめでとうございます！React アプリケーションで UI を記述するための基本的なルールと構文を学びました。

このラボでは、以下の練習を行いました。

  • コンポーネントの return ステートメントで、<h1>のような HTML ライクな要素を記述する。
  • 波括弧 {} を使用して、動的な JavaScript 変数や式をマークアップに埋め込む。
  • className属性を使用して CSS クラスを適用する。
  • />構文を使用して、<img>のような要素の自己終了タグを使用する。
  • React フラグメント (<> </>) を使用して、余分な DOM ノードを追加せずに複数の要素をグループ化する。

これらの概念は、React で複雑で動的なユーザーインターフェースを作成するためのビルディングブロックです。JSX のパワーと柔軟性に慣れるために、引き続き練習してください。

関連 React コース
初心者向け React

初心者向け React

reactjavascriptweb-development
React を使用したノートアプリの作成

React を使用したノートアプリの作成

reactjavascriptweb-development
React でクリスマスウィッシュリストビルダーを構築する

React でクリスマスウィッシュリストビルダーを構築する

reactjavascriptweb-development