波括弧（カーリーブレース）
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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。