{ }で値を埋め込む

ここまでのコンポーネントには、実は物足りない点がありました。返すタグの中身が全部決め打ちだったことです。名前も、紹介文も、書いた文字がそのまま出るだけ。それなら普通のHTMLと変わりません。

Reactが本領を発揮するのはここからです。JavaScriptの値を、タグの中に埋め込めます。

波かっこ { } は「JavaScriptへの窓」

const Greeting = () => {
  const userName = "太郎";
  return <h1>こんにちは、{userName}さん</h1>;
};

表示は「こんにちは、太郎さん」。JSXの中に { } を書くと、そこだけJavaScriptの世界に戻ります。窓を開けて、変数の中身を流し込むイメージです。

コンポーネントは関数なので、returnの前に普通のJavaScriptが書けます。変数を用意して、{ } の窓から差し込む——この流れがReactの基本姿勢です。

窓の中では計算もできる

{ } に入れられるのは変数だけではありません。値になる式なら何でも入ります。

const PriceTag = () => {
  const price = 4980;
  return <p>税込 {price * 1.1} 円</p>;
};

計算式、関数の呼び出し、テンプレート文字列——「実行すると1つの値になるもの」はすべてOKです。チャプター1で作った関数を呼んで、結果を埋め込むこともできます。