Aula 1Manipulação e validação de formulários (controlados vs não controlados, bibliotecas: Formik, React Hook Form, VeeValidate)Implemente manipulação robusta de formulários e validação. Compare inputs controlados e não controlados, use bibliotecas como Formik, React Hook Form e VeeValidate, e projete validação, mensagens de erro e fluxos de submissão para formulários complexos.
Estratégias de input controlado vs não controladoFormik e React Hook Form na práticaVeeValidate e padrões de formulários VueRegras de validação síncrona e assíncronaMensagens de erro, UX e acessibilidadeAula 2Bibliotecas de componentes UI e práticas de acessibilidade (Tailwind, Material, Chakra, roles ARIA, navegação por teclado)Aprenda a usar bibliotecas UI modernas mantendo forte acessibilidade. Explore Tailwind, Material UI e Chakra, aplique roles ARIA, gerenciamento de foco e padrões de navegação por teclado para construir interfaces inclusivas e prontas para produção.
Sistemas de design com Tailwind e classes utilitáriasPadrões de componentes Material UI e ChakraHTML semântico e estratégias de roles ARIAGerenciamento de foco e navegação por tecladoContraste de cores, temas e movimento reduzidoAula 3Escolha de framework frontend e justificativa (React, Vue, Svelte) e tradeoffs do ecossistemaAvalie e justifique sua escolha de framework frontend. Compare arquiteturas React, Vue e Svelte, maturidade do ecossistema, performance e curvas de aprendizado para selecionar e defender a melhor opção para cada contexto de projeto.
Conceitos centrais React, Vue e SvelteMaturidade do ecossistema e suporte da comunidadeTradeoffs de performance e tamanho do bundleIntegração TypeScript e ferramentasFrameworks de decisão para projetos reaisAula 4Build, bundling e otimização: Webpack/Vite/Rollup, code splitting, tree-shaking, manipulação de assetsDomine ferramentas modernas de build para frontends performáticos. Compare Webpack, Vite e Rollup, configure code splitting e tree-shaking, otimize manipulação de assets, cache e source maps para entregar bundles rápidos e manuteníveis.
Comparando setups Webpack, Vite e RollupCode splitting e imports dinâmicosTree-shaking e eliminação de código mortoOtimizando imagens, fontes e assets estáticosEstratégias de cache, hashes e source mapsAula 5Testes client-side: testes unitários de componentes, testes de integração, escolhas de bibliotecas de teste e exemplosDesenvolva estratégia robusta de testes client-side. Aprenda testes unitários para componentes, testes de integração em rotas e APIs, e como escolher entre Jest, Vitest, Cypress e Testing Library para criar suítes confiáveis e manuteníveis.
Testes unitários de componentes UI isoladosTestes de integração para fluxos e roteamentoUsando Testing Library para testes centrados no usuárioEscolhendo Jest, Vitest, Cypress ou PlaywrightMocking APIs e lidando com testes instáveisAula 6Configuração local de desenvolvimento e ambiente: variáveis de ambiente, arquivos .env, feature flags para frontendConfigure ambientes frontend confiáveis para setups locais e cloud. Aprenda a gerenciar variáveis de ambiente, arquivos .env, injeção em tempo de build e feature flags para alternar funcionalidades com segurança entre desenvolvimento, staging e produção.
Gerenciando arquivos .env e variáveis de buildSeparando configs dev, staging e produçãoConfiguração em runtime e segurança de ambienteImplementando feature flags no frontendGerenciamento de segredos e armadilhas de configuraçãoAula 7Estrutura de projeto e convenções de pastas para single-page apps (componentes, páginas, serviços, hooks)Projete estruturas de projeto escaláveis para single-page apps. Aprenda convenções de pastas para componentes, páginas, serviços e hooks, e como organizar utilitários compartilhados, testes e estilos para manter grandes codebases descobríveis e manuteníveis.
Organizando componentes, páginas e layoutsServiços, hooks e camadas de acesso a dadosUtilitários compartilhados, tipos e constantesEstruturando testes e arquivos de storyRefatorando para limites modularesAula 8Padrões de integração de API: clientes REST vs GraphQL, tratamento de erros, retentativas de requisição, timeoutsImplemente padrões robustos de integração de API no cliente. Compare clientes REST e GraphQL, configure Axios ou Fetch, trate erros e retentativas, e projete timeouts, cancelamento e normalização para camadas resilientes de busca de dados.
Configurando clientes REST com Axios ou FetchUsando clientes GraphQL como Apollo ou URQLTratamento global de erros e mensagens ao usuárioRetentativas de requisição, backoff e timeoutsCancelamento, controladores de abort e cacheAula 9Autenticação no frontend: armazenamento de tokens, fluxos de refresh e abordagens seguras com cookiesEntenda padrões seguros de autenticação frontend. Compare localStorage, sessionStorage e cookies, projete fluxos de refresh token e implemente cookies HttpOnly, defesas CSRF e estratégias de logout que protegem usuários em aplicações reais.
Armazenamento de tokens: localStorage vs cookiesImplementando fluxos de refresh token com segurançaCookies HttpOnly e proteção CSRFTratando logout, revogação e rotaçãoTratamento de erros de autenticação e feedback ao usuárioAula 10Opções e padrões de gerenciamento de estado (estado local de componente, Context, Redux/Pinia/MobX, React Query)Compare opções de gerenciamento de estado para frontends complexos. Explore estado local, Context, Redux, Pinia, MobX e React Query, e aprenda padrões para cache, normalização e evitar re-renderizações desnecessárias em grandes aplicações.
Estado local de componente e padrões de liftingContext API para preocupações cross-cuttingDesign de stores Redux, Pinia e MobXEstado do servidor com React Query ou SWRAjuste de performance e padrões de seletoresAula 11Roteamento e rotas protegidas: roteamento client-side, guards de rota, lazy loadingConstrua roteamento client-side confiável com rotas protegidas. Aprenda configuração de rotas, rotas aninhadas, lazy loading e guards de rota que aplicam autenticação e autorização mantendo a navegação rápida e acessível.
Configurando roteadores e rotas client-sideRotas aninhadas e hierarquias de layoutImplementando lazy loading e code splittingGuards de rota baseados em autenticação e redirecionamentosTratando páginas 404 e rotas de fallback
