Why do React components need to start with capital letters?

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 start with capital letters. But do you know why? 🤔

//This is wrong and will not work ❌
export function myComponent() {
  return (
        <h1>Hello, World!</h1>
    );
}

//Right way to write a React component ✅
export function MyComponent() {
  return (
        <h1>Hello, World!</h1>
    );
}

In JSX, React components are written in a syntax that gets transformed into plain JavaScript using the React.createElement API, thanks to Babel. Here’s where the capital letter comes in:

When Babel encounters a name starting with a capital letter, it knows it’s dealing with a React component and converts it into a React Fiber object (a key part of React’s rendering system).

On the other hand, if the name starts with a lowercase letter, Babel treats it as a string rather than a component. This helps React differentiate between native HTML elements and custom components!

So, always remember to capitalize your component names for React to interpret them correctly. 💡

Thanks for reading! 🚀

Comments

[Florian Rappl]

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.

[SkySung]

Short and informative thanks!

[Bhat Aasim]

Thanks ❣️

[Alexander]

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

[Bhat Aasim]

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]

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

[Alexander]

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]

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]

This is not true either since React 17 jsx runtime

[Josef Nobach]

Thanks good to remember!

[Bhat Aasim]

Thanks Man

[Shailendra Singh]

nyc information

[Bhat Aasim]

Thanks

[Joel Angel]

thanks

[Bhat Aasim]

You are Welcome

[avelops]

It was pretty obvious to me, thanks for laying it out and validating my assumptions

[Bhat Aasim]

Thanks

[Vaishnavi Nagvanshi]

Thanks for this informative article

[Bhat Aasim]

Thanks

[Fathima Irfana]

Good recap and informative too. Thanks

[Bhat Aasim]

Thanks

[ashishnimrot]

Could you tell me cons of virtual dom in react js?

[Sean Dinan]

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 :)

[Alpesh Bhagwatkar]

Short and sweet!

[Bhat Aasim]

Thanks

[cmohanc]

Fragile tech

[Bhat Aasim]

Thanks

[Naveed Ullah]

To the point and informative which clears the basic concept, thank you

[Bhat Aasim]

Thanks man

[Rehan]

Thank you 👍

[Bhat Aasim]

You are Welcome 😊