isaacviannadev

Materiais de Referência — SOLID no Frontend

Artigos

• Konstantin Lebedev — SOLID in React — O melhor artigo sobre o tema, adapta cada princípio para React funcional com hooks e TypeScript
• Applying SOLID to React — Byborg Engineering — Guia conciso com CodeSandbox
• SOLID Principles in TypeScript — LogRocket — Foco em TypeScript puro
• Dependency Inversion in React — cekrem — Deep dive em DIP com exemplos de testes
• SOLID Principle in Next.js using TypeScript — DEV.to — SOLID aplicado no ecossistema Next.js
• SOLID Design Principles in TypeScript — Fullstackmark — Tratamento aprofundado com históri

isaacviannadev

// SRP - Princípio da Responsabilidade Única

// Errado: componente faz tudo
function UserProfile() {
  const [user, setUser] = useState(null)
  useEffect(() => { fetch('/api/user').then(r => r.json()).then(setUser) }, [])
  if (!user) return <Spinner />
  return <div>{user.name} - {formatDate(user.createdAt)}</div>
}

isaacviannadev

export const evaluationsMock: EvaluationType[] = [
  {
    id: '9b871ff2-81ef-431b-a406-e8ca14b7f84f',
    date: '2024-05-17',
    channel: 'WRT_PT_ONLINE',
    grade: 0.8,
    criterias: [
      {
        name: 'PROCESSED_ORDERS',
        achieved: true,

isaacviannadev

const produtos = [
  { id: 1, nome: 'Laptop XYZ', preco: 194.68, categoria: 'Computadores' },
  { id: 2, nome: 'Mouse ABC', preco: 250.61, categoria: 'Acessórios' },
  { id: 3, nome: 'Teclado DEF', preco: 265.93, categoria: 'Acessórios' },
  { id: 4, nome: 'Monitor GHI', preco: 212.82, categoria: 'Monitores' },
  { id: 5, nome: 'Impressora JKL', preco: 227.54, categoria: 'Impressoras' },
  { id: 6, nome: 'Tablet MNO', preco: 70.05, categoria: 'Tablets' },
  { id: 7, nome: 'Smartphone PQR', preco: 192.8, categoria: 'Smartphones' },
  { id: 8, nome: 'Smartwatch STU', preco: 17.46, categoria: 'Wearables' },
  { id: 9, nome: 'Fone de Ouvido VWX', preco: 296.33, categoria: 'Acessórios' },

isaacviannadev

{
  "editor.suggestSelection": "first",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Dracula",
  "explorer.confirmDelete": false,
  "git.enableSmartCommit": true,
  "terminal.integrated.fontFamily": "monospace",
  "editor.fontSize": 12,
  "editor.fontLigatures": true,
  "editor.codeActionsOnSave": {

isaacviannadev

function addProduct(id) {
  let cart = JSON.parse(localStorage.getItem("products")) || [];

  const foundItem = cart.find((product) => product.id === id);
 
  if (foundItem) {
    foundItem.quantidade++;
  } else {
    cart.push({ id: id, qtd: 1 });
  }