Why is it necessary to start component names with a capital letter?

Answer

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string <div> or <span> passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

• <component /> compiles to React.createElement('component') (html tag)
• <Component /> compiles to React.createElement(Component)
• <obj.component /> compiles to React.createElement(obj.component)