Component naming rules in React - Mini Project: Build & Apply

Component naming rules

📖 Scenario: You are building a simple React app that shows a greeting message. To keep your code clear and easy to understand, you will practice naming your React components correctly.

🎯 Goal: Create a React functional component with the correct naming rules so it renders a greeting message.

📋 What You'll Learn

Create a React functional component with a name starting with a capital letter

Use the component name in JSX to render it

Return a simple greeting message inside a <div> element

💡 Why This Matters

🌍 Real World

In real React projects, naming components correctly helps keep code readable and prevents bugs.

💼 Career

Understanding component naming rules is essential for any React developer to write clean and maintainable code.

1

Create a React functional component named Greeting

Create a React functional component named Greeting that returns a <div> with the text Hello, friend!.

React

// Create a React functional component named Greeting
// Your code here

Hint

Component names must start with a capital letter. Use a function that returns JSX.

2

Create a variable called app that uses the Greeting component

Create a variable called app and set it to the JSX element <Greeting /> to use the Greeting component.

React

function Greeting() {
  return Hello, friend!;
}

// Create a variable called app that uses the Greeting component
// Your code here

Hint

Use the component name as a JSX tag with a capital letter.

3

Add a second component named Farewell

Create another React functional component named Farewell that returns a <div> with the text Goodbye, friend!.

React

function Greeting() {
  return Hello, friend!;
}

const app = ;

// Create a React functional component named Farewell
// Your code here

Hint

Remember to start component names with a capital letter.

4

Update app to use the Farewell component instead

Change the variable app to use the Farewell component by setting it to the JSX element <Farewell />.

React

function Greeting() {
  return Hello, friend!;
}

const app = ;

function Farewell() {
  return Goodbye, friend!;
}

// Update app to use the Farewell component
// Your code here

Hint

Use the component name Farewell with a capital letter in JSX.

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