DEV Community

Why do React components need to start with capital letters?

Bhat Aasim on September 21, 2024

Why do React components need to start with capital letters? If you’ve ever worked with React, you might have noticed that component names always...

Read full post

Alexander • Sep 22

What about const SomeName = "some value" and projects without Babel?

Bhat Aasim • Sep 22

SomeName simply a variable, not a react component. Capitalization rule will not apply here, because its not being used as a react component here.

Projects without babel, then React.createElement() Api is used Explicitly.

BTW, using Capital letters in Components, helps react to differentiate between Native Elements and custom Components.

Eg.

React.createElement('div'); 
// Interpreted as a native HTML <div> element

React.createElement(MyComponent); 
// Interpreted as a custom React component

If MyComponent is written in lower case (myComponent), React will look for a native HTML element <myComponent> which doesn't exists, causing the app to fail.

David Sherman • Sep 23

I’m fairly sure for this they just check whether typeof input is string.

Alexander • Sep 22

I see the point with createElement, but I still can write lower case functional component on a project without Babel and still get the error. So it's not Babel concern, as your article states

Bhat Aasim • Sep 23

You're absolutely right! The capitalization rule in React isn't tied specifically to Babel, but rather to React itself. While Babel helps by converting JSX into React.createElement() calls.

Alexander • Sep 23

This is not true either since React 17 jsx runtime

SkySung • Sep 22

Short and informative thanks!

Bhat Aasim • Sep 22

Thanks ❣️

Sean Dinan • Sep 23 • Edited

That's good to know! Had always assumed it was just a matter of convention, although it would feel very strange to not capitalize a React component at this point :)