JSXでReact要素を作成する方法

著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

このチュートリアルでは、JSXを使用して要素を記述する方法を学習します。 JSXは、 JavaScript コードでHTMLのような構文を記述できるようにする抽象化であり、標準のHTMLマークアップのように見えるReactコンポーネントを構築できるようにします。 JSXは、 React 要素のテンプレート言語であるため、Reactがアプリケーションにレンダリングするマークアップの基盤となります。

JSXではマークアップにJavaScriptも記述できるため、arrayマッピングやconditionalsの短絡評価などのJavaScript関数とメソッドを利用できます。

チュートリアルの一部として、マークアップ内のボタンのクリックイベントを直接キャプチャし、CSSクラスなどの標準HTMLと構文が完全に一致しない場合にインスタンスをキャッチします。このチュートリアルを終了すると、さまざまなJSX機能を使用して、クリックリスナーが組み込まれている要素のリストを表示する実用的なアプリケーションができあがります。これは、フレームワークを学習する過程で頻繁に使用するReactアプリケーションの一般的なパターンです。また、標準のHTML要素をJavaScriptと組み合わせて、Reactがどのように小さくて再利用可能なコードを作成できるかを確認することもできます。

前提条件

Node.jsを実行する開発環境が必要になります。このチュートリアルは、Node.jsバージョン10.19.0およびnpmバージョン6.13.4でテストされました。これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。
Create ReactAppでアプリを作成できる必要があります。 Create React Appを使用してアプリケーションをインストールする手順については、 Create ReactAppを使用してReactプロジェクトをセットアップする方法を参照してください。
また、 JavaScriptでコーディングする方法にあるJavaScriptの基本的な知識と、HTMLおよびCSSの基本的な知識も必要です。 HTMLとCSSの優れたリソースは、 Mozilla DeveloperNetworkです。

ステップ1—React要素にマークアップを追加する

前述のように、ReactにはJSXと呼ばれる特別なマークアップ言語があります。これは、HTMLとJavaScriptの構文を組み合わせたもので、次のようになります。

<div>
  {inventory.filter(item => item.available).map(item => (
    <Card>
        <div className="title"}>{item.name}</div>
        <div className="price">{item.price}</div>
    </Card>
    ))
  }
</div>

.filterや.mapなどのJavaScript機能と、<div>などの標準HTMLがわかります。ただし、<Card>やclassNameなど、HTMLとJavaScriptの両方に似た部分が他にもあります。

これはJSXであり、ReactコンポーネントにJavaScriptの力でHTMLの感触を与える特別なマークアップ言語です。

このステップでは、既存のReact要素に基本的なHTMLのような構文を追加する方法を学びます。まず、標準のHTML要素をJavaScript関数に追加してから、コンパイルされたコードをブラウザーで確認します。また、要素をグループ化して、Reactが最小限のマークアップで要素をコンパイルできるようにして、クリーンなHTML出力を残します。

まず、新しいプロジェクトを作成します。コマンドラインで次のスクリプトを実行し、create-react-appを使用して新しいプロジェクトをインストールします。

npx create-react-app jsx-tutorial

プロジェクトが終了したら、次のディレクトリに移動します。

cd jsx-tutorial

新しいターミナルタブまたはウィンドウで、 CreateReactApp開始スクリプトを使用してプロジェクトを開始します。ブラウザは変更時に自動更新されるため、作業中はこのスクリプトを実行したままにします。

npm start

実行中のローカルサーバーを取得します。プロジェクトがブラウザウィンドウで開かなかった場合は、 http：// localhost：3000/で見つけることができます。これをリモートサーバーから実行している場合、アドレスはhttp://your_IP_address:3000になります。

ブラウザには、CreateReactAppの一部として含まれているReactアプリケーションが読み込まれます。

