Functional components in React - Mini Project: Build & Apply

Building a Simple React Functional Component

📖 Scenario: You are creating a small React app that shows a friendly greeting message on a webpage. This is like writing a simple note to welcome visitors.

🎯 Goal: Build a React functional component named Greeting that displays the text "Hello, welcome to React!" on the page.

📋 What You'll Learn

Create a functional component named Greeting

Use JSX to return a <div> containing the greeting text

Export the Greeting component as default

Use React 19+ functional component syntax with hooks (if needed)

💡 Why This Matters

🌍 Real World

React functional components are the building blocks of modern web apps. They let you create reusable pieces of UI that show information and respond to user actions.

💼 Career

Knowing how to write and compose functional components is essential for frontend developer roles working with React, a popular library used by many companies.

1

Set up the React component function

Create a functional component named Greeting using the syntax function Greeting() {}.

React

# Your code here
function Greeting() {
  
}

Need a hint?

Start by writing a function named Greeting with empty curly braces.

2

Add JSX to return a div with greeting text

Inside the Greeting function, add a return statement that returns a <div> containing the text Hello, welcome to React!.

React

function Greeting() {
  // Return a div with greeting text
  
}

Need a hint?

Use return <div>Your text</div>; inside the function.

3

Export the Greeting component as default

Add a line to export the Greeting component as the default export using export default Greeting;.

React

function Greeting() {
  return Hello, welcome to React!;
}
// Export Greeting as default

Need a hint?

Write export default Greeting; after the function.

4

Use the Greeting component in an app

Create a new functional component named App that returns the <Greeting /> component inside a <main> tag. Export App as default instead of Greeting.

React

function Greeting() {
  return Hello, welcome to React!;
}

// Create App component that uses Greeting

// Export App as default

Need a hint?

Write a new function App that returns <main><Greeting /></main> and export App as default.