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

これは

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

ガイドのリンク

ja.reactjs.org

JSX を深く理解する

JSX 型にドット記法を使用する

JSXの中にはドット記法を使うことによってReactコンポーネントを参照することもできる。単一モジュールがたくさんのReactコンポーネントをエクスポートしているような場合に便利。

ユーザー定義のコンポーネントの名前は大文字で始めること

組み込みコンポーネントは小文字からスタートしている。
例：<div>,<span>
こういった組み込みコンポーネントはコンパイルされるときにdivやspanといった文字列に変換されてReact.createElementに渡される。

一方、<Foo />のように大文字で始まる型はReact.createElement(Foo)ようにコンパイルされて、JavaScriptファイルにおいて定義あるいはインポートされたコンポーネントを参照する。なのでコンポーネントの命名を大文字からスタートするようにしていないと期待する動作をしなかったりエラーになったりする。

import React from 'react';

// これは間違い。コンポーネントなので大文字にしないといけない
function sample(props) {
   // これは正解
   return <div>Hello {props.toWhat}</div>;
}

function SampleMan() {
    // これも間違い
    return <hello toWhat="World" />;
}

以下のように修正すると正しく機能する。

import React from 'react';

function Sample(props) {
   return <div>Hello {props.toWhat}</div>;
}

function SampleMan() {
    // Reactは<Hello />がコンポーネントであると認識できる。
    return <Hello toWhat="World" />;
}

今日はここまで。