Building a Background Color Changing App with React

Introduction

In this article, we’ll explore how to create a simple background color changing app using React. We’ll walk through the code step by step, explaining each component and concept involved. By the end, you’ll have a clear understanding of how to utilize React state and event handling to build interactive user interfaces.

Setting up the Project

Before diving into the code, ensure you have Node.js and npm installed on your system. We’ll use Create React App to bootstrap our project, making the setup process quick and easy. Run the following command in your terminal:

npx create-react-app color-changer
cd color-changer

Once the project is set up, navigate to the src directory and open the App.js file.

Understanding the Code

Let’s break down the key components and functionalities of our background color changer app:

1. useState Hook: We import the useState hook from React, which allows us to add state variables to functional components. In our App component, we use useState to manage the color state, initializing it with the color “olive”.

import { useState } from "react";

function App() {
  const [color, setColor] = useState("olive");
  
}

2. Color Array: We define an array colors containing various color options that users can choose from to change the background color dynamically.

const colors = ["red", "green","blue","olive","gray","yellow","pink","purple","lavender","white","black"];

3. Rendering UI: Inside the return statement, we render the UI elements. We set the background color of the entire page using the style attribute bound to the color state.

return (
  <>
    <div
      className="w-full h-screen duration-200 "
      style={{ backgroundColor: color }}
    >
      {/* Other code... */}
    </div>
  </>
);

4. Color Buttons: We map through the colors array to render color selection buttons. Each button triggers the setColor function with the corresponding color when clicked.

{colors.map((color) => (
  <button
    key={color}
    onClick={() => setColor(color)}
    className="outline-none px-4 py-1 rounded-full text-white shadow-lg "
    style={{ backgroundColor: color }}
  >
    {color}
  </button>
))}

Key Learnings:

• Utilizing React hooks, such as useState, enables us to manage state within functional components.

• Event handling in React components, like onClick, allows us to define actions in response to user interactions.

• Leveraging dynamic rendering through array mapping enables scalable and maintainable UI components.

Conclusion

In this tutorial, we’ve built a simple yet interactive background color changer app using React. We’ve explored the fundamentals of React state management, event handling, and dynamic UI rendering. With these foundational concepts, you can expand the functionality of the app or apply similar techniques to other React projects. Happy coding!

GitHub Code repo