React JSXの基礎知識

今回はReactの特徴の一つであるJSXについて解説します。

JSXとは

Javascript内でHTMLを簡単に記述するための言語です。
ほとんどの構文はJavascriptのように記述しますが、HTMLのように記述することもできます。

また、ReactではJSXがデファクトスタンダード（業界標準）であり、Reactを学習する上でJSXの知識は必須と言えます。

トランスパイラ

JSXはJavascriptではありません。ですので、JSXの構文をブラウザは理解することができません。
そこでJSXの構文を理解できるようにする。この変換することをトランスパイラと呼んでいて、翻訳のような役割を果たしています。
例:
　JSX　→　JavaScript(EC6)
有名なトランスパイラ:
Babel, CoffeeScript,TypeScript...etc

JSXの文法

Reactパッケージのインストールが必須であること

qiita.jsx

//.jsxファイル内の先頭にて宣言する
import React from "react"

基本的にはHTMLとほとんど同じ記述であること

ただし、HTMLのclassはclassNameとする必要があり、変数名は全てキャメルケースで書くこと（classNameなど）
空要素は全て閉じなければならないといった違いもあります。
例:

qiita.jsx

<input type="text" id="hoge" />

{}の中に変数や関数を埋め込むことができること

※divタグ内で変数fooが呼び出される。
例:

qiita.jsx

const foo="<h1>React</h1>"
const APP = () => {
 return(
  <div id="hoge" className="hoge">
    {foo}
  </div>
 );
};

最後に

JSXを使うことで、記述量が多くなった時に可読性を向上させることができるためとても使いやすいです。私もReactを学習し始めたばかりなので、同じようにReactを学習されている方のお役に立てれば幸いです。今後も引き続きアウトプットをしていきたいと思っておりますので、よろしくお願い致します。

最後まで読んでいただき、ありがとうございました！