JSXに値を埋め込む ― 波かっこ

導入

JSX の強みは、JavaScript の値や式をそのまま埋め込めることです。埋め込みたい場所を波かっこ { } で囲みます。

説明

{ } の中には変数でも計算式でも書けます。

function App() {
  const name = "React";
  const year = 2013;
  return (
    <div>
      <h1>こんにちは、{name} さん</h1>
      <p>登場したのは {year} 年です。</p>
      <p>1 + 2 = {1 + 2}</p>
    </div>
  );
}

• {name} … 変数の中身が表示されます。
• {1 + 2} … 式が評価され、結果の 3 が表示されます。
• 文字列をそのまま出したいときはクォートは不要です（<p>ふつうの文字</p>）。

属性にも値を埋め込めます。その場合も波かっこを使います。

function App() {
  const url = "https://ja.react.dev/";
  return <a href={url}>Reactの公式サイト</a>;
}

やってみよう

name を自分の名前に変えて、{ } の中で簡単な掛け算（例 { 12 * 8 }）を表示してみましょう。