Reactガイドを読んでいくその54
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
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はグローバル変数としてすでにスコープに入っている。
今日はここまで。