最終更新:2024-02-19 (月) 12:28:02 (53d)  

React/JSX
Top / React / JSX

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

const element = <h1>Hello, world!</h1>;

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

導入

コンポーネント名

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

式の埋め込み

  • const name = 'Josh Perez';
    const element = <h1>Hello, {name}</h1>;
  • どのようなJavaScriptの式もJSX内で中括弧に囲んで記入することができます
    • 関数呼び出しも可能

属性

  • 属性に JavaScript 式を埋め込むために中括弧を使用することもできる
    const element = <img src={user.avatarUrl}></img>;
  • 命名規則はキャメルケース
    • className

デフォルト値

  • true

挙動

  • コンパイルの後、JSX の式は普通の JavaScript の関数呼び出しに変換され、JavaScript オブジェクトへと評価される
  • JSXも式なので変数に代入したり、関数で返したりできる

JSへの変換 (Babel)

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

return

スタイル

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

属性

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

React/レンダリング

checked/disabled

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

制限

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

コメント

  • JS内に書く

インジェクション

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

REPL

リスト

メモ

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

メモ

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