完全に新しいカスタムコンポーネントのセットを構築するので、空のプロジェクトを作成できるように、ボイラープレートコードをクリアすることから始める必要があります。テキストエディタでApp.jsを開きます。これは、ページに挿入されるルートコンポーネントです。すべてのコンポーネントはここから始まります。

新しいターミナルで、プロジェクトフォルダーに移動し、次のコマンドでsrc/App.jsを開きます。

nano src/App.js

次のようなファイルが表示されます。

jsx-tutorial / src / App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

ここで、行import logo from './logo.svgと関数のreturnステートメントの後のすべてを削除します。 nullを返すように変更します。最終的なコードは次のようになります。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return null;
}

export default App;

テキストエディタを保存して終了します。

最後に、ロゴを削除します。ターミナルウィンドウで、次のコマンドを入力します。

rm src/logo.svg

アプリケーションでこのSVGファイルを使用することはないため、作業中に未使用のファイルを削除する必要があります。長期的には、コードをより適切に整理できます。

プロジェクトのこれらの部分が削除されたので、JSXのファセットの調査に進むことができます。このマークアップ言語はReactによってコンパイルされ、最終的にWebページに表示されるHTMLになります。内部に深く入り込むことなく、ReactはJSXを取得してページの外観のモデルを作成し、必要な要素を作成してページに追加します。

つまり、HTMLのように見えるものを記述して、レンダリングされたHTMLが類似することを期待できるということです。ただし、いくつかの問題があります。

まず、サーバーを実行しているタブまたはウィンドウを見ると、次のことがわかります。

Output...
./src/App.js
  Line 1:8:  'React' is defined but never used  no-unused-vars
...

これは、インポートされたReactコードを使用していないことを示すlinterです。コードにimport React from 'react'という行を追加すると、JSXをReactコードに変換するJavaScriptコードがインポートされます。 JSXがない場合は、インポートする必要はありません。

少量のJSXを追加して変更しましょう。 nullをHello, Worldの例に置き換えることから始めます。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

ファイルを保存します。サーバーが稼働している状態でターミナルを見ると、警告メッセージは消えます。ブラウザにアクセスすると、メッセージがh1要素として表示されます。

次に、<h1>タグの下に、文字列I am writing JSXを含む段落タグを追加します。コードは次のようになります。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return(
    <h1>Hello, World</h1>
    <p>I am writing JSX</p>
  )
}

export default App;

JSXは複数行にまたがっているため、式を括弧で囲む必要があります。

ファイルを保存します。これを行うと、サーバーを実行しているターミナルでエラーが表示されます。

Output./src/App.js
  Line 7:5:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 |   return(
   6 |     <h1>Hello, World</h1>
>  7 |     <p>I am writing JSX</p>
     |     ^
   8 |   )
   9 | }
  10 |

関数またはステートメントからJSXを返す場合は、単一の要素を返す必要があります。その要素にはネストされた子が含まれている可能性がありますが、最上位の要素が1つ存在する必要があります。この場合、2つの要素を返します。

修正は小さなコード変更です。コードを空のタグで囲みます。空のタグは、単語のないHTML要素です。 <></>のようになります。

エディタで./src/App.jsに戻り、空のタグを追加します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return(
    <>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </>
  )
}

export default App;

空のタグは単一の要素を作成しますが、コードがコンパイルされるとき、それは最終的なマークアップに追加されません。これにより、Reactに単一の要素を与えながら、コードをクリーンに保つことができます。

注：コードが1つの要素を返す限り、空のタグの代わりにdivでコードをラップすることもできます。この例では、空のタグには、解析された出力に余分なマークアップを追加しないという利点があります。

コードを保存してファイルを終了します。ブラウザが更新され、更新されたページが段落要素とともに表示されます。さらに、コードが変換されると、空のタグが削除されます。

これで、いくつかの基本的なJSXをコンポーネントに追加し、すべてのJSXを単一のコンポーネントにネストする方法を学習しました。次のステップでは、コンポーネントにスタイルを追加します。

