Component Naming Conventions
In this page:
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.
Note: Editor autocomplete usually highlights component names differently from HTML tags, which can help catch capitalization mistakes early.
Warning: A component defined as 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.
Note: Name a component after its purpose or content, not its visual styling (prefer PrimaryButton over BlueBoxWithText).
Warning: Overly generic names like 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.
Note: One component per file, named identically to the file, is the most common convention in professional React projects.
Warning: Multiple differently-named components crammed into one oddly-named file makes searching for code far more difficult as a project grows.
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: