概要
最近記事を書いていなかったので、ちょっとした備忘録を。
定期的にやってしまいがちなので、忘れないように形にして残しておきます。
タイトルのエラーについて
一言で言うと、JSXのコンポーネントは大文字から始めるようにしましょう。
小文字の場合、React がコンポーネントだと認識せずに、HTML タグだと認識してしまいます。
以下の例を見ていただけると分かりますが、コンポーネント名を変えるだけで、エラーを解消することができます。
⇨
詳しくはReactの公式ドキュメントに書いてありました。
JSX を深く理解する – React
ある要素の型が小文字から始まっているような場合、それは
や
のような組み込みのコンポーネントを参照しており、これらはそれぞれ 'div' や 'span' といった文字列に変換されて React.createElement に渡されます。一方で のように大文字で始まる型は React.createElement(Foo) にコンパイルされ、JavaScript ファイルにおいて定義あるいはインポートされたコンポーネントを参照します。
コンポーネントを命名するときには、大文字から始めるようにしてください。もしすでに小文字から始まるコンポーネントを作ってしまっていたら、JSX 内で利用する前にいちど大文字から始まる変数に代入しておきましょう。
