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.