DEV Community

Bhat Aasim
Bhat Aasim

Posted on

Why do React components need to start with capital letters?

A quick explanation of why React components need to start with capital letters. Learn how React differentiates between native HTML elements and custom components.

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>
    );
}
Enter fullscreen mode Exit fullscreen mode
//Right way to write a React component ✅
export function MyComponent() {
  return (
        <h1>Hello, World!</h1>
    );
}
Enter fullscreen mode Exit fullscreen mode

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! 🚀

Top comments (50)

Collapse
 
florianrappl profile image
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.

Collapse
 
skysung profile image
SkySung

Short and informative thanks!

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks ❣️

Collapse
 
alexkhotkevich profile image
Alexander

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

Collapse
 
bhataasim profile image
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
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
thedcsherman profile image
David Sherman

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

Collapse
 
alexkhotkevich profile image
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

Thread Thread
 
bhataasim profile image
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.

Thread Thread
 
alexkhotkevich profile image
Alexander

This is not true either since React 17 jsx runtime

Collapse
 
jojomondag profile image
Josef Nobach

Thanks good to remember!

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks Man

Collapse
 
shailendra_singh_6b736c21 profile image
Shailendra Singh

nyc information

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks

Collapse
 
iamjoelangel profile image
Joel Angel

thanks

Collapse
 
bhataasim profile image
Bhat Aasim

You are Welcome

Collapse
 
codemeisterav profile image
avelops

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

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks

Collapse
 
vaishnavi_nagvanshi_d9b5d profile image
Vaishnavi Nagvanshi

Thanks for this informative article

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks

Collapse
 
fathima_irfana_ceae6d3589 profile image
Fathima Irfana

Good recap and informative too. Thanks

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks

Collapse
 
ashishnimrot profile image
ashishnimrot

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

Collapse
 
seandinan profile image
Sean Dinan • 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 :)

Collapse
 
alpastx profile image
Alpesh Bhagwatkar

Short and sweet!

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks

Collapse
 
cmohanc profile image
cmohanc

Fragile tech

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks

Collapse
 
naveed273 profile image
Naveed Ullah

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

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks man

Collapse
 
rehan72 profile image
Rehan

Thank you 👍

Collapse
 
bhataasim profile image
Bhat Aasim

You are Welcome 😊