Help us understand the problem. What is going on with this article?

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

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

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として子コンポーネントに渡したり、

することができる。

最後に

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

manten120
Youtube Live連動webアプリを作っている自称エセ個人開発者
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away