Bhat Aasim

Posted on Sep 21

Why do React components need to start with capital letters?

#webdev #react #javascript #beginners

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

Top comments (55)

Florian Rappl • Sep 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

False

Florian Rappl • Oct 4

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

SkySung • Sep 22

Short and informative thanks!

Bhat Aasim • Sep 22

Thanks ❣️

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.