ステップ2—属性を持つ要素にスタイリングを追加する

このステップでは、コンポーネント内の要素のスタイルを設定して、HTML属性がJSXでどのように機能するかを学習します。 Reactには多くのスタイリングオプションがあります。それらのいくつかはJavascriptでCSSを書くことを含み、他はプリプロセッサを使用します。このチュートリアルでは、インポートされたCSSおよびCSSクラスを操作します。

コードができたので、次はスタイルを追加します。テキストエディタでApp.cssを開きます。

nano src/App.css

新しいJSXから始めているので、現在のCSSはもう存在しない要素を参照しています。 CSSは必要ないので、削除できます。

コードを削除すると、空のファイルが作成されます。

次に、テキストを中央に配置するためのスタイルを追加します。 src/App.cssに、次のコードを追加します。

jsx-tutorial / src / App.css

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

このコードブロックでは、.containerというCSSクラスセレクターを作成し、それを使用して display：flexを使用してコンテンツを中央に配置しました。

ファイルを保存して終了します。ブラウザは更新されますが、何も変更されません。変更を確認する前に、CSSクラスをReactコンポーネントに追加する必要があります。コンポーネントのJavaScriptコードを開きます。

nano src/App.js

CSSコードは、import './App.css'という行ですでにインポートされています。つまり、 webpack はコードをプルして最終的なスタイルシートを作成しますが、CSSを要素に適用するには、クラスを追加する必要があります。

