Component Naming Conventions
In this page:
function ComponentName() {
return <div>...</div>;
}
// Used as a JSX tag with the same PascalCase name
<ComponentName />Why PascalCase Is Required
JSX uses capitalization to decide whether a tag refers to a built-in HTML element or a custom component: lowercase means HTML tag, capitalized means component.
This is not just a style preference -- <greeting /> and <Greeting /> behave completely differently in JSX.
function greeting() (lowercase) used as <greeting /> will silently render as an unknown HTML element instead of calling your function.Example: Why PascalCase Is Required
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ValidComponent() {
return <p>Correctly named component (PascalCase)</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ValidComponent />);
</script>
</body>
</html>Choosing Descriptive Names
A component's name should describe the UI it represents -- UserAvatar, NavigationBar, PriceTag -- rather than something vague like Box1 or Thing.
Clear names make a codebase far easier to navigate as it grows, since developers can guess what a component does just from its name.
PrimaryButton over BlueBoxWithText).Wrapper or Container become confusing once a project has several of them scattered across different files.Example: Choosing Descriptive Names
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ProductCard({ name, price }) {
return <div><h4>{name}</h4><p>${price}</p></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ProductCard name="Coffee Mug" price="12" />);
</script>
</body>
</html>Matching File Names to Component Names
Naming the file that exports a component after the component itself (e.g. UserAvatar.jsx exporting UserAvatar) makes it much faster to locate code in a larger project. This convention is followed almost universally across real-world React codebases.
Example: Matching File Names to Component Names
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// File: WelcomeBanner.jsx (matches the component name below)
function WelcomeBanner() {
return <div style={{background: "#e0f7fa", padding: "10px"}}>Welcome!</div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<WelcomeBanner />);
</script>
</body>
</html>- Using a generic, unclear name like
ThingorComp1instead of a descriptive one. - Forgetting the mandatory PascalCase capitalization rule, breaking JSX recognition.
- Naming a file differently from the component it exports, making it harder to find later.
- Component names must be in PascalCase (capitalized) so JSX can distinguish them from HTML tags.
- Good names describe what the component represents, not how it's implemented.
- Matching the file name to the component name makes navigation easier in larger projects.
- Consistent naming conventions make a codebase easier for teams to work in together.
No browser-specific restrictions -- PascalCase naming is a JSX parsing requirement in every React version.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: