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.