まず、テキストエディタで、空のタグ<>を<div>に変更します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return(
    <div>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

このコードでは、空のタグ<>をdivタグに置き換えました。空のタグは、余分なタグを追加せずにコードをグループ化するのに役立ちますが、空のタグは HTML属性を受け入れないため、ここではdivを使用する必要があります。

次に、クラス名を追加する必要があります。これは、JSXがHTMLから分岐し始めるところです。通常のHTML要素にクラスを追加する場合は、次のようにします。

<div class="container">

ただし、JSXはJavaScriptであるため、いくつかの制限があります。制限の1つは、JavaScriptに予約済みキーワードがあることです。つまり、JavaScriptコードで特定の単語を使用することはできません。たとえば、nullという単語はすでに予約されているため、その単語を作成することはできません。

予約語の1つはclassです。 Reactは、この予約語を少し変更することで回避します。属性classを追加する代わりに、属性classNameを追加します。原則として、属性が期待どおりに機能しない場合は、キャメルケースのバージョンを追加してみてください。わずかに異なるもう1つの属性は、ラベルに使用するfor属性です。他のいくつかのケースがありますが、幸いなことにリストはかなり短いです。

注： Reactでは、属性はpropsと呼ばれることがよくあります。小道具は、他のカスタムコンポーネントに渡すことができるデータの断片です。これらは、HTML仕様と一致しないことを除いて、属性と同じように見えます。このチュートリアルでは、主に標準のHTML属性のように使用されるため、これらを属性と呼びます。これにより、このシリーズの後半で説明するHTML属性のように動作しない小道具とは区別されます。

Reactでclass属性がどのように使用されるかがわかったので、コードを更新してスタイルを含めることができます。テキストエディタで、開始divタグにclassName="container"を追加します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

ファイルを保存します。これを行うと、ページが再読み込みされ、コンテンツが中央に配置されます。

.

className属性はReactで一意です。ほとんどのHTML属性を変更せずにJSXに追加できます。例として、テキストエディタに戻り、greetingのidを<h1>要素に追加します。標準のHTMLのようになります。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1 id="greeting">Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

ページを保存してブラウザをリロードします。同じになります。

これまでのところ、JSXは標準のマークアップのように見えますが、JSXの利点は、HTMLのように見えても、JavaScriptの機能を備えていることです。つまり、変数を割り当てて、属性でそれらを参照できます。属性を参照するには、引用符ではなく中かっこ{}で囲みます。

テキストエディタで、属性を参照するために次の強調表示された行を追加します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
     <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

このコードでは、returnステートメントの上にgreetingという変数を"greeting"の値で作成し、その変数をid属性で参照しました。 <h1>タグ。

ファイルを保存して終了します。ページは同じですが、idタグが付いています。

これまで、いくつかの要素を単独で操作してきましたが、JSXを使用して多くのHTML要素を追加し、それらをネストして複雑なページを作成することもできます。

これを示すために、絵文字のリストを含むページを作成します。これらの絵文字は<button>要素でラップされます。絵文字をクリックすると、CLDRの短縮名が表示されます。

開始するには、ページにさらにいくつかの要素を追加する必要があります。テキストエディタでsrc/App.jsを開きます。このステップの間は開いたままにします。

nano src/App.js

まず、次の強調表示された行を追加して、絵文字のリストを追加します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
            <button>
              <span role="img" aria-label="grinning face" id="grinning face">😀</span>
            </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

ここでは、絵文字のリストを保持するための<ul>タグを作成しました。各絵文字は個別の<li>要素にあり、<button>要素で囲まれています。次のステップでは、このボタンにイベントを追加します。

また、絵文字を<span>タグで囲みました。このタグにはさらにいくつかの属性があります。各spanには、role属性がimgロールに設定されています。これは、要素が画像のように機能していることをユーザー補助ソフトウェアに通知します。さらに、各<span>には、 aria-label属性とid属性があり、絵文字の名前が付いています。 aria-labelは、スクリーンリーダーを使用している訪問者に何が表示されているかを通知します。次のステップでイベントを書き込むときは、idを使用します。

この方法でコードを記述する場合は、セマンティック要素を使用します。これにより、ページにアクセスしやすくなり、スクリーンリーダーで簡単に解析できるようになります。

ファイルを保存して終了します。ブラウザが更新され、次のように表示されます。

次に、少しスタイリングを追加します。テキストエディタでCSSコードを開きます。

nano src/App.css

次の強調表示されたコードを追加して、フォントサイズを大きくしながら、ボタンのデフォルトの背景と境界線を削除します。

jsx-tutorial / src / App.css

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    font-size: 2em;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

ul {
    display: flex;
    padding: 0;
}

li {
    margin: 0 20px;
    list-style: none;
    padding: 0;
}

このコードでは、font-size、border、およびその他のパラメーターを使用して、ボタンの外観を調整し、フォントを変更しました。また、リストスタイルを削除し、display: flexを<ul>要素に追加して水平にしました。

CSSファイルを保存して閉じます。ブラウザが更新され、次のように表示されます。

これで、通常のHTMLのように見えるいくつかのJSX要素を操作できました。クラス、ID、およびariaタグを追加し、データを文字列および変数として処理しました。ただし、Reactは属性を使用して、要素がユーザーイベントにどのように応答するかを定義します。次のステップでは、ボタンにイベントを追加して、ページをインタラクティブにします。

ステップ3—要素にイベントを追加する

このステップでは、特別な属性を使用して要素にイベントを追加し、ボタン要素のクリックイベントをキャプチャします。イベントから情報をキャプチャして別のアクションをディスパッチする方法、またはファイルのスコープ内の他の情報を使用する方法を学習します。

情報を含む基本的なページができたので、次にいくつかのイベントを追加します。 HTML要素に追加できるイベントハンドラーはたくさんあります。 Reactを使用すると、これらすべてにアクセスできます。 JavaScriptコードはマークアップと結合されているため、コードを適切に整理しながら、イベントをすばやく追加できます。

開始するには、onclickイベントハンドラーを追加します。これにより、イベントリスナーをアタッチするのではなく、JavaScriptコードを要素に直接追加できます。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={event => alert(event.target.id)}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

これはJSXなので、キャメルケースonclick、つまりonClickとして追加しました。このonClick属性は、無名関数を使用して、クリックされたアイテムに関する情報を取得します。

クリックされたボタンからイベントを取得する匿名の矢印関数を追加しました。イベントには、<span>要素であるターゲットが含まれます。必要な情報はid属性にあり、event.target.idでアクセスできます。 alert（）関数を使用してアラートをトリガーできます。

ファイルを保存します。ブラウザで絵文字の1つをクリックすると、その名前のアラートが表示されます。

関数を1回宣言し、それを各onClickアクションに渡すことで、重複を減らすことができます。関数は入力と出力以外に依存しないため、メインコンポーネント関数の外部で宣言できます。つまり、関数はコンポーネントのスコープにアクセスする必要はありません。それらを分離しておくことの利点は、コンポーネント関数がわずかに短く、必要に応じて後で関数を別のファイルに移動できることです。

テキストエディタで、イベントを受け取り、IDを使用してalert()関数を呼び出すdisplayEmojiNameという関数を作成します。次に、関数を各onClick属性に渡します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={displayEmojiName}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={displayEmojiName}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={displayEmojiName}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

ファイルを保存します。ブラウザで絵文字をクリックすると、同じアラートが表示されます。

このステップでは、各要素にイベントを追加しました。また、JSXが要素イベントにわずかに異なる名前を使用する方法を確認し、関数を取得していくつかの要素で再利用することにより、再利用可能なコードを書き始めました。次のステップでは、各要素を手動で記述するのではなく、JSX要素を返す再利用可能な関数を記述します。これにより、重複がさらに減少します。

ステップ4—データをマッピングして要素を作成する

このステップでは、JSXを単純なマークアップとして使用するだけではありません。これをJavaScriptと組み合わせて、コードを減らして読みやすさを向上させる動的なマークアップを作成する方法を学びます。コードを配列にリファクタリングし、ループしてHTML要素を作成します。

JSXは、HTMLのような構文に制限されません。また、マークアップでJavaScriptを直接使用することもできます。関数を属性に渡すことで、これをもう少し試しました。また、変数を使用してデータを再利用しました。次に、標準のJavaScriptコードを使用してデータから直接JSXを作成します。

テキストエディタで、src/App.jsファイルに絵文字データの配列を作成する必要があります。ファイルを閉じた場合は、ファイルを再度開きます。

nano src/App.js

絵文字と絵文字名を持つオブジェクトを含む配列を追加します。絵文字は引用符で囲む必要があることに注意してください。 App関数の上に次の配列を作成します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: "😀",
    name: "grinning face"
  },
  {
    emoji: "🎉",
    name: "party popper"
  },
  {
    emoji: "💃",
    name: "woman dancing"
  }
];

