Squad Front

Appearance

Júnior 1 ​

Objetivo do Nível ​

Compreender a estrutura do projeto e entregar tarefas simples de interface e lógica básica, demonstrando autonomia em fluxos já estabelecidos e seguindo os padrões de código da equipe.

Objetivo esperado: Cria uma tela com formulário simples e estado local, integrando com componentes do Design System.

Critérios de Conhecimento ​

Fundamentos ​

  • JavaScript Moderno (ES6+): Variáveis (let, const); tipos primitivos; estruturas condicionais (if/else, switch); loops (for, while, forEach, map, filter). Seguir o padrão de Nomenclatura.
  • Funções: Declaração de funções básicas e arrow functions conforme o guia de Declaração de Funções; diferença entre == vs ===.
  • CSS Avançado: Flexbox e noções básicas de Grid; unidades de medida (px, rem, %).
  • Typescript: Noções básicas de Interfaces e Types.

React Core ​

  • Hooks Básicos: Domínio de useState e useEffect (com array de dependências).
  • Componentização: Criação de componentes funcionais usando a sintaxe function.
  • Props & Children: Passagem de dados entre componentes e uso de children.
  • Rotas: Noções básicas de navegação e rotas dinâmicas.

State ​

  • Estado Local: Gerenciamento de estado dentro do componente.
  • Context API: Consumo de contextos globais (ex: Tema, Usuário).
  • Feedback UI: Implementação de loadings simples e tratamento de erros visuais básicos.

Design Patterns ​

  • Controlled vs Uncontrolled: Entender a diferença em formulários.
  • Composição via Props: Uso de props para customizar o comportamento visual.
  • Props Driling: Saber identificar quando o estado está sendo passado por muitos níveis.

Arquitetura ​

  • Separação de Camadas: Entendimento claro da Hierarquia de Camadas (Screen, Feature, Application).
  • Conceitos: Aplicação básica de DRY (evitar duplicação óbvia), KISS e Clean Code (funções pequenas).
  • Organização de Pastas: Seguir o padrão de pastas do projeto sem criar estruturas customizadas.

Performance/Render ​

  • React.memo: Noções básicas de quando evitar re-renderizações desnecessárias. Ver guia de Performance.

Testes ​

  • Execução: Saber rodar os testes existentes e entender o que está sendo testado conforme a Estratégia de Testes.
  • RTL: Familiaridade com o React Testing Library para buscar elementos na tela.

Rede ​

  • Protocolo HTTP: Entendimento de métodos (GET, POST, PUT, DELETE) e Status Codes (2xx, 4xx, 5xx).
  • DevTools: Uso da aba Network para inspecionar requisições.

Segurança ​

  • Segurança de Interface: Evitar o uso de dangerouslySetInnerHTML e entender os riscos.
  • XSS: Compreender como o React protege contra injeção de scripts e como burlar essa proteção acidentalmente.
  • Secrets: Nunca expor chaves de API, tokens ou credenciais no código cliente.
  • Boas Práticas: Conhecimento inicial do guia de segurança web da empresa.

Entregáveis Esperados ​

  • Criação de telas de CRUD simples (Listagem e Formulário).
  • Implementação de validações de formulário simples.
  • Ajustes em componentes existentes seguindo as variantes do Design System.

Como fazer vs Como não fazer ​

Como fazer ​

  • Utilizar o WebStorm e suas ferramentas de refatoração.
  • Seguir o padrão de Nomenclatura do projeto.
  • Criar Pull Requests pequenos e fáceis de revisar.

Como não fazer ​

  • Usar const para declarar componentes.
  • Colocar lógica de negócio pesada dentro do JSX da Screen.
  • Ignorar os erros de lint/prettier no console.