Cursos

React Avançado: Padrões de Design, Performance e Arquitetura

• Nível: Avançado
• Módulos: 8
• Aulas: 24
• Tempo de leitura: 17h 55min
• Tecnologias: React
• Preço: Gratuito

Código do curso: github.com/johnpires/react-avancado-projeto-final

O que você vai aprender

Ao final deste curso, você será capaz de: implementar padrões avançados de composição; gerenciar estado global com Zustand; otimizar performance com memoização e virtualização; escrever testes com Vitest, Testing Library e Playwright; estruturar projetos escaláveis com Feature-Sliced Design.

Pré-requisitos

Experiência sólida com React (hooks, estado, props), conhecimento de TypeScript e ter construído ao menos uma aplicação React completa com consumo de API REST.

Conteúdo do curso

Módulo 1: React 19 e as Novas APIs de Concorrência

Explore as capacidades de concorrência do React 19, incluindo Suspense, useTransition e useOptimistic.

1. Suspense e Renderização Concorrente (45 min)
2. useTransition para Atualizações Não Urgentes (40 min)
3. useOptimistic para Updates Otimistas (40 min)
4. Server e Client Components (45 min)

Módulo 2: Padrões Avançados de Composição de Componentes

Explore padrões como Compound Components, Render Props, HOCs e hooks customizados.

1. Compound Components (50 min)
2. Render Props e Lógica Reutilizável (45 min)
3. Hooks Customizados (50 min)

Módulo 3: Gerenciamento de Estado Escalável com Zustand

Implemente gerenciamento de estado robusto com Zustand em aplicações React.

1. Introdução ao Zustand (45 min)
2. Persistência de Estado com Middlewares (40 min)
3. Middlewares e Devtools (45 min)

Módulo 4: Performance e Otimização de Aplicações React

Otimize rendering, bundle size e carregamento de recursos.

1. Memoization com React.memo, useMemo e useCallback (50 min)
2. Code Splitting e Lazy Loading (45 min)
3. Otimização de Imagens e Assets (40 min)

Módulo 5: Testes Avançados em React

Implemente testes unitários, integração e E2E.

1. Testes Unitários com Vitest (50 min)
2. React Testing Library e Testes de Comportamento (50 min)
3. Testes E2E com Playwright (50 min)

Módulo 6: Acessibilidade e Internacionalização

Crie aplicações acessíveis e multi-idioma.

1. Acessibilidade Web (a11y) (45 min)
2. Internacionalização (i18n) (45 min)

Módulo 7: Arquitetura Frontend Escalável

Estruture aplicações React grandes e escaláveis.

1. Estrutura de Pasta e Organização (40 min)
2. Type Safety e TypeScript Avançado (45 min)

Módulo 8: Projeto Final: Dashboard Analítico Avançado

Aplique todos os conceitos em um projeto real e completo.

1. Planejamento e Requisitos do Projeto (30 min)
2. Implementação do Backend (50 min)
3. Implementação da Interface (50 min)
4. Deploy e Produção (40 min)