Squad Front

Appearance

Júnior 2 ​

Objetivo do Nível ​

Consolidar o uso dos hooks do React e iniciar a integração com APIs externas de forma segura, tratando estados de carregamento e erro de forma mais robusta e seguindo os guias de estilo da empresa.

Objetivo esperado: Integra uma tela com API real, tratando estados de loading, erro (classes customizadas) e exibindo os dados em componentes de lista complexos.

Critérios de Conhecimento ​

Fundamentos ​

  • Manipulação de Arrays/Objetos: Domínio de spread operator, destructuring, rest parameters e métodos imutáveis.
  • Async/Await: Entendimento profundo de concorrência básica e tratamento de promessas.
  • Typescript Intermediário: Uso de Interfaces para contratos e Types para uniões e estados de UI.
  • Nomenclatura: Seguir rigorosamente o guia de Nomenclatura.

React Core ​

  • Hooks de Performance: Uso correto de useCallback e useMemo para evitar referências instáveis.
  • Custom Hooks: Criação de hooks simples para reutilizar lógica de UI (ex: useModal, useForm).
  • Ref: Uso de useRef para acesso ao DOM ou persistência de valores entre renders.

State ​

  • Server State (TanStack): Uso básico do TanStack Query para useQuery com chaves de cache.
  • Global State: Noções de Redux Toolkit (Slices e Selectors).
  • Persistência: Uso de LocalStorage/Cookies via Actions.

Design Patterns ​

  • Slot Components: Domínio do conceito de composição usando slots (Leading/Trailing).
  • High-Order Components (HOC): Entendimento de como funcionam (embora menos usados em favor de hooks).

Arquitetura ​

  • Camada de Application: Criação de Actions para chamadas de API e acesso a dados externos seguindo a Arquitetura de Camadas.
  • Conceitos: Domínio do DRY, Clean Code (comentários apenas quando necessário) e introdução ao YAGNI e Acessibilidade (semântica HTML).
  • Camada de Feature: Isolamento de lógica de negócio dentro da pasta da funcionalidade seguindo o SoC.
  • Multi-tenant: Entendimento básico de como a aplicação serve múltiplos clientes e o uso de Feature Flags. Ver guia de Multi-tenant.

Performance/Render ​

  • Profiling Básico: Uso do React DevTools para identificar componentes que renderizam em excesso. Ver guia de Performance.
  • Otimização de Listas: Uso correto de chaves (key) únicas e estáveis.

Testes ​

  • Testes de Unidade: Criação de testes para funções utilitárias e componentes visuais puros.
  • Mocks: Noções básicas de como mockar chamadas de API (MSW ou jest mocks).

Rede ​

  • Headers: Entendimento de Content-Type, Authorization (Bearer Token).
  • CORS: Entender por que erros de CORS ocorrem e como se comportar.

Segurança ​

  • Sanitização: Cuidado com dados vindos de inputs do usuário e prevenção de injeções de HTML/CSS.
  • CSRF: Entendimento básico do que é o ataque e como o uso de tokens protege as requisições.
  • Cookies e Sessão: Entendimento de como o JWT é armazenado e a importância de flags como HttpOnly e Secure.

Entregáveis Esperados ​

  • Implementação de fluxos de busca e filtragem com debounce.
  • Criação de componentes compostos reutilizáveis.
  • Integração de formulários com múltiplos passos.

Como fazer vs Como não fazer ​

Como fazer ​

  • Usar Classes de Erro para tratar falhas de API conforme o guia de erros.
  • Documentar props complexas usando JSDoc/TSDoc.
  • Revisar o código de colegas (Peer Review) para aprender novos padrões.

Como não fazer ​

  • Esquecer de limpar efeitos no useEffect (timers, listeners).
  • Criar componentes gigantes (mais de 200 linhas).
  • Ignorar o tratamento de estado "Empty" em listas.