Component naming rules in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why should React component names start with a capital letter?

React treats components starting with a capital letter as custom components. Lowercase names are treated as HTML tags. This helps React distinguish between built-in HTML elements and your own components.

beginner

What is the recommended naming style for React components?

Use PascalCase for React component names. This means each word starts with a capital letter, like MyButton or UserProfile. It improves readability and follows React conventions.

intermediate

Can you use numbers or special characters in React component names?

React component names can include numbers but should not start with a number. Special characters like spaces or symbols are not allowed. Stick to letters and numbers for valid names.

beginner

What happens if you name a React component with a lowercase first letter?

React will treat it as a built-in HTML element, not a component. This means your component won't render as expected and React will look for a matching HTML tag instead.

beginner

Is it okay to name a React component with a single lowercase letter?

No. Single lowercase letters are treated as HTML tags. Always start component names with an uppercase letter to ensure React recognizes them as components.

Which of these is a valid React component name?

A user-profile

B userProfile

C 123Profile

D UserProfile

React components should start with a capital letter and use PascalCase. 'UserProfile' is correct. 'userProfile' starts lowercase, '123Profile' starts with a number, and 'user-profile' has a hyphen.

Why should React component names start with a capital letter?

A To make them look pretty

B React treats capitalized names as components, lowercase as HTML tags

C It is required by JavaScript syntax

D To avoid errors in CSS styling

React uses the capital letter to distinguish components from HTML tags.

Which naming style is recommended for React components?

A PascalCase

B snake_case

C camelCase

D kebab-case

PascalCase is the standard for React component names, like 'MyComponent'.

What will React do if a component name starts with a lowercase letter?

A Render it as a custom component

B Throw a syntax error

C Treat it as a built-in HTML element

D Automatically capitalize it

React treats lowercase names as HTML tags, not components.

Can React component names contain special characters like hyphens?

A No, special characters are not allowed

B Only underscores are allowed

C Yes, always

D Only if wrapped in quotes

Component names should only contain letters and numbers, no special characters.

Explain the rules for naming React components and why they matter.

Think about how React decides what is a component versus an HTML element.

What problems might happen if you name a React component starting with a lowercase letter?

Consider how React interprets lowercase names.