What is a component in React - Hands-On Activity

What is a component

📖 Scenario: You want to build a simple webpage that shows a greeting message. To do this, you will create a React component that displays the message.

🎯 Goal: Build a React functional component called Greeting that shows the text "Hello, friend!" on the page.

📋 What You'll Learn

Create a React functional component named Greeting

Inside the component, return a <div> element

The <div> should contain the exact text: "Hello, friend!"

Export the Greeting component as default

💡 Why This Matters

🌍 Real World

React components let developers build web pages by combining small, reusable pieces. This makes building and maintaining websites easier.

💼 Career

Understanding components is essential for React developers, a popular skill in web development jobs.

1

Create the React functional component

Write a React functional component named Greeting that returns a <div> element.

React

# Your code here

Need a hint?

Start by writing function Greeting() { return <div></div>; } and export it.

2

Add the greeting text inside the div

Inside the <div> element of the Greeting component, add the text Hello, friend! exactly.

React

function Greeting() {
  return {/* Add text here */};
}

export default Greeting;

Need a hint?

Put the text inside the <div> tags like this: <div>Hello, friend!</div>.

3

Use the Greeting component in an app

Create a React functional component named App that returns the <Greeting /> component inside a <main> element. Export App as default.

React

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

// Your code here to create App component

Need a hint?

Create function App() { return <main><Greeting /></main>; } and export it.

4

Explain the component output

Add a comment above the Greeting component explaining that it shows the text "Hello, friend!" on the page.

React

// Your comment here
function Greeting() {
  return Hello, friend!;
}

function App() {
  return ;
}

export default App;

Need a hint?

Write a comment starting with // describing what the Greeting component does.