Reusable components in React - Mini Project: Build & Apply

Building Reusable Components in React

📖 Scenario: You are creating a simple React app that shows different colored buttons. Instead of writing the button code again and again, you want to make a reusable button component that can show different text and colors.

🎯 Goal: Build a reusable React button component called ColorButton that accepts text and color as props and renders a styled button. Then use this component multiple times with different texts and colors.

📋 What You'll Learn

Create a functional React component named ColorButton.

The ColorButton component must accept text and color props.

Use inline styles to set the button's background color using the color prop.

Render three ColorButton components with texts: Save, Cancel, and Delete.

Use colors: green for Save, gray for Cancel, and red for Delete.

💡 Why This Matters

🌍 Real World

Reusable components save time and reduce errors by letting developers write code once and use it many times with different data.

💼 Career

Understanding reusable components is essential for React developers to build scalable and maintainable user interfaces.

1

Create the ColorButton component skeleton

Create a functional React component called ColorButton that accepts props and returns a button element with the text Click me inside.

React

// Your code here

Need a hint?

Start by writing a function named ColorButton that returns a simple button with fixed text.

2

Add props for text and color

Modify the ColorButton component to accept text and color props. Use text as the button's displayed text and set the button's background color style to the color prop.

React

function ColorButton(props) {
  // Use props.text for button text and props.color for background color
  return {props.text};
}

Need a hint?

Use props.text inside the button and set style={{ backgroundColor: props.color }} on the button element.

3

Render three ColorButton components with different props

In the main App component, render three ColorButton components with these exact props: text="Save" and color="green", text="Cancel" and color="gray", and text="Delete" and color="red".

React

function ColorButton(props) {
  return {props.text};
}

function App() {
  return (
    
      {/* Render ColorButton components here with correct props */}
    
  );
}

Need a hint?

Use the ColorButton component three times inside App with the exact props given.

4

Export App component as default

Add the line export default App; at the end of the file to export the App component.

React

function ColorButton(props) {
  return {props.text};
}

function App() {
  return (
    
      
      
      
    
  );
}

// Export App component

Need a hint?

Write export default App; at the end to make the App component usable by React.