React Component Naming Rules Explained with Examples (2026 Beginner's Guide)

React Component Naming Rule

Introduction

  React one of the first concepts you should understand is Component Naming Rules. Every React application is built using components. A component is a small, reusable piece of code that displays a part of the user interface, such as a navigation bar, login form, product card, or footer.

React follows a specific naming convention for components. These rules help React identify whether a tag is a custom React component or a built-in HTML element. If you ignore these rules, React may not render your component correctly.

Following proper naming rules also makes your code cleaner, easier to understand, and simpler to maintain as your project grows.

---

What is a React Component?

A React component is a JavaScript function that returns JSX (JavaScript XML). JSX looks similar to HTML and tells React what should appear on the screen.

For example, a shopping website can be divided into small components like this:

Shopping Website

├── Header

├── NavigationBar

├── ProductCard

├── ShoppingCart

├── Footer

Instead of writing the entire webpage in one file, React allows you to create each section separately and reuse it wherever needed.

React Installation Tutorial

---

What is the Component Naming Rule?

A Component Naming Rule is a guideline that tells developers how to name React components correctly.

React recommends two main rules:

• The component name must begin with a capital letter.
• The component name should follow PascalCase.

PascalCase Examples

Header

UserProfile

ProductCard

ShoppingCart

LoginForm

StudentDetails

Each word starts with a capital letter, and there are no spaces or hyphens.

---

Why Does React Require Capital Letters?

React automatically checks the first letter of every tag.

If the tag starts with a lowercase letter, React assumes it is an HTML element.

Example:

<div></div>

<p></p>

<header></header>

These are built-in HTML tags.

If the tag starts with a capital letter, React treats it as a custom React component.

Example:

<Header />

<ProductCard />

<LoginForm />

This simple rule helps React distinguish between HTML elements and React components.

---

React Component Syntax

The basic syntax of a React component is:

function ComponentName() {

    return (

        JSX Code

    );

}

 export default ComponentName;

---

Syntax Explanation

function Header()

• function creates a JavaScript function.
• Header is the component name.
• Since it starts with a capital letter, React recognizes it as a component.

What is the React

---

return 

The return statement sends JSX to the browser.

---

<h1>Welcome to React Programming</h1>

This JSX creates a heading that will be displayed on the webpage.

---

export default Header;

This exports the component so it can be imported into other files.

---

Complete Example

Step 1: Create a Component

Header.jsx

function Header() {

    return (

        <h1>Welcome to React Programming</h1>

    );

}

 

export default Header;

Explanation

This component creates a heading. Whenever you use <Header />, React runs the Header function and returns the heading.

Learn React official documentation

---

Step 2: Use the Component

App.jsx

import Header from "./Header";

 

function App() {

    return (

        <div>

            <Header />

        </div>

    );

}

 

export default App;

Explanation

• import Header imports the component.
• <Header /> calls the component.
• React inserts the output of the Header component into the page.

---

Step 3: Render the Application

main.jsx

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

 ReactDOM.createRoot(document.getElementById("root")).render(

    <App />

);

Explanation

• createRoot() creates the React application.
• <App /> becomes the root component.
• React begins rendering from App.
• App renders Header.
• Header returns the heading, which appears in the browser.

---

Program Execution Flow

Application Starts

        │

       ▼

main.jsx

        │

       ▼

Render <App />

        │

       ▼

App Component Executes

        │

       ▼

Calls <Header />

        │

       ▼

Header Component Executes

        │

       ▼

Returns JSX

        │

       ▼

<h1>Welcome to React Programming</h1>

        │

       ▼

React Converts JSX into HTML

        │

       ▼

Browser Displays Output

JSX Documentation

---

Browser Output

After running the application, the browser displays:

+--------------------------------------------------+

|                                                  |

|        Welcome to React Programming  |

|                                                  |

+--------------------------------------------------+

Actual Output

Welcome to React Programming

---

What Happens Behind the Scenes?

When you run the project:

1. React starts from main.jsx.
2. The App component is rendered.
3. App contains the <Header /> component.
4. React calls the Header function.
5. The function returns:

<h1>Welcome to React Programming</h1>

6. React converts the JSX into HTML.
7. The browser displays the heading.

---

Common Mistakes

❌ Incorrect

function header() {

    return <h1>Welcome</h1>;

}

 

export default header;

Using:

<header />

React treats header as the HTML <header> element instead of your custom component.

---

✅ Correct

function Header() {

    return <h1>Welcome</h1>;

}

 

export default Header;

Using:

<Header />

React correctly recognizes it as a custom component and renders the heading.

---

Best Practices

• Always start component names with a capital letter.
• Use PascalCase for multi-word component names.
• Choose meaningful names that describe the component's purpose.
• Keep the filename and component name the same (for example, Header.jsx contains Header).
• Design each component to perform one specific task.
• Reuse components instead of writing the same code multiple times.

---

Conclusion

Component Naming Rules are one of the most important conventions in React. A correctly named component helps React distinguish between custom components and standard HTML elements. By starting component names with a capital letter, using PascalCase, and choosing meaningful names, your code becomes easier to read, maintain, debug, and reuse.

In the example above, the Header component is created in Header.jsx, imported into App.jsx, and rendered through main.jsx. When the application runs, React executes the Header component, converts its JSX into HTML, and displays "Welcome to React Programming" in the browser. This simple example demonstrates the complete journey from writing a React component to seeing the final output on the screen.

What is the Component Naming Rule in React?

A Component Naming Rule is a set of guidelines that tells developers how to name React components correctly. These rules help React identify custom components and make the code easier to read, understand, and maintain. Following a consistent naming convention is considered a best practice in React development because it keeps projects organized and reduces confusion, especially as applications grow larger.

Key Points of React Component Naming Rules

1. Start the Component Name with a Capital Letter

Every React component should begin with an uppercase letter. React uses this rule to recognize that the tag represents a custom component rather than a standard HTML element.

Example:

function Header() {

    return <h1>Welcome</h1>;

}

✅ Correct: Header

❌ Incorrect: header

---

2. Use PascalCase

React recommends using PascalCase, where the first letter of every word is capitalized and there are no spaces or special characters.

Examples:

UserProfile

ProductCard

ShoppingCart

LoginForm

StudentDetails

---

3. Choose Meaningful Names

The component name should clearly describe its purpose. A descriptive name helps other developers understand what the component does without reading its code.

Good Examples:

• Header
• Footer
• UserProfile
• ProductCard
• NavigationBar

Poor Examples:

• Test
• Demo
• Data
• Component1

---

4. Match the File Name with the Component Name

For better organization, the file name should be the same as the component name.

Example:

Header.jsx

function Header() {

    return <h1>Welcome</h1>;

}

 

export default Header;

---

5. Keep the Name Simple and Easy to Understand

Avoid overly long or confusing names. A short, meaningful name is easier to remember and maintain.

Good Example:

LoginForm

Avoid:

UserLoginRegistrationFormComponent

---

6. Give Each Component One Clear Responsibility

The name should reflect a single purpose. A component should represent one part of the user interface.

Examples:

• SearchBar
• Sidebar
• ContactForm
• ProductCard

---

7. Avoid Special Characters and Spaces

Component names should contain only letters and numbers. Do not use spaces, hyphens, or special symbols.

Correct:

UserProfile

Incorrect:

User-Profile

User Profile

user_profile

---

8. Follow the Same Naming Style Throughout the Project

Using a consistent naming convention across your project makes the codebase more organized and easier for everyone on the team to understand.

---

Example

function ProductCard() {

    return (

        <h2>Wireless Mouse</h2>

    );

}

 

export default ProductCard;

Use the component:

import ProductCard from "./ProductCard";

 

function App() {

    return (

        <div>

            <ProductCard />

        </div>

    );

}

 

export default App;

Output

Wireless Mouse

---

Summary

React Component Naming Rules ensure that components are easy to identify, understand, and reuse. By starting component names with a capital letter, using PascalCase, choosing meaningful names, matching file names with component names, and following a consistent naming style, you can create React applications that are clean, organized, and easy to maintain.