JSXでReact.Componentを宣言する時の注意点

Components and Props

reactjs.org

と

JSX In DepthのUser-Defined Components Must Be Capitalized

reactjs.org

を読み返してびっくりしたことがあった。

React.Componentを表示する時、頭文字を大文字にしないといけないということだ。

どういうことか例を出す。

class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

例として簡単なソースコードを記載した。

divタグにHelloMessageコンポーネントを表示させる処理なのだが、HelloMessageの頭文字がHと大文字になっているのでこの処理は正常終了する。

ところがだ、Hを小文字にした場合は、エラーが発生する。

class helloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <helloMessage />,
  document.getElementById('test')
);

これはどういうことかというと、React側の処理として、小文字の場合は、ブラウザがサポートしている標準のタグと認識するので、React.Componentが小文字だとそのままタグとして表示しようとしてエラーになってしまう。

今まで当たり前のように、React.Component宣言時は、頭文字を大文字にしていたので気にならなかったので、これは盲点だった。