JSX

JSX はJavaScript の拡張版

import React from 'react';
import ReactDOM from 'react-dom';

const greeting = <h1>Hi!</h1>;

ReactDOM.render(
  greeting,
  document.getElementById('root')
);
変数に対して、いきなりタグをセットするような書き方になっていますが、これが JSX です。
次のように複数個の要素を作成することもできます。
const greeting =
  <div>
    <h1>Hi!</h1>
    <h2>Bye!</h2>
  </div>;
ただし、ここで全体を div で囲っているように、全体を包む要素は必要です。
はじめは奇妙な書き方に見えますが、{} で式を評価したり、
プロパティをセットする等できて大変便利です。
たくさんの React.createElement をタイピングするのにうんざりした場合、
一般的なパターンの 1 つは以下のショートハンドを割り当てることです。
const e = React.createElement;

ReactDOM.render(
  e('h1', null, 'Hi!'),
  document.getElementById('root')
);
このショートハンドを React.createElement に使用すれば、

JSX なしで React を使うのにとても便利です。
React とは？
React はユーザインターフェイスを構築するための、

宣言型で効率的で柔軟な JavaScript ライブラリです。
複雑な UI を、「コンポーネント」と呼ばれる

小さく独立した部品から組み立てることができます。
React にはいくつか異なる種類のコンポーネントがあるのですが、
ここでは React.Component のサブクラスから始めましょう：

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: 

この妙な XML のようなタグについてはすぐ後で説明します。

コンポーネントは、React に何を描画したいかを伝えます。
データが変更されると、React はコンポーネントを

効率よく更新して再レンダーします。
ここで ShoppingList は React コンポーネントクラス、

もしくは React コンポーネント型です。
コンポーネントは props（“properties” の略）と呼ばれるパラメータを受け取り、

render メソッドを通じて、表示するビューの階層構造を返します。
render メソッドが返すのはあなたが画面上に表示したいものの説明書きです。

React はその説明書きを受け取って画面に描画します。
具体的には、render は、描画すべきものの軽量な記述形式である React 要素というものを返します。
たいていの React 開発者は、これらの構造を簡単に記述できる “JSX” と呼ばれる構文を使用しています。
 という構文は、

ビルド時に React.createElement('div') に変換されます。

上記の例は以下のコードと同等です：

return React.createElement('div', {className: 'shopping-list'},

  React.createElement('h1', /* ... h1 children ... */),

  React.createElement('ul', /* ... ul children ... */)

);
出典　https://react.keicode.com/basics/jsx.php

出典　https://ja.reactjs.org/docs/react-without-jsx.html