JSXを理解する

週明けからReactを業務でさわることになったので、急遽完全に理解することに！

まず、JSXについて！

Q. JSXってなんの略や？

IT用語は、何の略か知ればそれがなんなのか理解できるってばっちゃが言ってた👵🏻

JSXは、「Javascript XML」の略で、JavaScriptの構文の拡張です。

ほう🤔
つまり、JSでもHTMLみたいに構造化して見た目を記述できるってことか！！！

JSXの例

さっそくJSXってどんなのか見てみる。

const element = (
  <strong className="muscle">
    鈴木 雅様！！！！
  </strong>
);

( ´-` ).｡oO (セマンティックなHTMLが書けた💪)

JSX内でJSの式を使う

中括弧に囲むと、あらゆるJavascriptの式を使えます。
'macho' + '29'や、 buildMuscle(protein)など！

const cheering = 'ハムケツ切れてる！！！！！！';
const element = (
  <strong className="muscle">
    鈴木 雅様！！！！{cheering}
  </strong>
);

JSXはJSに変換される

JSのファイルに書いてるんだから、このままじゃ実行できないよね。
公式ドキュメントにもこう書いてる。

JSX とは、つまるところ React.createElement(component, props, ...children) の糖衣構文にすぎません。

JSXがどのようにJSのコードにコンパイルされるか、オンラインBabelコンパイラで試してみる。

const cheering = 'ハムケツ切れてる！！！！！！';
const element = (
  <strong className="muscle">
    鈴木 雅様！！！！{cheering}
  </strong>
);

↓ Babelがコンパイル

const cheering = "ハムケツ切れてる！！！！！！";
const element = React.createElement(
  "strong",
  {
    className: "muscle"
  },
  "鈴木 雅様！！！！",
  cheering
);

↓ React.createElement()が以下のオブジェクトを作成

const element = {
  type: 'strong',
  key: null,
  ref: null,
  props: {
    className: 'muscle',
    children: ["鈴木 雅様！！！！", "ハムケツ切れてる！！！！！！"]
  }
};

このオブジェクトはReact要素と呼ばれる。 React要素をReactDOM.render()に渡すことで、ReactはDOMをレンダリングする。

const cheering = 'ハムケツ切れてる！！！！！！';
const element = (
  <strong className="muscle">
    鈴木 雅様！！！！{cheering}
  </strong>
);
ReactDOM.render(element, document.getElementById('root'));

JSXでは自分で定義したコンポーネントのReact要素も作成できる

例

const element = <Muscle />

JSXタグの先頭が、 大文字で始まる型 → 自分で定義したコンポーネント 小文字で始まる型 → <div>や<span>のような組み込みのコンポーネント

組み込みのコンポーネントの場合、React要素の typeは、 'div'や'span'などの文字列になるが、 自分で定義したコンポーネント場合、参照が入る。 ↓ React要素

const element = {
  type: class Muscle,
  key: null,
  ref: null,
  props: {}
};

細かいことは後で回収するので、いったんここまで！