【React初級編】Reactで使用されるJSXのトランスパイルとは

今回はReactの文法で用いられるJSXについて解説したいと思います。JSXはHTML扱ったことがある方であれば簡単に理解、記述することが可能です。この機会に簡単におさらいしておきましょう。

React同様、JSXもFacebook社が開発したものになります。

この記事の内容

JSXとは

JSXとは「JavaScript XML」の略でJavaScriptを拡張した言語です。JSXはReactを用いてHTMLを出力するための言語で、一言で言うとReactのマークアップ言語です。

JSXのメリットとしては以下の2つが挙げられます。

JSXはReact内部でトランスパイルという処理が施され、JavaScriptに変換されます。

JSXのトランスパイルは暗黙的にBabelが行っています。参考：Babel

ではどのようにJSXがJavaScriptに変換されるか見ていきましょう。

以下の記述はJSXで書かれたコードになります。

function App() {
  return <h1>Hello World</h1>;
}

export default App;

これがトランスパイルされJavaScriptに変換されると以下のようなコードになります。

import React, { Component } from "react";

function App() {
  return React.createElement("h1", null, "Hello, World!");
}

export default App;

JSXでコーディングするか、JavaScriptでコーディングするか、どちらが容易であるかは一目瞭然ですね。これがJSXが直感的であるということになります。

JSXとJavaScript、両方記載することも可能です。

JavaScriptの定数を定義するconstを用いてHello Worldを表示させてみます。

function App() {
  const greeting = "Hello World";
  const dom = <h1>{greeting}</h1>;
  return dom;
}

export default App;

このようにJSXとJavaScriptを併用できることも覚えておきましょう。

今回はReactの文法で用いられるJSXについて解説しました。上記のポイントを押さえながら開発に取り組んでいきましょう。