JSX

JSXとは何ですか。

JSX(JavaScript Syntax Extension)は、JavaScriptコードの内部にHTML構文を書き込むJavaScriptの拡張構文です.
JSXは拡張されたJS構文で、React Elementを簡単に生成するために設計されており、UIがどのようなものであるべきかを説明するためにReactと一緒に使用することをお勧めします.JSXはJavaScriptのすべての機能を使用できます.

なぜJSXを使うのか

ReactはJSXを使用する必要はありませんが、多くの開発者がUIを使用するときにJSXを使用すると視覚的に役立ちます.

JSX

const name = "seulhee";
const element =  <h1> Good, {name} </h1>; // JSX

有効なすべてのJavaScript式をJSXの括弧に含めることができます.
JSXも式です.コンパイルが完了すると、JSX式は通常のJavaScript関数呼び出しとなり、JavaScriptオブジェクトとして評価されます.
HTMLタグの要素とは違います.たとえば、classはclassNameになります.forではなくhtmlForを使用する必要があります.
BabelはJSXに対してreactを行います.createElement()呼び出しにコンパイルします.
BabelはJavaScript構文を変換し、JavaScriptコンパイラで作成したJavaScriptコードを使用して他のバージョンのJavaScriptと互換性があります.

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

ReactDOM.render(element, document.getElementById('root'));

バーベルで以下のようにコンパイルします.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
ReactDOM.render(element, document.getElementById('root'));

結果は次のとおりです.

<div id="root">
  <div>Hello, world!</div>
</div>

に感銘を与える

リファレンス

Introducing JSX
JSX in Depth
babelとは何ですか。