Hands-On - Simple Counter

Goal : Build Lift State Up - Hands-On Simple Counter App

the step-by-step procedure to implement a simple Counter React App:

1. Setup Your React Environment: Make sure your development environment is set up with React. Use create-react-app or another method to scaffold a new React application.

2. Install Bootstrap: Use the following command to install Bootstrap:

   npm install bootstrap

3. Import Bootstrap Styles: Add the following import statement at the top of your App.jsx file or index.js file:

   import 'bootstrap/dist/css/bootstrap.min.css';

4. Create the Counter Component:

   • Create a functional component named Counter that receives count, onIncrement, and onDecrement as props.

   • Add Bootstrap styles to the buttons for better appearance.

5. Set Up the Parent Component:

   • In the App component, use the useState hook to manage the count state.

   • Define handleIncrement and handleDecrement functions to update the state when the buttons are clicked.

   • Pass these functions and the count state as props to the Counter component.

App.jsx

// App.jsx
// Import required libraries
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

// Counter Component
function Counter({ count, onIncrement, onDecrement }) {
  return (
    <div className="text-center mt-5">
      <h1>Counter App</h1>
      <h2 className="my-4">Count: {count}</h2>
      <button
        className="btn btn-primary mx-2"
        onClick={onIncrement}
      >
        Increment
      </button>
      <button
        className="btn btn-danger mx-2"
        onClick={onDecrement}
      >
        Decrement
      </button>
    </div>
  );
}

// App Component (Parent)
function App() {
  const [count, setCount] = useState(0);

  // Handlers for increment and decrement
  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);

  return (
    <div className="container card border-3 ">
      <Counter
        count={count}
        onIncrement={handleIncrement}
        onDecrement={handleDecrement}
      />
    </div>
  );
}

export default App;

1. Render and Test:

   • Run your app using npm start and test the functionality of the increment and decrement buttons.

This code will create a basic React Counter App with styled buttons using Bootstrap. Let me know if you'd like further assistance!