In React, the type of a component is determined by the way you name your components (or "tags"). A React component can be of one of the following types:
- A DOM element;
- A React component (i.e. class or function);
- A React fragment.
React has built-in convention on how to name your components:
- Capitalized — component names with first letter uppercase are treated as a React component (e.g.
<Foo />); - Dot Notation — component names with a dot in the name, regardless of the case, are too treated as a React component (e.g.
<foo.bar />,<Foo.Bar />, etc.); - Lowercase — component names starting with lowercase letters are treated as DOM elements (e.g.
<div>,<span>, etc.).
React would interpret your component differently based on the way you name it. Therefore, your custom React components must either start with a capital letter or use the dot notation.
If, for some reason, you have a React component that does start with a lowercase letter, then you should assign it to a capitalized variable before using it in JSX.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.