React入門#2 〜JSXについて〜 #React

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ JSX、トランスパイラ、React.create.Elementについて
・ Reactの基本文法について

■ Reactに関する過去の記事はこちら
・ React入門#1 〜Reactの基礎知識〜

JSX

Facebook社が開発した、JavaScript内でHTMLを簡潔に記述する為のJavaScriptの拡張言語です。
JSXはHTMLの様に書けるので、可読性を高める為に使われます。
Reactの公式ドキュメントはほぼJSXで記述されており、Reactでは業界水準となっています。

トランスパイラ

JSXの構文をブラウザが理解できる様に変換する翻訳の様な役割のことです。

○ 例
・ JSX → JavaScript(ES6)
・ JavaScript(ES6) → JavaScript(ES5)

○ 代表的なトランスパイラ
・ Babel、Coffee Script、Type Script...etc

React.createElement

JSXが無い場合に使いますが、HTMLを書いている感覚ではないので分かりにくいです。
JSXで記述した構文をトランスパイルし、出力したjsファイルを見ると、React.CreateElementを使った内容になります。

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

JSXの基本文法①

Reactパッケージのインストールが必須ですが、まず.jsxファイル内の先頭で宣言します。


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

JSXの基本文法②

HTMLとほぼ同じ記述です。（classはclassNameと記述します）

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

JSXの基本文法③

{}内に変数や関数を埋め込むことができます。
render()内の{}の中であれば、JavaScriptで宣言したfooという変数を使えます。

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

JSXの基本文法④

変数名などは全てキャメルケースで記述します。

・キャメルケース

単語の区切りを大文字にします。（ラクダのコブみたいなイメージ）

・ケバブケース

単語の区切りにハイフンを使います。JSXは結局の所、JavaScriptなのでケバブケースを使うことができません。

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

JSXの基本文法⑤

空要素(inputやimgタグ）は閉じタグを使わないと、JSXでは正しく認識しません。

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

次の記事はこちら

React入門#3 〜create-react-appで環境構築〜

React入門#2 〜JSXについて〜