Skip to content

Latest commit

 

History

History
43 lines (28 loc) · 2.39 KB

README.md

File metadata and controls

43 lines (28 loc) · 2.39 KB
Raw

Título do Curso: SOLID aplicado ao React: melhorando a modularidade e flexibilidade do código

Curso prático de SOLID em React, abordando todos os cinco princípios de design — Responsabilidade Única, Aberto/Fechado, Substituição de Liskov, Segregação de Interfaces e Inversão de Dependência. Aprenda a estruturar componentes e hooks customizados de forma modular, reutilizável e testável. Este curso mostra como aplicar os princípios SOLID para criar uma base de código flexível, desacoplada e escalável. Ideal para desenvolvedores que buscam fortalecer a manutenção e qualidade do código em React.

🔨 Funcionalidades do Projeto

O curso abrange a refatoração do Front-end de um e-commerce chamado useDev:

  • Listagem de categorias e produtos.
  • Exibição do detalhes do produto.
  • Detalhes do carrinho de compras.

✔️ Técnicas e Tecnologias Utilizadas

As principais técnicas e tecnologias abordadas são:

  • SRP (Responsabilidade Única): componentes Button e Input apenas renderizam a label, sem lógica extra.
  • OCP (Aberto/Fechado): extensível para novos comportamentos sem alterar o código base dos componentes.
  • LSP (Substituição de Liskov): componentes podem ser trocados por versões especializadas sem quebrar a lógica.
  • ISP (Segregação de Interfaces): interfaces de props incluem apenas o necessário, mantendo os componentes leves.
  • DIP (Inversão de Dependência): hooks customizados dependem de abstrações, não de implementações concretas.

🎯 Desafios do Curso

Implementação de práticas avançadas, como:

  • Estruturar componentes seguindo o princípio de Responsabilidade Única (SRP).
  • Aplicar a Inversão de Dependência (DIP) ao utilizar serviços HTTP abstratos.
  • Extender componentes sem modificar a lógica base, seguindo o princípio Aberto/Fechado (OCP).
  • Desacoplar a lógica do ProductService do useFetch custom hook.

🛠️ Abrir e Rodar o Projeto

Após baixar o projeto, você pode abrir com seu editor de código preferido. Siga estes passos:

  • Abra o terminal no diretório do projeto.
  • Execute npm install para instalar as dependências.
  • Inicie o servidor de desenvolvimento com npm run dev.
  • Acesse http://localhost:5173 no navegador para ver o projeto ou o endereço que for exibido no terminal.