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.
- 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 />, etc.);
- Lowercase — component names starting with lowercase letters are treated as DOM elements (e.g.
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.