JSXの基礎知識と文法

JSXとは？

• JavaScript内でHTMLを簡単に記述するための言語
• JavaScriptの拡張言語
• Facebookが開発
• React公式ドキュメントはほぼJSXで記述されている
• Reactでは業界標準

なぜJSXを使う？

通常のJavaScriptでHTMLを記述（DOM操作）

const fuga = "<h1>Hello, World!</h1>"
document.getElementById('hoge').innerHTML = fuga;

量が増えると。。

const fuga = "<h1>Hello, World!</h1>"
const foo = "<h2>React Commentary</h2>"
const bar = "Hi, I'm Billy Gibbons."
document.getElementById('hoge').innerHTML = fuga;
document.getElementById('foo').innerHTML = foo;
document.getElementById('bar').innerHTML = bar;

JSXを使うと。。

return (
  <React.fragment>
    <div id="hoge">
      <h1>Hello, World!</h1>
    </div>
    <div id="foo">
      <h2>React Commentary</h2>
    </div>
    <p id="foo">Hi, I'm Billy Gibbons.</p>
  </React.fragment>
)

可読性が高い！

ただJSXは実際のところJavaScriptではない。
JSXの構文をブラウザは理解できない。

そこでトランスパイラが必要。

トランスパイラ

「翻訳」のような役割。
JSX → JavaScript(ES6) → JavaScript(ES5)

ReactのトランスパイラはBabel

トランスパイラを主たる実装として開発されている言語の例
CoffeeScript、TypeScript...etc

もしJSXがなかったら。。

React.createElementを使う

React.createElement(
  "h1",
  null,
  "Hello, World!"
)

JSXを使用して記述したJSをBabelでトランスパイルするとReact.createElementを使用した形に変換される

JSXの基本文法

1.Reactパッケージのインストールが必要

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

2.HTMLとほぼ同じ文法（ただclassはclassNameに）

const App = () => {
  return (
    <div id="hoge" className="fuga">
      <h1>Hello, World!</h1>
    </div>
  );
};

3.{}内に変数や関数を埋め込める

const foo = "<h1>Hello, World!</h1>"
const App = () => {
  return (
    <div id="hoge" className="fuga">
      {foo}
    </div>
  );
};

4.変数名などは全てキャメルケースで記述する

const fooBar = "<h1>Hello, World!</h1>"
const App = () => {
  return (
    <div id="hoge" className="fuga">
      {fooBar}
    </div>
  );
};

5.空要素は閉じる

const App = () => {
  return (
    <div id="hoge" className="fuga">
      <input type="text" id="blankElement" />
      <img src="/assets/icon/icon.png" />
    </div>
  );
};