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.

React
kurs ist nicht verfügbar in Deutsch (Deutschland)

Wichtige Details

Zu Ihrem LinkedIn-Profil hinzufügen
September 2026
7 Aufgaben
Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

In diesem Kurs gibt es 4 Module
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.
Das ist alles enthalten
58 Videos4 Lektüren2 Aufgaben
58 Videos•Insgesamt 331 Minuten
- O que é React e o que não é•5 Minuten
- Tipos de Aplicações Web•5 Minuten
- DOM x Virtual DOM•4 Minuten
- Árvore de Renderização do React•2 Minuten
- O Caso Chat do Facebook-enhanced•3 Minuten
- Componentização e Reutilização•5 Minuten
- Componentização: Um Exemplo Prático•11 Minuten
- Formas de Rodar o React•8 Minuten
- Criando arquivo base•3 Minuten
- Extensões Úteis para o React no VSCode•2 Minuten
- Nosso primeiro "Hello World"•3 Minuten
- Recap•2 Minuten
- JSX - JavaScript XML•4 Minuten
- Fragmentos•5 Minuten
- O que é Babel.js•6 Minuten
- Testando com Babel REPL•5 Minuten
- Tipos de CSS e Como Vamos Estilizar o HTML•7 Minuten
- Teoria dos Componentes•5 Minuten
- Criando um Componente Básico•7 Minuten
- Teoria das Propriedades•8 Minuten
- Criando Propriedades para o Componente•12 Minuten
- Requisitos da Calculadora•3 Minuten
- Analisando Layout e Definindo Design Tokens•7 Minuten
- Componente: Text•9 Minuten
- Componente: Button•7 Minuten
- Componente: Card•2 Minuten
- Componente: Calculadora•14 Minuten
- Componente: Histórico de Operações•4 Minuten
- Finalizando Layout•4 Minuten
- Conclusão•2 Minuten
- Introdução•2 Minuten
- Atualizando o Modelo•1 Minute
- Teoria dos Eventos•9 Minuten
- Criando Eventos na Prática•11 Minuten
- O que são React Hooks•7 Minuten
- Explicando o useState•4 Minuten
- Aplicando o useState•4 Minuten
- O prevValue do useState•4 Minuten
- Condicionais•8 Minuten
- Exibição de Listas•6 Minuten
- Filtragem de Listas•6 Minuten
- Aplicando conceito de listas na calculadora•10 Minuten
- Criando eventos de clique na calculadora•3 Minuten
- Mostrando operação e resultado no display da calculadora•20 Minuten
- Arrumando bug do espaço•3 Minuten
- Alerta sobre o “eval” - Grandes poderes, grandes responsabilidades•3 Minuten
- O que é API de contexto e como se diferencia do estado•7 Minuten
- Criando estado global com createContext e useContext•14 Minuten
- Persistindo e listando histórico de operação pela API de contexto•8 Minuten
- O que é o “ciclo de vida” de um componente•3 Minuten
- Função de callback do useEffect•2 Minuten
- Função de retorno do callback do useEffect•4 Minuten
- Dependências do useEffect•3 Minuten
- Exemplo prático de useEffect•8 Minuten
- Persistir histórico de operações no localStorage•4 Minuten
- Consumir histórico de operações ao recarregar a página•2 Minuten
- O que são hooks customizados•5 Minuten
- Criando o custom hook useCalculator•5 Minuten
4 Lektüren•Insgesamt 40 Minuten
- Notion - Fundamentos do React•10 Minuten
- Notion - Fundamentos do React•10 Minuten
- Figma - Calculadora•10 Minuten
- Notion - Fundamentos do React•10 Minuten
2 Aufgaben•Insgesamt 60 Minuten
- Quiz - Iniciação e estruturação•30 Minuten
- Quiz - Interatividade•30 Minuten
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.
Das ist alles enthalten
30 Videos1 Lektüre2 Aufgaben
30 Videos•Insgesamt 251 Minuten
- Entendendo o Projeto•3 Minuten
- Criando Projeto com Vite•9 Minuten
- Zerando o Conteúdo Padrão do Vite•4 Minuten
- Preparando o Tailwind•3 Minuten
- Estendendo Valores no Tailwind•9 Minuten
- Exportando Arquivos Estáticos•9 Minuten
- Criando Componente Text com CVA•20 Minuten
- Criando Componente Icon•15 Minuten
- Criando Componente Badge•7 Minuten
- Criando Componente Button•12 Minuten
- Criando Componente ButtonIcon•14 Minuten
- Criando Componente Input Text•7 Minuten
- Criando Componente Input Checkbox•14 Minuten
- Criando Componente Card•5 Minuten
- Criando Componente Container•5 Minuten
- Criando Componente Skeleton•17 Minuten
- Roteando Página de Componentes•16 Minuten
- Estruturando Corpo do Layout•6 Minuten
- Criando Componente de Resumo das Tarefas•5 Minuten
- Criando Componente da Tarefa•10 Minuten
- Criando Componente de Lista de Tarefas•4 Minuten
- Preparando o Local Storage como Banco de Dados•7 Minuten
- Preparar Tarefa•6 Minuten
- Listar Tarefas•4 Minuten
- Coletando Dados do Formulário•7 Minuten
- Atualizando Tarefa•5 Minuten
- Alterar Status da Tarefa•4 Minuten
- Deletar Tarefa•3 Minuten
- Atualizando Badges de Resumo das Tarefas•3 Minuten
- Simulando Requisições HTTP•20 Minuten
1 Lektüre•Insgesamt 10 Minuten
- Figma - Projeto Todo•10 Minuten
2 Aufgaben•Insgesamt 60 Minuten
- Quiz - Projeto ToDo•30 Minuten
- Desafio - HairDay•30 Minuten
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.
Das ist alles enthalten
59 Videos3 Lektüren3 Aufgaben
59 Videos•Insgesamt 489 Minuten
- Introdução ao módulo•2 Minuten
- Referências (useRef)•11 Minuten
- Manipulando scroll com referência•11 Minuten
- Memoização de dados com useMemo•8 Minuten
- Exemplo com useMemo•10 Minuten
- Memoização de funções com useCallback•3 Minuten
- Exemplo com useCallback•12 Minuten
- Ferramenta útil para analise de renderizações•5 Minuten
- Preparando json-server•4 Minuten
- Requisição GET manual•11 Minuten
- Requisição de outros protocolos•11 Minuten
- Requisição de API com React Query•14 Minuten
- Entendendo o projeto•3 Minuten
- Clonando projeto base•5 Minuten
- Rodando o backend e configurando Postman•5 Minuten
- Componente InputText•18 Minuten
- Componente InputCheckbox•13 Minuten
- Montando layout do componente InputSingleFile - Estado parado•13 Minuten
- Montando layout do componente InputSingleFile - Estado com arquivo•8 Minuten
- Definindo comportamento do componente InputSingleFile - Alternando estados•8 Minuten
- Definindo comportamento do componente InputSingleFile - Aplicando validações•7 Minuten
- Definindo comportamento do componente InputSingleFile - Aplicando o replaceBy•7 Minuten
- Entendendo o Radix UI•2 Minuten
- Componente Dialog•22 Minuten
- Estruturando roteamento•12 Minuten
- Componente Header•6 Minuten
- Componente PhotosSearch com debounce•17 Minuten
- Componente MainContent•2 Minuten
- Componente PhotoWidget•22 Minuten
- Mock da lista de fotos•11 Minuten
- Mock do filtro por álbuns•10 Minuten
- Mock da página de detalhes da foto - Header da página•11 Minuten
- Mock da página de detalhes da foto - Imagem e botão de excluir•6 Minuten
- Mock da página de detalhes da foto - Lista de álbuns selecionáveis•15 Minuten
- Mock do dialog de “Adicionar foto” - Layout•10 Minuten
- Mock do dialog de “Criar álbum” - Layout•11 Minuten
- Mock do dialog de “Criar álbum” - Adaptando ImagePreview para ser selecionável•8 Minuten
- Criando dados com Postman•7 Minuten
- Preparando helper para API•7 Minuten
- Configurando React Query•2 Minuten
- Retornando lista de álbuns•7 Minuten
- Retornando lista de fotos•5 Minuten
- Conhecendo o NUQS•3 Minuten
- Adicionando filtro por álbum na lista de fotos•8 Minuten
- Adicionando filtro por texto na lista de fotos•4 Minuten
- Retornando detalhe da foto•8 Minuten
- Navegando entre fotos•2 Minuten
- Conhecendo o Zod•4 Minuten
- Nova foto - montando schema e validando campos•12 Minuten
- Nova foto - limpando formulário ao cancelar•2 Minuten
- Nova foto - selecionando álbuns para fotos•5 Minuten
- Nova foto - criando foto via API•10 Minuten
- Nova foto - mostrando feedback com toast notification•5 Minuten
- Novo álbum - montando schema e validando campos•5 Minuten
- Novo álbum - adicionando fotos ao criar um novo álbum•4 Minuten
- Novo álbum - criando novo álbum via API•13 Minuten
- Gerenciando fotos em álbuns•9 Minuten
- Deletando foto•6 Minuten
- Deploy da aplicação no Railway•9 Minuten
3 Lektüren•Insgesamt 30 Minuten
- Notion - Fundamentos Avançados•10 Minuten
- Figma - Projeto Álbum de fotos•10 Minuten
- Template - Projeto Álbum de fotos•10 Minuten
3 Aufgaben•Insgesamt 90 Minuten
- Desafio - Refund•30 Minuten
- Quiz - Avançandos nos Fundamentos - Teoria•30 Minuten
- Quiz - Projeto Álbum de fotos•30 Minuten
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.
Das ist alles enthalten
2 Videos1 Lektüre8 Plug-ins
2 Videos•Insgesamt 3 Minuten
- Introdução•2 Minuten
- Encerramento•2 Minuten
1 Lektüre•Insgesamt 10 Minuten
- Link Content Studio•10 Minuten
8 Plug-ins
- React 19 como mudança de modelo mental•0 Minuten
- Actions e formulários modernos•0 Minuten
- UI otimista e atualizações não urgentes•0 Minuten
- Carregamento assíncrono com Suspense•0 Minuten
- Effects mais precisos com useEffectEvent•0 Minuten
- Estado preservado e performance com React 19•0 Minuten
- Outras melhorias para conhecer•0 Minuten
- Revisão final•0 Minuten
Dozent

von
Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Jennifer J.

Larry W.

Chaitanya A.
Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.
Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online
Häufig gestellte Fragen
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.
Weitere Fragen
Finanzielle Unterstützung verfügbar,


