Nessa trilha, você aprenderá os fundamentos essenciais para iniciar sua jornada no React.js, um dos ecossistemas mais incríveis para construir aplicações modernas, interativas e escaláveis.

Details to know

Add to your LinkedIn profile
September 2026
7 assignments
See how employees at top companies are mastering in-demand skills

There are 4 modules in this course
Nesse módulo você dará os seus primeiros passos com o React entendendo o que é React e o que não é, DOM x Virtual DOM, árvore de renderização, reconciliação, como reutilizar código por meio de componentes, formas de rodar o React e como criar o seu primeiro "Hello World" Nesse módulo você vai se aprofundar na estruturação de projetos React: HTML, CSS, JSX, componentes, propriedades, estilização com TailwindCSS. Além disso, vai aplicar esses conceitos na prática em um projeto de Calculadora. Nesse módulo, você irá dar vida aos elementos no React. Começará entendendo sobre eventos, estados, React Hooks, renderizações condicionais, renderizações de listas, filtragem de listas, APIs de Contexto, Efeitos e Hooks Customizados. Além disso, também aplicará de forma prática esses conceitos no projeto da Calculadora.
What's included
58 videos4 readings2 assignments
58 videos•Total 331 minutes
- O que é React e o que não é•5 minutes
- Tipos de Aplicações Web•5 minutes
- DOM x Virtual DOM•4 minutes
- Árvore de Renderização do React•2 minutes
- O Caso Chat do Facebook-enhanced•3 minutes
- Componentização e Reutilização•5 minutes
- Componentização: Um Exemplo Prático•11 minutes
- Formas de Rodar o React•8 minutes
- Criando arquivo base•3 minutes
- Extensões Úteis para o React no VSCode•2 minutes
- Nosso primeiro "Hello World"•3 minutes
- Recap•2 minutes
- JSX - JavaScript XML•4 minutes
- Fragmentos•5 minutes
- O que é Babel.js•6 minutes
- Testando com Babel REPL•5 minutes
- Tipos de CSS e Como Vamos Estilizar o HTML•7 minutes
- Teoria dos Componentes•5 minutes
- Criando um Componente Básico•7 minutes
- Teoria das Propriedades•8 minutes
- Criando Propriedades para o Componente•12 minutes
- Requisitos da Calculadora•3 minutes
- Analisando Layout e Definindo Design Tokens•7 minutes
- Componente: Text•9 minutes
- Componente: Button•7 minutes
- Componente: Card•2 minutes
- Componente: Calculadora•14 minutes
- Componente: Histórico de Operações•4 minutes
- Finalizando Layout•4 minutes
- Conclusão•2 minutes
- Introdução•2 minutes
- Atualizando o Modelo•1 minute
- Teoria dos Eventos•9 minutes
- Criando Eventos na Prática•11 minutes
- O que são React Hooks•7 minutes
- Explicando o useState•4 minutes
- Aplicando o useState•4 minutes
- O prevValue do useState•4 minutes
- Condicionais•8 minutes
- Exibição de Listas•6 minutes
- Filtragem de Listas•6 minutes
- Aplicando conceito de listas na calculadora•10 minutes
- Criando eventos de clique na calculadora•3 minutes
- Mostrando operação e resultado no display da calculadora•20 minutes
- Arrumando bug do espaço•3 minutes
- Alerta sobre o “eval” - Grandes poderes, grandes responsabilidades•3 minutes
- O que é API de contexto e como se diferencia do estado•7 minutes
- Criando estado global com createContext e useContext•14 minutes
- Persistindo e listando histórico de operação pela API de contexto•8 minutes
- O que é o “ciclo de vida” de um componente•3 minutes
- Função de callback do useEffect•2 minutes
- Função de retorno do callback do useEffect•4 minutes
- Dependências do useEffect•3 minutes
- Exemplo prático de useEffect•8 minutes
- Persistir histórico de operações no localStorage•4 minutes
- Consumir histórico de operações ao recarregar a página•2 minutes
- O que são hooks customizados•5 minutes
- Criando o custom hook useCalculator•5 minutes
4 readings•Total 40 minutes
- Notion - Fundamentos do React•10 minutes
- Notion - Fundamentos do React•10 minutes
- Figma - Calculadora•10 minutes
- Notion - Fundamentos do React•10 minutes
2 assignments•Total 60 minutes
- Quiz - Iniciação e estruturação•30 minutes
- Quiz - Interatividade•30 minutes
Nesse módulo, você irá aproveitar o conhecimento do módulo anterior para criar o seu primeiro projeto React com um tooling: Vite. No ToDo, você aprenderá sobre componentização, estilização e variantes, estados do React, armazenamento local do navegador (localStorage) e até sobre como trabalhar com pending states (skeletons, spinners) ao simular requisições assíncronas.
What's included
30 videos1 reading2 assignments
30 videos•Total 251 minutes
- Entendendo o Projeto•3 minutes
- Criando Projeto com Vite•9 minutes
- Zerando o Conteúdo Padrão do Vite•4 minutes
- Preparando o Tailwind•3 minutes
- Estendendo Valores no Tailwind•9 minutes
- Exportando Arquivos Estáticos•9 minutes
- Criando Componente Text com CVA•20 minutes
- Criando Componente Icon•15 minutes
- Criando Componente Badge•7 minutes
- Criando Componente Button•12 minutes
- Criando Componente ButtonIcon•14 minutes
- Criando Componente Input Text•7 minutes
- Criando Componente Input Checkbox•14 minutes
- Criando Componente Card•5 minutes
- Criando Componente Container•5 minutes
- Criando Componente Skeleton•17 minutes
- Roteando Página de Componentes•16 minutes
- Estruturando Corpo do Layout•6 minutes
- Criando Componente de Resumo das Tarefas•5 minutes
- Criando Componente da Tarefa•10 minutes
- Criando Componente de Lista de Tarefas•4 minutes
- Preparando o Local Storage como Banco de Dados•7 minutes
- Preparar Tarefa•6 minutes
- Listar Tarefas•4 minutes
- Coletando Dados do Formulário•7 minutes
- Atualizando Tarefa•5 minutes
- Alterar Status da Tarefa•4 minutes
- Deletar Tarefa•3 minutes
- Atualizando Badges de Resumo das Tarefas•3 minutes
- Simulando Requisições HTTP•20 minutes
1 reading•Total 10 minutes
- Figma - Projeto Todo•10 minutes
2 assignments•Total 60 minutes
- Quiz - Projeto ToDo•30 minutes
- Desafio - HairDay•30 minutes
Nesse módulo, iniciaremos a introdução teórica de novos conceitos que te auxiliarão no desenvolvimento de aplicações React. Começaremos por hooks mais específicos como manipulação de elementos da DOM ou memoização de trechos de código para melhoria de performance. Em seguida, entenderemos mais sobre como trabalhar com requisições assíncronas no React. Nesse módulo, começaremos a parte prática desse nível ao desenvolver o projeto Álbum de Fotos. Listar fotos, criar álbuns, realizar upload de arquivos, implementar filtros de buscas e comunicar com API são algumas das funcionalidades que exploraremos nesse projeto.
What's included
59 videos3 readings3 assignments
59 videos•Total 489 minutes
- Introdução ao módulo•2 minutes
- Referências (useRef)•11 minutes
- Manipulando scroll com referência•11 minutes
- Memoização de dados com useMemo•8 minutes
- Exemplo com useMemo•10 minutes
- Memoização de funções com useCallback•3 minutes
- Exemplo com useCallback•12 minutes
- Ferramenta útil para analise de renderizações•5 minutes
- Preparando json-server•4 minutes
- Requisição GET manual•11 minutes
- Requisição de outros protocolos•11 minutes
- Requisição de API com React Query•14 minutes
- Entendendo o projeto•3 minutes
- Clonando projeto base•5 minutes
- Rodando o backend e configurando Postman•5 minutes
- Componente InputText•18 minutes
- Componente InputCheckbox•13 minutes
- Montando layout do componente InputSingleFile - Estado parado•13 minutes
- Montando layout do componente InputSingleFile - Estado com arquivo•8 minutes
- Definindo comportamento do componente InputSingleFile - Alternando estados•8 minutes
- Definindo comportamento do componente InputSingleFile - Aplicando validações•7 minutes
- Definindo comportamento do componente InputSingleFile - Aplicando o replaceBy•7 minutes
- Entendendo o Radix UI•2 minutes
- Componente Dialog•22 minutes
- Estruturando roteamento•12 minutes
- Componente Header•6 minutes
- Componente PhotosSearch com debounce•17 minutes
- Componente MainContent•2 minutes
- Componente PhotoWidget•22 minutes
- Mock da lista de fotos•11 minutes
- Mock do filtro por álbuns•10 minutes
- Mock da página de detalhes da foto - Header da página•11 minutes
- Mock da página de detalhes da foto - Imagem e botão de excluir•6 minutes
- Mock da página de detalhes da foto - Lista de álbuns selecionáveis•15 minutes
- Mock do dialog de “Adicionar foto” - Layout•10 minutes
- Mock do dialog de “Criar álbum” - Layout•11 minutes
- Mock do dialog de “Criar álbum” - Adaptando ImagePreview para ser selecionável•8 minutes
- Criando dados com Postman•7 minutes
- Preparando helper para API•7 minutes
- Configurando React Query•2 minutes
- Retornando lista de álbuns•7 minutes
- Retornando lista de fotos•5 minutes
- Conhecendo o NUQS•3 minutes
- Adicionando filtro por álbum na lista de fotos•8 minutes
- Adicionando filtro por texto na lista de fotos•4 minutes
- Retornando detalhe da foto•8 minutes
- Navegando entre fotos•2 minutes
- Conhecendo o Zod•4 minutes
- Nova foto - montando schema e validando campos•12 minutes
- Nova foto - limpando formulário ao cancelar•2 minutes
- Nova foto - selecionando álbuns para fotos•5 minutes
- Nova foto - criando foto via API•10 minutes
- Nova foto - mostrando feedback com toast notification•5 minutes
- Novo álbum - montando schema e validando campos•5 minutes
- Novo álbum - adicionando fotos ao criar um novo álbum•4 minutes
- Novo álbum - criando novo álbum via API•13 minutes
- Gerenciando fotos em álbuns•9 minutes
- Deletando foto•6 minutes
- Deploy da aplicação no Railway•9 minutes
3 readings•Total 30 minutes
- Notion - Fundamentos Avançados•10 minutes
- Figma - Projeto Álbum de fotos•10 minutes
- Template - Projeto Álbum de fotos•10 minutes
3 assignments•Total 90 minutes
- Desafio - Refund•30 minutes
- Quiz - Avançandos nos Fundamentos - Teoria•30 minutes
- Quiz - Projeto Álbum de fotos•30 minutes
Nesse módulo, vamos explorar as principais novidades do React 19 e a nova forma de pensar o desenvolvimento de interfaces. Começaremos pelas Actions e pelos formulários modernos, simplificando o controle de envio, erros e carregamento com hooks como useActionState e useFormStatus. Em seguida, criaremos experiências mais fluidas com UI otimista e atualizações não urgentes usando useOptimistic e useTransition, além de aprender a lidar com requisições assíncronas de forma declarativa com Suspense, use e lazy. Por fim, conheceremos recursos que tornam suas aplicações mais precisas e performáticas, como useEffectEvent, o componente Activity e o React Compiler, fechando com outras melhorias que facilitam o dia a dia.
What's included
2 videos1 reading8 plugins
2 videos•Total 3 minutes
- Introdução•2 minutes
- Encerramento•2 minutes
1 reading•Total 10 minutes
- Link Content Studio•10 minutes
8 plugins
- React 19 como mudança de modelo mental•0 minutes
- Actions e formulários modernos•0 minutes
- UI otimista e atualizações não urgentes•0 minutes
- Carregamento assíncrono com Suspense•0 minutes
- Effects mais precisos com useEffectEvent•0 minutes
- Estado preservado e performance com React 19•0 minutes
- Outras melhorias para conhecer•0 minutes
- Revisão final•0 minutes
Instructor

Offered by
Why people choose Coursera for their career

Felipe M.

Jennifer J.

Larry W.

Chaitanya A.
Advance your career with an online degree
Earn a degree from world-class universities - 100% online
Frequently asked questions
To access course materials, assignments, and earn a Certificate, you'll need to purchase the Certificate experience when you enroll in a course. Eligible learners may also have the option to start with a Free Trial. Some courses may also offer a Full Course, No Certificate option. This lets you access course materials, submit required assessments, and receive a final grade, but you won't be able to earn or purchase a Certificate.
When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.
More questions
Financial aid available,



