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.

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