Visão Geral

O Curso Front-End Development with React and Modern Practices, oferece uma abordagem abrangente e prática ao desenvolvimento de aplicações modernas utilizando o ecossistema React e ferramentas de ponta do desenvolvimento frontend. Com foco em escalabilidade, performance e qualidade de código, este curso guia os participantes desde os fundamentos até tópicos avançados de arquitetura e engenharia de software aplicada ao frontend.

Ao longo do Curso Front-End Development with React and Modern Practices, os alunos dominarão a criação de interfaces ricas e responsivas com React, utilizando componentização baseada em Atomic Design, gerenciamento avançado de estado com Redux e tipagem estática com TypeScript. Serão abordadas as práticas de code splitting, lazy loading, memoization, e virtualização de listas, com foco em performance e experiência do usuário.

Além disso, o Curso Front-End Development with React and Modern Practices, inclui uma imersão em boas práticas arquiteturais modernas, como a aplicação de princípios SOLID no frontend, uso de microfrontends e ferramentas de UI como Material UI e Tailwind CSS. Os participantes também aprenderão a configurar testes automatizados unitários e end-to-end com Jest, React Testing Library, Cypress e Playwright, além de consumir APIs REST e GraphQL com Axios, Fetch API e Apollo Client.

O Curso Front-End Development with React and Modern Practices, simula um ambiente de desenvolvimento realista com pipelines modernos, técnicas de debugging, controle de versionamento e integração com ferramentas de design system, test coverage e observabilidade. O uso do Vite como bundler proporciona um fluxo de trabalho ágil, com feedback rápido e compatibilidade com as ferramentas modernas do mercado.

Objetivo

Após realizar este curso Front-End Development with React and Modern Practices, você será capaz de:

• Criar aplicações modernas com React, Redux e TypeScript
• Aplicar boas práticas de arquitetura frontend (SOLID, Atomic Design, microfrontend)
• Utilizar frameworks modernos de build como Vite
• Criar componentes performáticos e reutilizáveis
• Realizar testes automatizados com Jest, Testing Library e Cypress
• Otimizar o desempenho da aplicação e implementar estratégias de debugging e virtualização
• Consumir APIs REST e GraphQL com técnicas modernas

Publico Alvo

• Desenvolvedores iniciantes ou intermediários que desejam se aprofundar no ecossistema moderno de desenvolvimento frontend com React.
• Desenvolvedores de outras stacks (como backend) que querem entender melhor o desenvolvimento do lado do cliente e aprender a criar interfaces interativas e performáticas.
• Estudantes de tecnologia ou profissionais em transição de carreira para a área de desenvolvimento frontend.
• Designers com conhecimento técnico que desejam evoluir para o desenvolvimento de interfaces com foco em código limpo e escalável.
• Equipes de TI e squads ágeis que queiram padronizar e modernizar suas aplicações web frontend.
• Desenvolvedores que desejam migrar para React ou modernizar suas práticas
• Profissionais interessados em construir aplicações escaláveis, performáticas e bem testadas

Pre-Requisitos

• Para melhor aproveitamento do curso, é recomendado que o participante tenha:
• Conhecimentos básicos de lógica de programação (condições, laços, funções).
• Noções básicas de HTML e CSS (estrutura de páginas e estilização básica).
• Noções básicas de JavaScript (declaração de variáveis, funções e manipulação de DOM).
• Importante: Não é necessário conhecimento prévio em React ou TypeScript — o curso cobre esses assuntos desde os fundamentos até tópicos avançados.

Informações Gerais

Materiais

Conteúdo Programatico

Módulo 1: Fundamentos da Arquitetura Frontend

1. Princípios SOLID aplicados ao frontend
2. Atomic Design e organização de componentes
3. Microfrontend: conceito, estrutura e ferramentas
4. Uso de bibliotecas de design como Material UI

Módulo 2: HTML e CSS Moderno

1. Semântica, acessibilidade e estrutura
2. Metodologia BEM
3. Tailwind CSS: instalação e utilização
4. Styled Components: CSS-in-JS

Módulo 3: JavaScript ES6+

1. Let/const, arrow functions, spread/rest
2. Promises, async/await
3. Módulos, template strings e destructuring

Módulo 4: React Essentials

1. Criando uma aplicação com Vite
2. JSX e renderização de elementos
3. Componentes funcionais e props
4. Estado e eventos com useState

Módulo 5: Hooks e Navegação

1. useEffect, useContext, useRef
2. Custom Hooks
3. Navegação com React Router (v6+)

Módulo 6: Redux e Gerenciamento de Estado

1. Conceito de store, reducers, actions
2. Redux Toolkit: simplificando Redux
3. Integração com React
4. Uso com TypeScript

Módulo 7: Tipagem com TypeScript

1. Tipos primitivos e personalizados
2. Tipagem de props e estados
3. Interfaces, generics e integração com bibliotecas

Módulo 8: Testes Automatizados

1. Testes unitários com Jest e React Testing Library
2. Simulação de eventos e asserts
3. Testes End-to-End com Cypress e Playwright

Módulo 9: Performance e Otimização

1. Code splitting com React.lazy e Suspense
2. Memoization com useMemo e useCallback
3. Virtualização de listas com react-window
4. Debugging com DevTools, React Profiler e Lighthouse
5. Estratégias para reduzir tempo de resposta

Módulo 10: Consumo de APIs

1. Fetch API: requisições simples
2. Axios: requisições e interceptadores
3. GraphQL com Apollo Client:
4. Queries e Mutations
5. Cache e otimizações