What are props in React - Hands-On Activity

What are props

📖 Scenario: You want to create a simple React component that shows a greeting message. The message should come from outside the component so you can reuse it with different greetings.

🎯 Goal: Build a React component that receives a greeting message as a prop and displays it inside a paragraph.

📋 What You'll Learn

Create a functional React component named Greeting

Use a prop named message to pass the greeting text

Render the message inside a <p> element

Use the Greeting component inside App and pass the message 'Hello, friend!'

💡 Why This Matters

🌍 Real World

Props let you build flexible UI parts that change based on data, like showing user names or messages.

💼 Career

Understanding props is essential for React developers to create reusable and maintainable components.

1

Create the Greeting component

Create a React functional component called Greeting that accepts props as a parameter.

React

function Greeting(props) {
  // Your code here
}

Need a hint?

Start by writing a function named Greeting that takes props as input.

2

Add a message prop

Inside the Greeting component, use props.message to access the greeting text.

React

function Greeting(props) {
  // Use props.message here
  return null;
}

Need a hint?

Use curly braces {} inside JSX to show the value of props.message.

3

Use Greeting in App

Create a React functional component called App that returns the Greeting component with the message prop set to 'Hello, friend!'.

React

function Greeting(props) {
  return {props.message};
}

function App() {
  // Your code here
}

Need a hint?

Return the Greeting component with the message prop inside App.

4

Export App component

Add export default App; at the end of the code to make App the main component.

React

function Greeting(props) {
  return {props.message};
}

function App() {
  return ;
}

// Your code here

Need a hint?

This line makes App the component React shows on the page.