Should React Component Name Begin With Capital Letter?

Find out if it's required to have first letter of React component name in uppercase

In React, the type of a component is determined by the way you name your tags. A React component can be of one of the following types:

  1. A DOM element;
  2. A React component (i.e. class or function);
  3. 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 starts with a lowercase letter, then you should assign it to a capitalized variable before using it in JSX.


Hope you found this post useful. It was published . Please show your love and support by sharing this post.