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.

Practice

1. Which of the following is the correct way to name a React component?

easy

A. MyComponent

B. myComponent

C. my_component

D. mycomponent

Solution

1. Step 1: Understand React component naming rules

   React components must start with a capital letter to be recognized as components.

2. Step 2: Identify the correct naming style

   PascalCase (capitalizing each word) is the standard for React components, so "MyComponent" is correct.

3. Final Answer:

   MyComponent -> Option A

4. Quick Check:

   Component names start with capital letters = C [OK]

Hint: Component names always start with uppercase letters [OK]

Common Mistakes:

• Starting component names with lowercase letters
• Using underscores instead of PascalCase
• Using all lowercase letters

2. Which of the following will NOT be recognized by React as a component?

easy

A. function mycomponent() { return Hello; }

B. const MyComponent = function() { return Hello; };

C. const MyComponent = () => Hello;

D. function MyComponent() { return Hello; }

Solution

1. Step 1: Check function component naming

   React treats functions starting with lowercase letters as regular functions, not components.

2. Step 2: Identify the naming error

   While lowercase function names are valid JavaScript, React will not render them as components, causing unexpected behavior.

3. Final Answer:

   function mycomponent() { return <div>Hello</div>; } -> Option A

4. Quick Check:

   Component functions must start uppercase = D [OK]

Hint: Component functions must start with uppercase letters [OK]

Common Mistakes:

• Using lowercase function names for components
• Confusing JavaScript function syntax with React rules
• Assuming lowercase names work as components

3. What will happen if you try to render this component?

function greeting() { return <h1>Hi</h1>; }

<greeting />

medium

A. It renders the component but with a warning

B. It throws a syntax error

C. It renders the <h1>Hi</h1> text on the page

D. It renders nothing because React treats it as a lowercase HTML tag

Solution

1. Step 1: Understand lowercase component names in JSX

   React treats lowercase tags as HTML elements, not components.

2. Step 2: Analyze the effect of rendering <greeting />

   Since "greeting" is lowercase, React looks for an HTML tag <greeting>, which does not exist, so it renders nothing.

3. Final Answer:

   It renders nothing because React treats it as a lowercase HTML tag -> Option D

4. Quick Check:

   Lowercase names render as HTML tags = A [OK]

Hint: Lowercase names render as HTML tags, not components [OK]

Common Mistakes:

• Expecting lowercase names to render components
• Thinking React throws syntax errors for lowercase names
• Assuming React warns automatically for lowercase components

4. Identify the error in this React component code:

function 1stComponent() { return <div>Hello</div>; }

medium

A. Missing return statement

B. Component name cannot start with a number

C. JSX syntax error inside return

D. Component name must be lowercase

Solution

1. Step 1: Check component naming rules

   Component names must be valid JavaScript identifiers and start with a capital letter.

2. Step 2: Identify invalid name

   Names cannot start with a number, so "1stComponent" is invalid.

3. Final Answer:

   Component name cannot start with a number -> Option B

4. Quick Check:

   Valid identifiers start with letters = B [OK]

Hint: Component names must start with letters, not numbers [OK]

Common Mistakes:

• Starting component names with numbers
• Confusing lowercase requirement
• Assuming JSX syntax error when name is invalid

5. You want to create a component that shows a user's profile. Which is the best name following React naming rules and good practice?

hard

A. user_Profile

B. userprofile

C. UserProfile

D. User_profile

Solution

1. Step 1: Apply React component naming conventions

   React components should use PascalCase starting with uppercase letters.

2. Step 2: Choose clear and readable name

   "UserProfile" uses PascalCase and clearly describes the component's purpose.

3. Final Answer:

   UserProfile -> Option C

4. Quick Check:

   PascalCase and clarity = A [OK]

Hint: Use PascalCase with clear words for component names [OK]

Common Mistakes:

• Using all lowercase or underscores in names
• Mixing lowercase and uppercase incorrectly
• Choosing unclear or ambiguous names