波括弧（カーリーブレース）
CoddyのReactジャーニー「基本概念」セクションの一部。レッスン 6/42。
JSXはJavaScriptを組み合わせると面白くなります。波かっこ { }を使うと、マークアップからJavaScriptに戻る窓が開きます：
const name = 'Ada';
return <p>Hello, {name}!</p>;波括弧の中はすべて JavaScript として評価され、その結果がページに表示されます。ここでは、段落に Hello, Ada! が表示されます。
波括弧がないと、JSXは入力した内容をプレーンテキストとして扱います。<p>Hello, name!</p>では、単語nameがそのまま表示されます。おそらく意図した結果ではないでしょう。
これは、最もよく使われるJSXの要素です。データを変数として定義し、それを{ }を使ってマークアップに埋め込みます。
チャレンジ
初心者コンポーネントでは const name = 'Ada' と定義されていますが、挨拶には文字どおり name という単語が表示されています。
- 変数を使うように段落を修正してください。表示結果は
Hello, Ada!となるはずです。 - 変数自体は変更しないでください。
自分で試してみよう
<!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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。