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

Need a 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

Need a 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

Need a 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

Need a hint?

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