JSXとReact要素について整理しました

JSXとReact要素の定義についてざっくりと整理してみました。

JSXとは

JSXはReactでよく見るHTMLタグのようなもの。

<h1 className="greeting">Hello, world!</h1>

React要素とは

JSXから生成されるJavaScriptのオブジェクト。
Reactはこのオブジェクトを読み取りDOMを構築する。

上のJSXからはこのようなオブジェクトが生成される。

{
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}

JSXからReact要素が生成される過程

1. JSXはBabelによりReact.createElement()の呼び出しへとコンパイルされる。

2. React.createElement()はオブジェクトを生成する。

このオブジェクトをReact要素と呼ぶ。
Reactはこのオブジェクトを読み取りDOMをレンダーする。

このようにJSXはコンパイル後にReact要素と呼ばれるJavaScriptのオブジェクトになるので、

• 変数に代入したり、
• 関数の返り値にしたり、
• propsとして子コンポーネントに渡したり、

することができる。

最後に

とりあえずJSXとReact要素は互いにコンパイル前後で呼び名が変わったもの、程度に理解しておけばよさそう。