Component naming rules in React - Step-by-Step Execution

Concept Flow - Component naming rules

Start

↓

Name component

↓

Is first letter uppercase?

No→Error: Rename component

Yes↓

Use PascalCase

↓

Export component

↓

Use component in JSX

↓

Render success

This flow shows how React components must be named starting with uppercase letters using PascalCase to be recognized and rendered correctly.

Execution Sample

React

function MyButton() {
  return <button>Click me</button>;
}

export default MyButton;

Defines a React component named MyButton with uppercase first letter and exports it for use.

Execution Table

Step	Component Name	Check First Letter	Naming Style	Result
1	MyButton	M (uppercase)	PascalCase	Valid component name
2	myButton	m (lowercase)	camelCase	Invalid - React treats as HTML tag
3	Button	B (uppercase)	PascalCase	Valid component name
4	button	b (lowercase)	camelCase	Invalid - React treats as HTML tag
5	My_button	M (uppercase)	PascalCase with underscore	Valid but not recommended
6	my_button	m (lowercase)	camelCase with underscore	Invalid - React treats as HTML tag

💡 React requires component names to start with uppercase letters to distinguish from HTML tags.

Variable Tracker

Component Name	Initial	Check First Letter	Naming Style	Validity
MyButton	MyButton	M	PascalCase	Valid
myButton	myButton	m	camelCase	Invalid
Button	Button	B	PascalCase	Valid
button	button	b	camelCase	Invalid
My_button	My_button	M	PascalCase with underscore	Valid but not recommended
my_button	my_button	m	camelCase with underscore	Invalid

Key Moments - 2 Insights

Why must React component names start with uppercase letters?

React uses the first letter to distinguish components from HTML tags. Lowercase names are treated as HTML elements, so components must start uppercase as shown in execution_table rows 1 and 2.

Can I use underscores in component names?

While React allows underscores if the first letter is uppercase (row 5), it is not recommended. PascalCase without underscores is the standard for clarity and consistency.

Visual Quiz - 3 Questions

Look at the execution_table, which component name is valid and follows React naming rules?

A button

B myButton

C MyButton

D my_button

💡 Hint

Check the 'Check First Letter' and 'Result' columns in execution_table rows 1-4.

At which step does React treat the name as an HTML tag instead of a component?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Result' column for lowercase first letters in execution_table.

If you rename 'myButton' to 'MyButton', how does the validity change?

A Becomes invalid

B Becomes valid

C No change

D React throws an error

💡 Hint

Compare rows 1 and 2 in execution_table for the effect of uppercase first letter.

Concept Snapshot

React components must start with uppercase letters.
Use PascalCase naming style (e.g., MyComponent).
Lowercase names are treated as HTML tags.
Avoid underscores; prefer clear PascalCase.
Export components to use them in JSX.
This ensures React renders them correctly.

Full Transcript

In React, component names must start with an uppercase letter to be recognized as components rather than HTML tags. This means using PascalCase naming style like MyButton or Button. Names starting with lowercase letters like myButton or button are treated as HTML elements and will not render as React components. While underscores can be used if the first letter is uppercase, it is not recommended. Following these naming rules ensures React correctly renders your components when used in JSX.

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