What is React - Hands-On Activity

What is React

📖 Scenario: You want to create a simple React component that shows a friendly message about React.

🎯 Goal: Build a React functional component named ReactInfo that displays the text "React is a JavaScript library for building user interfaces." inside a paragraph.

📋 What You'll Learn

Create a functional component named ReactInfo

Use a <p> tag to display the message

Export the component as default

💡 Why This Matters

🌍 Real World

React components are the building blocks of modern web apps. Knowing how to create and export them is essential.

💼 Career

React is widely used in web development jobs. Understanding components is a key skill for frontend developers.

1

Create the React functional component

Write a React functional component named ReactInfo that returns a <p> element with no content yet.

React

function ReactInfo() {
  // Your code here
}

Need a hint?

Start with a function named ReactInfo that returns a paragraph tag.

2

Add the message inside the paragraph

Inside the ReactInfo component, add the text "React is a JavaScript library for building user interfaces." inside the <p> tag.

React

function ReactInfo() {
  return React is a JavaScript library for building user interfaces.;
  // Your code here
}

Need a hint?

Put the exact message text inside the paragraph tags.

3

Export the component as default

Add a default export statement for the ReactInfo component at the end of the file.

React

function ReactInfo() {
  return React is a JavaScript library for building user interfaces.;
}

// Your code here

Need a hint?

Use export default ReactInfo; to export the component.

4

Complete the React component file

Ensure the entire code defines the ReactInfo functional component with the message and exports it as default.

React

function ReactInfo() {
  return React is a JavaScript library for building user interfaces.;
}

export default ReactInfo;  // Finalize the component

Need a hint?

Check that the component returns the message and is exported correctly.