Reactガイドを読んでいくその53
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
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へどのように変換するかわかる。
おお、確かに例のようになった。
今日はここまで。