ReactのJSXって何？？（React初学者向け）

Reactの勉強を始めました

最近Reactの勉強を開始しました🤗
始めた理由としては、新しく始まる開発のフロントエンドでReactが使われているからです。

僕の場合、普段フロントエンドはNuxt.jsを使って開発しているので、書き方の違いを楽しんだり、似ている部分を探しながら勉強しています。

新しい技術を勉強するのは、大変な部分もありますが楽しいですよね。

さて、Reactの勉強を開始してまず最初に「?」となったのが、JSXという存在でした。。
HTML風に書かれているので、HTMLかと思ったら実は全く違ったり、JSXはJavaScript拡張構文であるという、なんとなくのところはわかったのですが、もう少し理解を深めたかったので実際にどういう風に動作しているのかを調べてみました。

JSXをコンソール画面で確認してみる

まず初めにJSXをコンソール画面で確認してみたいと思います。
下記のcodeを、Reactコンポーネント内で書いてコンソールで出力してみます。

<h1>OK!!</h1>

確認してみると、JSXはJavaScriptオブジェクトであることが分かりました。

確認方法

ではJSXがどのような過程を経て、JavaScriptオブジェクトに変換されるのでしょうか？？
結論から言うと、Babelを用いて変換されることになります。

実際にBabelの公式サイトから確認してみましょう。
確認方法は、下記の公式から「Try it Out」をクリック。あとは確認したいHTMLのcodeを左の画面に貼り付けると、右側の画面で確認できます。（※左サイドバーのPRESETSのreactにチェックを入れておくこと）
https://babeljs.io/

それでは、まずは下記のcodeを貼り付けて確認してみましょう。

<h1>Hello</h1>

Babelでの変換結果はこのようになりました。

React.createElement("h1", null, "Hello");

次はもう少し複雑にしてみます。

<div>
  <h1>Hello</h1>
  <h2>React</h2>
</div>

下記のように変換されました。

React.createElement("div", null, 
	React.createElement("h1", null, "Hello"), 
	React.createElement("h2", null, "React"));

それでは、Reactコンポーネント内でこのcodeをコンソールで出力してみます。
すると下記のようにJavaScriptオブジェクトであることが確認できました。

Babelによって変換されたこれらの関数(React.createElement())が実行されることで、JavaScriptオブジェクト(React要素)が生成されていることが分かりますね。

結果からわかること

Babelで実際に動きの確認をしてみて分かったのは、繰り返しになりますがBabelによって変換された関数 (React.createElement()) がJavaScriptオブジェクト （React要素） を生成していることが分かりました。
またJSXを書くということは、React.createElement()を書いていることと同じであるということも分かりましたね。

ただJSXのおかげで、React.createElement()を何回もベタ書きせずに済むので、codeをスッキリさせることができますね👍