波括弧内での演算
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 7/42。
波括弧は変数だけを保持するわけではありません。あらゆるJavaScript式が機能します。計算、文字列メソッド、関数呼び出しなど：
const price = 6;
const quantity = 5;
return <p>Total: {price * quantity}</p>;
// 表示: Total: 30Reactは式を評価し、その結果をレンダリングします。1つの要素内でテキストと波括弧を自由に組み合わせることができます。
<p>{quantity} items at {price} each</p>波括弧の中に含めてはならないものが1つあります。それは文（statement）です。if や for などは式ではありません。これらに対応する JSX に適した代替え手段については、後の章で説明します。
チャレンジ
初心者小さなレシートを作成します。コンポーネントは price と quantity を定義しています。
id="total"の段落がTotal: 30を表示するようにします。ただし、30 と直接入力するのではなく、*を使って変数から数値を計算してください。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。