• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React

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/

導入

• https://reactjs.org/docs/introducing-jsx.html

コンポーネント名

• 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)

• BabelはJSXをReact.createElement()の呼び出しへとコンパイルします

  <Element a="b" c={d}>Text</Element>

  React.createElement(Element, {a: 'b', c: d}, 'Text')

return

• 1つのタグで囲われている必要がある
  • divを追加する
  • React/フラグメントを使う

スタイル

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

  style={{
  fontStyle: 'normal'
  }}

属性

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

React/レンダリング

checked/disabled

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

制限

• JSX内でifとかforループは使えない
  • 条件分岐は三項演算子は使える

コメント

• JS内に書く

インジェクション

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

REPL

• https://babeljs.io/repl/

リスト

• Array.map

メモ

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

メモ

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