Component naming rules in React

Introduction

Good component names help you and others understand what each part does. It makes your code easier to read and fix later.

When creating a new React component to display a part of your app.

When sharing components with others in your team or community.

When organizing your project files to keep things clear.

When debugging or reading code to quickly find what each component does.

Syntax

React

function ComponentName() {
  return <div>Hello!</div>;
}

Component names must start with a capital letter.

Use PascalCase (each word starts with a capital letter) for component names.

Examples

This is a correct component name using PascalCase.

React

function UserProfile() {
  return <div>User Profile</div>;
}

This is incorrect because it starts with a lowercase letter. React treats it as a regular HTML tag.

React

function userprofile() {
  return <div>User Profile</div>;
}

Arrow function component with a proper PascalCase name.

React

const Header = () => {
  return <header>Site Header</header>;
};

Sample Program

This example shows a component named WelcomeMessage starting with a capital letter. It is used inside the App component.

React

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to React!</h1>;
}

export default function App() {
  return (
    <main>
      <WelcomeMessage />
    </main>
  );
}

Important Notes

Always start component names with a capital letter so React knows it is a component.

Use clear and descriptive names to make your code easier to understand.

Do not use special characters or spaces in component names.

Summary

Component names must start with a capital letter.

Use PascalCase for naming components.

Clear names help keep your code readable and maintainable.