Projeto Contador no React

Bom, a ideia é criar projetos básicos com diversos conceitos do mundo react e buscar aprimorar cada vez mais, estou disponibilzando esse projeto que fiz com react, é simples, mas aprendi muitos conceitos. É um projeto simples, mas que aborda minhas stacks:

• Vite
• React
• TypeScript
• Zustand

No componente principal App.tsx temos:

import useCountStore from './store/useCountStore'
import './App.css

function App() {
  const count = useCountStore((state)=> state.count)
  const increment = useCountStore((state)=> state.increment)
  const decrement = useCountStore((state)=> state.decrement)

  return (
    <div className='card'>
      <h1>Contador</h1>
      <p>Contagem: <span className='count'>{count}</span></p>
      <div className='buttons'>
        <button onClick={increment}>Incrementar</button>
        <button onClick={decrement}>Decrementar</button>
      </div>
    </div>
  )
}

export default App`

No App.css

body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
}

p {
  text-align: center;
}

.counter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 20px;
}

.count {
  font-size: 24px;
  margin: 0 10px;
}

.buttons {
  display: flex;
  justify-content:center;
}

button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}

button:hover {
  background-color: #ddd;
}

Na pasta Store/useCountStore.ts

import { create } from "zustand";

type CountStore = {
    count: number;
    increment: ()=>void;
    decrement: ()=>void;
}
const useCountStore = create<CountStore>((set)=>({
count: 0,
increment: ()=> set((state)=>({count:state.count+1})),
decrement: ()=> set((state)=>({count:state.count-1})),
}))

export default useCountStore

É necessário instalar o gerenciador de estados zustand: npm i zustand

img