最終更新:2022-08-04 (木) 18:26:08 (4d)  

React/JSX
Top / React / JSX

a XML-like syntax extension to ECMAScript without any defined semantics.

https://facebook.github.io/jsx/

JSへの変換 (Babel)

  • BabelJSXReact.createElement()の呼び出しへとコンパイルします
    <Element a="b" c={d}>Text</Element>
    React.createElement(Element, {a: 'b', c: d}, 'Text')

導入

コンポーネント名

  • Reactは小文字で始まるコンポーネントをDOMタグ(HTMLタグ)として扱います

構文

  • {}文字列以外を属性に代入
  • どのようなJavaScriptの式もJSX内で中括弧に囲んで記入することができます

return

スタイル

  • 1つ目のカッコはJS記述の開始、2つ目はオブジェクトの{}
    style={{
    fontStyle: 'normal'
    }}

属性

  • HTMLとの違いは属性の与え方
  • htmlFor?
  • className?

checked/disabled

  • HTMLでは値を具体的に設定しても、設定しないでもtrueになるが、JSXでは値にfalseを指定することが可能

制限

  • JSX内でifとかforループは使えない

コメント

  • JS内に書く

インジェクション

  • デフォルトでは、React DOM は JSX に埋め込まれた値をレンダー前にエスケープします

REPL

リスト

メモ

  • Reactは通常JSX(Facebookが開発した独自タグの技術)を使用するため、プリコンパイルが必要ですが、開発者は意識する必要はありません。JSXTransfomer?が自動でやってくれます。

メモ

  • classの代わりにclassName?
  • label?のforの代わりにhtmlFor?