react

ではReactの仕組みを理解したところでReactのテンプレートシンタックスのJSXを理解していきましょう。 JSXはこのように書くことができます。ストリングでもないのでクオートで囲う必要もありません。 JSXを使わない方法もありますが、Reactを使う上ではJSXを是非使っていきたいです。 JSXはReactのエレメントを作成して、そこからDOMに変換されるようになります。 JSXを使う理由 Reactはイベントへのリスポンスや状態の変化を感知してユーザー側に表示するデータをリアクティブに作成することができます。 Reactの強みでもあるのがこのロジックとマークアップ（HTML）を同じファイルに記述できることです。ファイルが別々でないので一目で見ただけで何がユーザー側に表示されるか理解しやすいです。 この概念をコンポーネントと呼びます。 JSXに式を埋め込む では、次の例を見てみましょう。 nameという変数を宣言し、中括弧｛｝に入れることでJSX内で使用することができます。 この方法を使うことで、計算式の２＋２やオブジェクト（例：user.name）を使うことができます。 JSXは長く記載する場合もあるので()で囲むようにするとよいです。 JSX自体を式として使う 先ほどはJSXに変数を入れる方法を紹介しました。 さらに、JSX自体も式としてif文やforループの文で使用することができます。 ReactがJSXを読み込む際にコンパイルされ普通のJavaSxriptに変換されるようになります。 JSXで属性を指定する 文字列リテラルを属性として指定するために引用符（クオーテーション）を使用できます。 これでHTMLの属性（attribute）にストリングの値を入れてあげることができます。 また、属性に JavaScript 式を埋め込むために中括弧を使用することもできます。これでダイナミックなデータを流し込むことができますね。 注意しておきたいこと JSXはHTMLよりもJavaScriptに近いものになります。ですのでHTMLの属性にclassを入れたい場合はJavaScriptのclassと干渉することを防ぐためにclassNameを使うことになります。 JSXで子要素を指定 タグが空の場合は、XMLのように/>でタグを閉じることができます。 もちろんJSXのタグに子要素（HTMLのタグ、エレメント）を入れることができます。 JSX はインジェクション攻撃を防ぐ JSX にユーザの入力を埋め込むことは安全です： React　DOMはJSXに埋め込まれた値をレンダー前にエスケープします。 →エスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。 →特殊文字に指定されている文字は、割り当てられている記号を記述することで表示できます。 →例えば、<は<であったり、©は©など、特殊文字には必ず該当する記号が割り当たっています。 このため、XSS攻撃の防止になります。 JSXはオブジェクトの表現になる ReactがJSXをコンパイルする流れを見てみましょう。 下記の二つの例は同じものになります。 ①JSXの例 ②JSXを使わない例 上記のコードをReactのcreateElementメソッドで下記の様なオブジェクトを作成することになります。 このようなオブジェクトはReact要素（エレメント）と呼びます。Reactがこれらのオブジェクトを読み取り、必要に応じてDOMを構築し常にリアクティブなデータをユーザーに’届けるようになります。 では、次回は要素のレンダーについて学んでいきましょう。