Component naming rules in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a React component with a proper name.

React

function [1]() {
  return <div>Hello!</div>;
}

Drag options to blanks, or click blank then click option'

AMyComponent

B123Component

Cmycomponent

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Starting component names with lowercase letters.

Using names that start with numbers.

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

2fill in blank

medium

Complete the code to export a React component with a correct name.

React

const [1] = () => {
  return <p>Hi!</p>;
};

export default [1];

Drag options to blanks, or click blank then click option'

AhelloWorld

Bhelloworld

CHelloWorld

Dhello_world

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase or snake_case for component names.

Using all lowercase names.

Component names should be PascalCase starting with a capital letter.

3fill in blank

hard

Fix the error in the component name to follow React naming rules.

React

export function [1]() {
  return <span>Test</span>;
}

Drag options to blanks, or click blank then click option'

ASecondComponent

Bsecond_component

CsecondComponent

D2ndComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Starting names with numbers.

Using camelCase or snake_case.

Component names must start with a capital letter and cannot start with numbers or underscores.

4fill in blank

hard

Fill both blanks to correctly define and export a React component.

React

const [1] = () => {
  return <h1>Welcome</h1>;
};

export default [2];

Drag options to blanks, or click blank then click option'

AWelcomePage

BwelcomePage

Cwelcome_page

D1Welcome

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between component and export names.

Using lowercase or invalid names.

Both the variable and export name must match and follow PascalCase naming.

5fill in blank

hard

Fill all three blanks to create a valid React component and export it.

React

import React from 'react';

function [1]() {
  return <section>[2]</section>;
}

export default [3];

Drag options to blanks, or click blank then click option'

AUserProfile

B"User Profile"

DuserProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or camelCase for component names.

Not quoting string content inside JSX.

Mismatch between function and export names.

The function and export names must match and be PascalCase. The content inside the section is a string and must be quoted.

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