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

Florian Rappl • Sep 24 '24

Has nothing to do with React. It's a JSX assumption to distinguish between a built-in (string) and a reference. Plus you don't need it - if it's a member (contains a dot) it will also be taken as a reference.

Web-Dev-Codi • Oct 4 '24

False

Florian Rappl • Oct 4 '24

Care to elaborate?

Maybe try it out first, before writing something:

JSX is independent of React (true - it's origins are in React, but it was decoupled very early on and can be used with whatever - even you can just roll your own JSX factory)
<foo.bar /> resolves to h(foo.bar) and not h("foo.bar") - so I am not sure if have some experience with JSX or just like to troll.

Max Harris • Oct 11 '24

SkySung • Sep 22 '24

Short and informative thanks!

Bhat Aasim • Sep 22 '24

Thanks ❣️

Alexander • Sep 22 '24

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

Bhat Aasim • Sep 22 '24

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 '24

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

Alexander • Sep 22 '24

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 '24

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 '24

This is not true either since React 17 jsx runtime

Web-Dev-Codi • Oct 4 '24

The comments are always like, well actually It is blah blah blah.

That translates to, oh, I know something different. Let me sh*t on this post.

The fun part is usually they're wrong.

Sean Dinan • Sep 23 '24 • 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 :)