Reactガイドを読んでいくその53

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

JSX を深く理解する

ReactにおけるJSXとはつまるところReact.createElement(component, props, ...children)の糖衣構文に過ぎない。
例えば

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

といったコードがあった場合

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

のようにコンパイルされる。
子要素を持たない場合には時刻ローズタグを利用することもでき、以下のようにかいてある場合

<div className="sidebar" />

以下のようにコンパイルされる。

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

オンラインBabelコンパイラを使えば具体的にJSXがJavaScriptへどのように変換するかわかる。

おお、確かに例のようになった。
f:id:torikizi:20191125170150p:plain

今日はここまで。