Lahirutech

npm install mongoose express cors dotenv

Lahirutech

npm init -y

Lahirutech

import React from 'react';
// importing the library 
import styled from 'styled-components';

// defining the styles

const AddButton = styled.button`
  margin: 40px;
  border: 5px black;
`;

Lahirutech

import React from 'react';
import styles from './cart.module.scss';

const Cart = () => (
  <div className="btnGrp">
    <Button className="styles.addBtn"> Add Me </Button>
  <Button className="styles.addBtn"> Add Me </Button>
  </div>
);

Lahirutech

import React from 'react';
import './cart.css';

const Cart = () => (
  <div className="btnGrp">
    <Button className="addBtn"> Add Me </Button>
  <Button className="addBtn"> Add Me </Button>
  </div>
);

Lahirutech

// cart.css
.addBtn {
  margin: 40px;
  border: 5px black;
}

.btnGrp {
  font-size: 16px;
  text-align: center;
}

Lahirutech

<div>
      Home page cart:{countContext.countState}
      <button onClick={() => countContext.countDispatch("increment")}>
        Add Item
      </button>
      <button onClick={() => countContext.countDispatch("decrement")}>
        Remove Item
      </button>
      <button onClick={() => countContext.countDispatch("reset")}>Clear</button>
</div>

Lahirutech

import React, { useContext } from "react";
import { CountContext } from "../App";

function ComponentA() {
  const countContext = useContext(CountContext);
  return (
    <div>
      Home page cart:{countContext.countState}
      <button onClick={() => countContext.countDispatch("increment")}>
        Add Item

Lahirutech

import React, { useReducer } from "react";
import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";
import ComponentC from "./components/ComponentC";

const initialState = 0;
const reducer = (state, action) => {
  switch (action) {
    case "increment":
      return state + 1;

Lahirutech

const reducer = (state, action) => {
  switch (action) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    case "reset":
      return initialState;
    default:
      return state;