Reactガイドを読んでいくその54

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

JSX を深く理解する

React 要素の型を指定する

JSXのタグの先頭部分はReact要素の型を決定している。
大文字で始まる型はReactコンポーネントを参照していることを示している。
こういったJSXタグはコンパイルを経て変数を直接参照するようになる。
例えばJSXの<FOO />式を参照する場合、Fooがスコープになければならない。

React がスコープ内にあること

JSXはReact.createElementの呼び出しへとコンパイルされるため、Reactライブラリは常にJSXコードのスコープ内にある必要がある。

このコードの例ではReactもCustomButtonもJavaScriptから直接参照はされていない。
しかし両方ともインポートされている必要がある。

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

JavaScriptのバンドルツールを使わずに<script>タグからReactを読み込んでいる場合はReactはグローバル変数としてすでにスコープに入っている。

今日はここまで。