Why React is used - See It in Action

Why React is used

📖 Scenario: You are building a simple web page to explain why React is popular for creating user interfaces.

🎯 Goal: Create a React functional component that shows a list of reasons why React is used.

📋 What You'll Learn

Create a list of reasons as an array of strings

Create a variable to hold the number of reasons

Use a map function to render each reason inside a

element

Return a

element containing all the reasons

💡 Why This Matters

🌍 Real World

React is widely used to build interactive and fast web user interfaces by breaking UI into reusable components.

💼 Career

Understanding why React is used helps beginners appreciate component-based design and prepares them for frontend development roles.

1

Create the reasons array

Create a constant array called reasons with these exact strings: 'Reusable components', 'Fast rendering with virtual DOM', 'Strong community support'.

React

// Create the reasons array
// Your code here

Need a hint?

Use const reasons = [ ... ] with the exact strings inside.

2

Create a count variable

Create a constant called count that stores the length of the reasons array.

React

const reasons = ['Reusable components', 'Fast rendering with virtual DOM', 'Strong community support'];
// Create the count variable
// Your code here

Need a hint?

Use const count = reasons.length; to get the number of reasons.

3

Render the reasons list

Create a React functional component called WhyReact that returns a <ul> element. Inside the <ul>, use reasons.map with reason and index to create <li> elements for each reason. Use index as the key.

React

const reasons = ['Reusable components', 'Fast rendering with virtual DOM', 'Strong community support'];
const count = reasons.length;

// Create the WhyReact component
// Your code here

Need a hint?

Use function WhyReact() { return ( ... ) } and inside return a <ul> with mapped <li> elements.

4

Export the component

Add export default WhyReact; at the end of the code to export the component.

React

const reasons = ['Reusable components', 'Fast rendering with virtual DOM', 'Strong community support'];
const count = reasons.length;

function WhyReact() {
  return (
    
      {reasons.map((reason, index) => (
        {reason}
      ))}
    
  );
}

// Export the WhyReact component
// Your code here

Need a hint?

Use export default WhyReact; to make the component usable elsewhere.