Plano de Ensino 🧭
Curso: Desenvolvimento Frontend com React
Público-alvo: Estudantes de ADS, Ciência da Computação e Desenvolvedores de Software
Carga Horária: 20 Aulas (80 Horas Teórico-Práticas)
🎯 1. Objetivos do Curso
- Compreender os fundamentos conceituais e arquiteturais de Desenvolvimento Frontend com React.
- Aplicar padrões de projeto, sintaxe moderna e boas práticas da indústria.
- Desenvolver soluções completas através de exercícios práticos e desafios de projeto.
📚 2. Cronograma de Aulas (Matriz de 20 Semanas)
| Aula | Tema Central | Atividades e Entregas |
|---|---|---|
| 01 | Introdução ao Frontend Moderno | Teoria, Prática Guiada, Quiz e Exercícios |
| 02 | Fundamentos: JSX, Componentes e Props | Teoria, Prática Guiada, Quiz e Exercícios |
| 03 | Hooks I: useState e Estado Local | Teoria, Prática Guiada, Quiz e Exercícios |
| 04 | Hooks II: useEffect e Ciclo de Vida | Teoria, Prática Guiada, Quiz e Exercícios |
| 05 | Estilização: CSS Modules e Styled Components | Teoria, Prática Guiada, Quiz e Exercícios |
| 06 | Formulários e Validação (React Hook Form) | Teoria, Prática Guiada, Quiz e Exercícios |
| 07 | React Router: Navegação SPA ️ | Teoria, Prática Guiada, Quiz e Exercícios |
| 08 | Consumo de APIs: Fetch e Axios | Teoria, Prática Guiada, Quiz e Exercícios |
| 09 | Context API: Estado Global Simples | Teoria, Prática Guiada, Quiz e Exercícios |
| 10 | Hooks Avançados: useMemo, useCallback e useRef ️ | Teoria, Prática Guiada, Quiz e Exercícios |
| 11 | Performance: React.memo e Lazy Loading | Teoria, Prática Guiada, Quiz e Exercícios |
| 12 | Estado Global Avançado: Redux Toolkit | Teoria, Prática Guiada, Quiz e Exercícios |
| 13 | Testes Unitários: Vitest e React Testing Library | Teoria, Prática Guiada, Quiz e Exercícios |
| 14 | Integração com Backend: Firebase e Supabase ️ | Teoria, Prática Guiada, Quiz e Exercícios |
| 15 | PWA e Deploy: Colocando no Ar! | Teoria, Prática Guiada, Quiz e Exercícios |
| 16 | Projeto Final: Dashboard Completo | Teoria, Prática Guiada, Quiz e Exercícios |
| 17 | Hooks Customizados Avançados e Contexto Isolado | Teoria, Prática Guiada, Quiz e Exercícios |
| 18 | Otimização de Renderização com Memoização e Suspense | Teoria, Prática Guiada, Quiz e Exercícios |
| 19 | Gerenciamento de Estado Global Desacoplado | Teoria, Prática Guiada, Quiz e Exercícios |
| 20 | Projeto Capstone: Aplicação React SPA Autônoma Completa | Teoria, Prática Guiada, Quiz e Exercícios |
🧠 3. Metodologia de Ensino
- Teoria Fundamentada: Aulas com conceitos detalhados, diagramas arquiteturais e sintaxe de referência.
- Ciclo Teoria ⇄ Prática: Cada aula conta com Quiz Interativo (10 questões) para validação imediata, Lista de Exercícios Sanfonados (com Gabarito Explicado) e Desafio de Projeto Prático.
- Laboratório Contínuo: Ambientes configurados passo a passo na seção de Setups da plataforma.
💼 4. Competências e Perfil Desenvolvido
- Dominar as ferramentas e fluxos de desenvolvimento de Desenvolvimento Frontend com React.
- Resolver problemas técnicos de alta complexidade com código limpo e performático.
- Construir portfólio prático com 20 projetos aplicados.
📊 5. Critérios de Avaliação
- 20 Listas de Exercícios: Resolução individual dividida em Básico, Intermediário e Desafio.
- 20 Quizzes Interativos: Validação formativa com feedback imediato via JavaScript.
- 20 Desafios de Projetos: Aplicações práticas consolidando o aprendizado de cada unidade.