Projeto desenvolvido com backend em Java SpringBoot e frontend em React Ts
assets
: Serve para armazenar imagens (imagens leves, se forem pesadas sempre prefira hospedar em uma CDN), ícones, etc.
components
: Componentes reutilizáveis da aplicação. Componentes que são unidades para sua aplicação, um button, um modal, etc.
context
: Onde serão mantidos todos os contextos da aplicação
pages
: As pages que usam vários componentes. É essa a página que o usuário vai ver.
hooks
: Essa pasta é utilizada para armazenar hooks que são genéricos, tem interação com hooks do React (useState, useEffet) e normalmente são reutilizáveis em qualquer projeto, exemplos: useScreenSize, useLocalStorage, useSessionStorage, useUserActive.
services
: Aqui ficam as configurações de HTTP clients, normalmente utilizando axios.
store
: Ficam as definições de state managers, context api, zustand, redux.
types
: Armazena as tipagens de typescript (types e interfaces) que são comuns em várias áreas do projeto.
util
: Funções utilitárias como formatCurrency, formatPhone, convertTimezone, parsePhone, etc. (Javascript puro)
test
: Onde fica o setup para os testes
Para importar o CSS como module
- Adicionar no arquivo
index.d.ts
:declare module "*.module.css"; declare module "*.module.scss";
- Em
vite.config.ts
, adicionar:"plugins": [{ "name": "typescript-plugin-css-modules" }]
Para realizar testes foi utilizado o vitest
- Para adicionar ao projeto:
yarn add -D vitest
- Caso já esteja com vite em package.json adicionar (em scripts):
"test":"vitest"
- Adicionar as seguintes bibliotecas (npm ou yarn):
-
@testing-library/react
-
@testing-library/jest-dom
-
@testing-library/react-hooks
-
@testing-library/user-event
-
jest-without-globals
Exemplo:
yarn add @testing-library/user-event
-
Em
./src/
criar uma pasta chamadatests
e dentro dessa, um arquivo denominadosetup.ts
, dentro dele, adicionar:Esse arquivo será responsável por gerenciar os testes
import "@testing-library/jest-dom"; import '@testing-library/jest-dom/extend-expect'
-
Em
vite.config.ts
adicionar "test", arrumar import "from 'vitest/config'" e não esquecer as referências./// <reference types="vitest" /> /// <reference types="vite/client" /> import { defineConfig } from 'vitest/config'; ... export default defineCongi({ ... test: { globals: true, environment: "jsdom", setupFiles: "./src/tests/setup.ts", css: true, } })
Para o controle de states da aplicação foi utilizado o Redux, para adicioná-lo no projeto:
yarn add @reduxjs/toolkit react-redux