function App() {
...
}

export default App;

これでデータができたので、それをループできます。 JSX内でJavaScriptを使用するには、JavaScriptを中括弧{}で囲む必要があります。これは、属性に関数を追加した場合と同じです。

Reactコンポーネントを作成するには、データをJSX要素に変換する必要があります。これを行うには、データをマッピングしてJSX要素を返します。コードを書くときに覚えておく必要のあることがいくつかあります。

まず、アイテムのグループをコンテナ<div>で囲む必要があります。次に、すべてのアイテムにはkeyという特別なプロパティが必要です。 keyは、Reactが要素を追跡するために使用できる一意のデータである必要があります。これにより、コンポーネントを更新するタイミングを知ることができます。キーは内部目的のみであるため、コンパイルされたHTMLから削除されます。ループを操作するときはいつでも、キーとして単純な文字列を追加する必要があります。

これは、名前のリストを含む<div>にマップする単純化された例です。

...
const names = [
    "Atul Gawande",
    "Stan Sakai",
    "Barry Lopez"
];

return(
    <div>
        {names.map(name => <div key={name}>{name}</div>)}
    </div>
)
...

結果のHTMLは次のようになります。

...
<div>
    <div>Atul Gawande</div>
    <div>Stan Sakai</div>
    <div>Barry Lopez</div>
