動的データを表示する

5 分

コンポーネントを使用すると、アプリケーションを複数の論理的な部分に分割できます。このユニットでは、レシピのタイトル用のコンポーネントを作成することで、この機能について説明します。コンポーネントを作成し、それらを App にインポートします。また、データを動的に表示する方法についても説明します。

コンポーネントの内部に動的なデータを表示するには、{ } の構文を使用します ("ハンドル" と呼ばれることもあります)。この構文スタイルは、HTML テンプレートツールでは一般的なものです。これらのハンドルを使用して、効果的に JavaScript モードに切り替え、ほぼすべての有効な JavaScript を実行できます。

たとえば、現在の時刻を表示するには、次のコードを使用します。

<div>{ Date.now() }</div>

RecipeTitle コンポーネントを作成する

この例では、レシピのタイトル用のコンポーネントを作成します。 React で動的データを表示する方法を示すため、タイトルには JavaScript 変数を使用します。後のユニットでは、より複雑なデータを操作する方法を示します。

src フォルダーに新しいファイルを作成します。名前を RecipeTitle.jsx にします。

RecipeTitle.jsx に次のコードを追加します。

import React from 'react';

function RecipeTitle() {
    const title = 'Mashed potatoes';
    return (
        <h2>{ title }</h2>
    )
};
export default RecipeTitle;

コードを調べる

title という名前の定数を作成していることに注意してください。その後、ハンドル構文 { } を使用して、<h2> 要素の内部に title の値を表示することを React に伝えます。 JSX のこの機能を使用すると、JavaScript と HTML を混在させることができます。

RecipeTitle コンポーネントを使用する

RecipeTitle を App に追加することにより、それをアプリケーションに表示しましょう。

src/App.jsx を開きます。
import React from 'react'; という行 (2 行目のはずです) の下に、次のコードを追加します。
```
import RecipeTitle from './RecipeTitle'
```
<h1>Recipe Manager</h1> という構文の下に次のコードを追加することで、RecipeTitle を HTML 要素として使用します。
```
<RecipeTitle />
```

コードを調べる

src/App.jsx ファイルの内容全体を次に示します。

import React from 'react';
import RecipeTitle from './RecipeTitle'

function App() {
    return (
        <article>
            <h1>Recipe Manager</h1>
            <RecipeTitle />
        </article>
    )
}

export default App;

HTML 要素のように <App /> を使用したのと同じようにして、RecipeTitle を使用できます。この例では、React アプリケーションの作成の本質、つまりコンポーネントを作成して使用することによりアプリケーションを構築する方法を示します。

結果を見る

すべてのファイルを保存します。ブラウザーが自動的に更新され、更新されたページが表示されます。ページの上部に Mashed potatoes という見出しが表示されます。

Screenshot of a webpage that displays a recipe title.

続行

動的データを表示する