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 (50)
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.
Short and informative thanks!
Thanks ❣️
What about const SomeName = "some value" and projects without Babel?
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.
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.I’m fairly sure for this they just check whether typeof input is string.
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
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 intoReact.createElement()
calls.This is not true either since React 17 jsx runtime
Thanks good to remember!
Thanks Man
nyc information
Thanks
thanks
You are Welcome
It was pretty obvious to me, thanks for laying it out and validating my assumptions
Thanks
Thanks for this informative article
Thanks
Good recap and informative too. Thanks
Thanks
Could you tell me cons of virtual dom in react js?
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 :)
Short and sweet!
Thanks
Fragile tech
Thanks
To the point and informative which clears the basic concept, thank you
Thanks man
Thank you 👍
You are Welcome 😊