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!'
  }
}

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

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

することができる。

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