</div>
...

絵文字リストの変換も同様です。 <ul>がコンテナになります。データをマッピングし、絵文字の短い名前のキーを使用して<li>を返します。 <button>および<span>タグのハードコードされたデータを、ループからの情報に置き換えます。

テキストエディタで、次を追加します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

コードでは、<ul>タグのemojis配列にマップし、<li>を返しました。各<li>では、key小道具として絵文字名を使用しました。ボタンは通常と同じ機能になります。 <span>要素で、aria-labelとidをnameに置き換えます。 <span>タグの内容は絵文字である必要があります。

ファイルを保存します。ウィンドウが更新され、データが表示されます。生成されたHTMLにキーが存在しないことに注意してください。

JSXを標準のJavaScriptと組み合わせると、コンテンツを動的に作成するための多くのツールが提供され、必要な標準のJavaScriptを使用できます。この手順では、ハードコードされたJSXを配列とループに置き換えて、HTMLを動的に作成しました。次のステップでは、短絡を使用して条件付きで情報を表示します。

ステップ5—短絡した要素を条件付きで表示する

このステップでは、短絡を使用して、特定のHTML要素を条件付きで表示します。これにより、追加情報に基づいてHTMLを非表示または表示できるコンポーネントを作成できるため、コンポーネントは複数の状況を柔軟に処理できます。

情報を表示するコンポーネントが必要な場合と、表示しない場合があります。たとえば、特定のケースが当てはまる場合にのみユーザーにアラートメッセージを表示したい場合や、通常のユーザーには表示したくない管理者のアカウント情報を表示したい場合があります。

これを行うには、短い循環を使用します。これは、条件付きを使用することを意味し、最初の部分が真実である場合、2番目の部分の情報を返します。

これが例です。ユーザーがログインしている場合にのみボタンを表示したい場合は、要素を中括弧で囲み、前に条件を追加します。

{isLoggedIn && <button>Log Out</button>}

この例では、&&演算子を使用しています。この演算子は、すべてが真である場合に最後の値を返します。それ以外の場合は、falseを返します。これにより、Reactは追加のマークアップを返さないようになります。 isLoggedInが正しければ、Reactはボタンを表示します。 isLoggedInが偽物の場合、ボタンは表示されません。

これを試すには、次の強調表示された行を追加します。

jsx-tutorial / src / App.js

import React from 'react';
import './App.css';

...

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <ul>
...
      </ul>
    </div>
  )
}

export default App;

テキストエディタで、値がfalse.のdisplayActionという変数を作成し、<p>タグを中括弧で囲みました。中括弧の先頭で、displayAction &&を追加して条件を作成しました。

ファイルを保存すると、ブラウザに要素が表示されなくなります。重要なのは、生成されたHTMLにも表示されないことです。これは、CSSで要素を非表示にすることと同じではありません。最終的なマークアップにはまったく存在しません。

現在、displayActionの値はハードコーディングされていますが、その値を state として保存したり、親コンポーネントから小道具として渡すこともできます。

このステップでは、要素を条件付きで表示する方法を学びました。これにより、他の情報に基づいてカスタマイズ可能なコンポーネントを作成できます。

結論

この時点で、JSXを使用してカスタムアプリケーションを作成しました。 HTMLのような要素をコンポーネントに追加する方法、それらの要素にスタイルを追加する方法、属性を渡してセマンティックでアクセス可能なマークアップを作成する方法、およびコンポーネントにイベントを追加する方法を学習しました。次に、JavaScriptをJSXに混合して、重複するコードを減らし、条件付きで要素を表示および非表示にしました。

これは、将来のコンポーネントを作成するために必要な基礎です。 JavaScriptとHTMLの組み合わせを使用して、柔軟性があり、アプリケーションの成長と変更を可能にする動的コンポーネントを構築できます。

Reactの詳細については、Reactトピックページをご覧ください。