Calculadora Avançada com React e TypeScript
- Nível: Projetos
- Módulos: 5
- Aulas: 18
- Tempo de leitura: 7h 35min
- Tecnologias: React, TypeScript
- Preço: R$ 67,00
Código do curso: github.com/johnpires/calculadora-avancada-react-typescript
Neste curso você vai construir do zero uma Calculadora Avançada completa usando React 18 e TypeScript. Mais do que criar uma simples calculadora, você vai aprender os fundamentos reais do desenvolvimento frontend moderno: componentes reutilizáveis, tipagem estática, gerenciamento de estado e boas práticas de código. O projeto é hands-on desde a primeira aula — cada módulo entrega uma parte funcional da aplicação que você pode ver rodando no seu navegador.
Você vai criar uma calculadora com operações básicas e científicas, suporte a teclado, tema claro e escuro com Context API, histórico de cálculos e deploy na Vercel. Todas as decisões de design serão explicadas: por que usar TypeScript aqui, por que separar esse componente, como evitar os bugs mais comuns com estado no React. A calculadora usa CSS Modules para estilização, Vitest para testes e Vite como bundler — o mesmo stack usado em projetos profissionais.
Este curso é ideal para quem já conhece o básico de HTML, CSS e JavaScript e quer dar o próximo passo para o desenvolvimento com React e TypeScript. Não é necessário experiência prévia com frameworks. Ao final, você terá um projeto completo publicado online, com código limpo, testado e pronto para o seu portfólio.
O que você vai aprender
Ao final deste curso, você será capaz de:
- Criar projetos React + TypeScript do zero com Vite
- Construir componentes reutilizáveis com props tipadas em TypeScript
- Gerenciar estado complexo com useState e useReducer
- Compartilhar estado global com Context API
- Estilizar componentes com CSS Modules
- Capturar eventos de teclado com useEffect
- Escrever testes unitários com Vitest e React Testing Library
- Fazer deploy de aplicações React na Vercel
Pré-requisitos
Conhecimento básico de HTML, CSS e JavaScript (variáveis, funções, arrays, eventos do DOM). Ter Node.js 18+ instalado. Não é necessária experiência prévia com React, TypeScript ou qualquer framework.
Conteúdo do curso
Módulo 1: Configuração do Ambiente e Estrutura do Projeto
Configure seu ambiente de desenvolvimento e crie a estrutura base do projeto React com TypeScript usando o Vite.
- Instalando Node.js, VS Code e extensões essenciais (20 min)
- Criando o projeto com Vite + React + TypeScript (25 min)
- Estruturando pastas e configurando ESLint e Prettier (20 min)
- Definindo tipos TypeScript para a calculadora (25 min)
Módulo 2: Construindo a Interface da Calculadora
Construa os componentes visuais da calculadora: Display, Button e o layout principal usando CSS Modules.
- Criando o componente Display (25 min)
- Criando o componente Button e ButtonGrid (30 min)
- Montando o layout principal com CSS Grid (25 min)
- Acessibilidade e feedback visual nos botões (20 min)
Módulo 3: Lógica e Gerenciamento de Estado
Implemente a lógica completa da calculadora com useReducer e TypeScript, incluindo tratamento de casos especiais.
- Implementando o reducer da calculadora (35 min)
- Adicionando suporte a teclado com useEffect (25 min)
- Tema claro/escuro com Context API (30 min)
- Exibindo o histórico de cálculos (25 min)
Módulo 4: Qualidade de Código e Testes
Escreva testes unitários e de componente com Vitest e React Testing Library para garantir que a calculadora funciona corretamente.
- Configurando Vitest e React Testing Library (25 min)
- Testando a lógica de cálculo com Vitest (30 min)
- Testando componentes com React Testing Library (30 min)
Módulo 5: Entrega Final e Próximos Passos
Faça o build de produção, publique a calculadora na Vercel e veja para onde ir a partir daqui.
- Build de produção com Vite (20 min)
- Deploy na Vercel: do zero ao ar em 5 minutos (25 min)
- O que você conquistou e seus próximos passos (20 min)