- はじめに これまでにJSXとReactの要素のレンダリングを学びました。次はJSX内の式について深く掘り下げていきましょう。JSXは、コード内にJavaScriptの式を埋め込むことができるので、さらにパワフルなツールとなります！GeekとGalの2人のキャラクターを通して、このトピックを探求していきましょう。
JSXに式を埋め込む方法を学びたい？
もちろん！どうやってやるの？
超簡単！JSXコード内でJavaScriptの式を中括弧
{}
で囲むだけよ！
- JSX内の式
例えば、2つの数値の合計を表示したい場合、JSX内に式を直接埋め込むことができます。こんな感じにね：
const a = 5;
const b = 3;
const element = <h1>{a}と{b}の合計は{a + b}だよ！</h1>;
なるほど！だから、中括弧を使ってJSXコード内にJavaScriptの式を挿入するんだ！
その通り！変数、関数、算術演算など、有効なJavaScriptの式であれば何でも使えるわ！
- 面白い式の例
JSXと式を使った面白い例はありますか？
もちろん！JSXと式を使って、馬鹿げた数学の問題を作ってみましょう！
const num1 = 7;
const num2 = 2;
const sillyMath = num1 * num2 - (num1 + num2);
const element = (
<h1>
{num1}かける{num2}から{num1}と{num2}の合計を引くと何？それは{ sillyMath }！🤪
</h1>
);
ハハ、おもしろいね！JSX内の式は素晴らしくて多機能だね！
楽しんでくれてうれしいわ！覚えておいてね、練習が完璧を生むのよ！😄
- おわりに
JSX内に式を埋め込むことは、Reactコンポーネント内にJavaScriptのロジックを含めることができる強力な機能です。JSXコード内で使用するには、有効なJavaScriptの式を中括弧
{}で囲むだけです。JSXが提供する柔軟性を存分に楽しみながら、引き続き探求してください！😃