> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/react-state-and-styling/hands-on-simple-counter.md).

# 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:

   ```bash
   npm install bootstrap
   ```
3. **Import Bootstrap Styles**: Add the following import statement at the top of your `App.jsx` file or `index.js` file:

   ```jsx
   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 <mark style="color:orange;">`useState`</mark> hook to manage the `count` state.
   * Define <mark style="color:green;">`handleIncrement`</mark> and <mark style="color:red;">`handleDecrement`</mark> 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

```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.

<figure><img src="/files/OP9LgRblZK0bEQmpTcTV" alt="" width="375"><figcaption></figcaption></figure>

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