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 (55)

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
 
web-dev-codi profile image
Web-Dev-Codi

False

Collapse
 
florianrappl profile image
Florian Rappl

Care to elaborate?

Maybe try it out first, before writing something:

  1. 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)
  2. <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.
Collapse
 
maxharrisnet profile image
Max Harris

Image description

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
 
web-dev-codi profile image
Web-Dev-Codi

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.

Collapse
 
ashishnimrot profile image
ashishnimrot

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

Collapse
 
bhataasim profile image
Bhat Aasim

I don't think there are any cons in React.js Virtual DOM. But these could be:

  • Memory Usage
  • Diffing Complexity
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