Torne-se um Desenvolvedor React
Intermediate
4.8
8 reviews
39 Learners
Updated 11/2025
Domine a arte de construir interfaces de usuário dinâmicas e interativas para aplicações web como um habilidoso Desenvolvedor React. Se você compreend…
142
Chapters
22
Learning hours
98
Assignments
AI Assistant
Shareable Certificate
Resultados
Resultados
Track content
Related courses and projects
Depoimentos
Recursos
Preços
Resultados
Resultados
Track content
Related courses and projects
Depoimentos
Recursos
Preços
O que você vai aprender
Building reusable UI components with React
Navigating apps using React Router
Setting up and deploying Next.js projects
Styling React apps with CSS and inline styles
Handling state with Redux Toolkit
Fetching and displaying data in Next.js
Managing state with React Hooks and Context
Developing apps with Next.js framework
Implementing authentication in Next.js
Learning track content
Compreenda os princípios fundamentais do React. Você aprenderá sobre JSX (JavaScript XML), construção de componentes de UI reutilizáveis e renderização de elementos. Além disso, explorará a importância da coleta de dados e da renderização condicional em aplicações React. Ao final desta seção, você terá uma base sólida dos conceitos essenciais do React, preparando-se para os tópicos mais avançados abordados nas próximas seções.
O Que É React e Por Que Usá-Lo?
Comparando SPAs e MPAs no Desenvolvimento Web
Como o React Funciona com o DOM Virtual
Introdução ao JSX para Escrever HTML em JavaScript
Construindo UI Complexa com JSX
Renderização de Elementos no React
Desafio: Renderizar um Elemento no React
Compreendendo Componentes React
Passando Dados com Props no React
Desafio: Criar Componentes Funcionais
Renderização Condicional em React
Desafio: Implementar Renderização Condicional – Notificação de Chat
Desafio: Implementar Renderização Condicional – Alerta Bancário
Realizar uma Coleta de Dados
Desafio: Exibir Coleções de Dados no React
Resumo dos Fundamentos do React
Explore os diversos métodos de adicionar estilos às aplicações React. Você aprenderá a aplicar estilos a componentes individuais, utilizar estilos dinâmicos e manter uma abordagem de estilização escalável e sustentável em seus projetos.
Introdução à Estilização em React
Usando Estilos Inline no React
Aplicando Estilos Inline na Prática
Desafio: Uso de Estilos Inline em um Componente React
Estilizando Componentes React com CSS Externo
Aplicando CSS Externo na Prática
Desafio: Aplicar CSS Externo em um Aplicativo React
Usando Módulos CSS para Estilização com Escopo em React
Organização de Estruturas de Arquivos e Pastas para Estilos
Desafio: Uso de Módulos CSS no React
Conclusão Sobre Técnicas de Estilização em React
Recursos avançados no desenvolvimento moderno com React. Hooks revolucionam a escrita de componentes funcionais, oferecendo uma maneira concisa e intuitiva de gerenciar estado e executar efeitos colaterais. Por outro lado, Context permite compartilhar dados pela árvore de componentes sem a necessidade de prop drilling. A combinação de Hooks e Context possibilita um gerenciamento de estado eficiente e compartilhamento de dados simplificado em aplicações React.
Introdução aos React Hooks e Context
Gerenciamento de Estado com o Hook useState
Desafio: Alternar Visibilidade com useState
Trabalhando com Referências Usando o Hook useRef
Desafio: Construir um Componente de Formulário Controlado
Lidando com Efeitos Colaterais com o Hook useEffect
Desafio: Buscar e Exibir Dados com useEffect
Otimizando o Desempenho com o Hook useMemo
Desafio: Implemente um Filtro de Lista de Carros com useMemo
Compartilhando Estado Entre Componentes com Contexto
Usando Contexto em um Cenário do Mundo Real
Desafio: Construa um Aplicativo de Mundo da Astronomia com Context
Encerramento de React Hooks e Context
Guia passo a passo sobre como iniciar um projeto React do mundo real. Desde a configuração do ambiente de desenvolvimento até a compreensão da organização do projeto e ferramentas essenciais, você adquirirá o conhecimento e a confiança necessários para iniciar sua jornada com React.
Aprenda os fundamentos teóricos de conceitos como URL, domínio, protocolo, parâmetros de consulta e outros. Entenda a importância do roteamento em aplicações web e por que precisamos da biblioteca React Router.
Descubra como criar uma aplicação React completa do zero, com a capacidade de exibir conteúdo que se adapta com base na URL utilizando a funcionalidade do React Router.
Visão Geral do Site Multipágina
Instalando o React Router
Habilitando o Roteamento em um Aplicativo React
Definindo Rotas para Navegação
Recapitulação: Primeiros Passos no React Router
Otimizando Importações com Carregamento Preguiçoso
Implementação de um Componente de Fallback
Recapitulação: Segundos Passos no React Router
Criando e Gerenciando Navegação
Explorando Toda a Lógica do React Router
Recapitulação dos Fundamentos do React Router
Explore o uso de strings de consulta para compartilhar e gerenciar o estado da aplicação por meio de URLs, trabalhe com diferentes tipos de dados em parâmetros de consulta e aproveite o React Router para navegação e efeitos baseados em alterações de URL.
Explore os conceitos fundamentais de gerenciamento de estado e descubra como aproveitar o poder do Redux Toolkit. Orientaremos você pelo processo de instalação e ajudaremos a criar seu primeiro projeto React com Redux Toolkit. Além disso, enfrente um desafio para testar sua compreensão e habilidades.
Investigue a integração do Redux com aplicações React, abordando conceitos fundamentais: actions, reducers e o store do Redux. Inclui exemplos práticos e explicações de código para configuração do store, criação de reducers e conexão de componentes React por meio de hooks como useSelector e useDispatch.
O Que Aguarda
Compreendendo o Código do Projeto e a Estrutura de Arquivos
Criando a Store do Redux
Integrando o Store do Redux ao Aplicativo React
Inspecionando o Store no Aplicativo React
Compreendendo Actions e Action Creators
Compreendendo o Papel dos Reducers
Inspecionando Actions e Reducers no Redux
Conectando o Redux com Componentes React
Finalizando o Aplicativo
Aprimore suas habilidades em gerenciamento de estado. Neste workshop prático, você enfrentará desafios do mundo real e adquirirá experiência prática utilizando o Redux Toolkit para um desenvolvimento de aplicações mais eficiente.
Vamos discutir o que é necessário aprender antes de começar com o framework Next.js, o que esperar deste curso e o que será desenvolvido.
Vamos configurar o projeto, analisar formas de adicionar estilos ao nosso aplicativo e abordar aspectos visuais como imagens, fontes, páginas e layouts.
Configurando o Projeto Next.js
Compreensão da Estrutura de Arquivos e Pastas do Projeto
Abordagens de Estilização no Next.js
Adicionando o Arquivo CSS Global
Usando Tailwind CSS para Estilização
Trabalhando com Módulos CSS
Aplicando Estilos Condicionalmente
Adicionando Fontes Personalizadas do Google
Desafio: Implementar uma Fonte Personalizada do Google
Manipulação de Imagens no Next.js
Aprenda a criar e gerenciar facilmente uma nova visualização para seu aplicativo e navegar por todas as páginas de forma fluida com um sistema de roteamento incorporado.
Implemente o aplicativo Next.js utilizando contas do GitHub e Vercel. Além disso, estabeleça um banco de dados para fornecer os dados necessários ao aplicativo.
Considere como obter e apresentar dados ao usuário de forma clara e eficiente.
Descubra como implementar recursos modernos da web, como paginação, operações CRUD, busca global, validação de formulários e mais.
Construindo a Página de Faturas
Desenvolvimento da Funcionalidade de Busca
Adicionando Paginação a um Aplicativo Next.js
Usando Server Actions no Next.js
Criando um Novo Item no Banco de Dados
Atualizando um Item no Banco de Dados
Exclusão de um Item no Banco de Dados
Desafio: Implementar Validação de Formulário
Implementação de autenticação no Next.js.
Compreendendo Autenticação
Configurando a Rota de Login
Usando NextAuth.js para Autenticação
Configuração de Autenticação e Proteção de Rotas
Hashing de Senhas e Gerenciamento de Credenciais
Implementação da Funcionalidade de Login
Conectando a Interface do Usuário com a Lógica de Autenticação
Implementação da Funcionalidade de Logout
Considerações Finais e Próximos Passos
Impulsione suas Habilidades Tecnológicas!
com até 55% de desconto
Features:
*Tracks not included in Pro plan
500+ Cursos Bem AvaliadosCopiloto de IA de ponta
Trilhas de estudo personalizadas40+ Projetos práticos do mundo real
Sem cancelamento, antes do término do plano com desconto selecionado, aceito que a Codefinity cobrará automaticamente $104 a cada 3 meses até eu cancelar. Saiba mais sobre a política de cancelamento e reembolso em Termos de Assinatura.
Recommended Courses and Projects
curso
TEST COURSE WITH QUESTIONSs
-----
1 hora
5 capítulosIniciante
173 ESTUDANDO AGORA
curso
Expert React
Unlock the full potential of React and become a proficient Frontend developer with this course. Whether you're a beginner or an experienced developer looking to level up your skills, this hands-on course will take you on an exciting journey through the core concepts of React and its ecosystem, considering such valuable topics as React Router, Redux Toolkit, Formik, and Jest.
6 horas 51 capítulosIntermediário
curso
Introduction to React
In this course, we will learn how to use the JavaScript React library for making front-end applications. This course will help you understand the structure of a React application, how to add it to an existing website, and how to set up a React app from scratch. You will learn how to easily create React applications and expand them further for more advanced purposes. This course is intended for beginners though basic knowledge of JavaScript is required.
5 horas 37 capítulosIntermediário
curso
Foundations of React Native
Explore the world of mobile app development with React Native. Learn fundamental concepts and advanced techniques to create cross-platform mobile applications efficiently.
5 horas 29 capítulosAvançado
curso
Introduction to Redux
In this course, the user will learn how to use Redux and React to create powerful applications.
5 horas 29 capítulosAvançado
curso
TypeScript Essentials for React
Strengthen your React development skills by applying TypeScript to components, events, hooks, and async logic. Use the TypeScript features that matter most in real React applications to write safer, clearer, and more maintainable UI code. Build confidence with typed props, state, API calls, custom hooks, and advanced React patterns.
2 horas 24 capítulosIniciante
curso
Animations in React with Framer Motion
Master UI animation techniques in React using Framer Motion. Build animated components, control motion through state and variants, implement interactive gestures, and optimize animations for performance and accessibility. Apply animation patterns that scale across real application interfaces and navigation flows.
1 hora 13 capítulosIniciante
curso
Auth0 Authentication and Authorization in React Apps
Implement secure authentication and authorization in React applications using Auth0. Configure login flows, protect routes, manage user sessions, and customize authentication experiences. Apply advanced Auth0 features such as roles, permissions, and secure API access in production React apps.
1 hora 11 capítulosIntermediário
curso
Axios for React Applications
Learn how to integrate Axios into React applications for reliable data fetching and API communication. Practice performing HTTP requests, handling responses and errors, configuring Axios globally, and managing requests efficiently. Gain practical experience structuring API logic for scalable and maintainable React projects.
1 hora 10 capítulosIntermediário
curso
Building UI Systems in React with Storybook
Develop, document, and test React UI components using Storybook. Create structured stories, configure addons for documentation and testing, and scale component libraries for team workflows. Integrate Storybook into collaborative development and automated delivery pipelines.
1 hora 12 capítulosIniciante
curso
Clerk Authentication in React Apps
Implement user authentication in React applications using Clerk. Integrate Clerk into React, manage user sessions and profile data, customize authentication flows, and control authentication state.
Apply secure authentication practices and troubleshoot common authentication issues.
1 hora 10 capítulosIntermediário
curso
Data Visualization in React with Recharts
Build powerful, interactive data visualizations in React using Recharts. Learn how to integrate Recharts into React projects, render essential chart types, customize design and behavior, work with dynamic real-world data, and apply best practices for performance, accessibility, and scalability.
2 horas 14 capítulosIntermediário
Discover more Learning Tracks
trilha
TEST TRACK 12
1 Curso
1 Projeto
0 TaskIniciante
4.0
(17984)
trilha
Desenvolvimento Web Full Stack
7 Cursos424 TarefasIniciante
4.5
(53)
trilha
Análise e Visualização de Dados em Python
5 Cursos146 TarefasIntermediário
4.4
(9)
trilha
SQL do Zero ao Herói
7 Cursos249 TarefasIniciante
4.6
(113)
trilha
C++ para Iniciantes
6 Cursos124 TarefasIniciante
3.9
(31)
trilha
Python de Zero a Herói
6 Cursos215 TarefasIniciante
4.6
(337)
trilha
Domínio em Aprendizado de Máquina
7 Cursos182 TarefasIntermediário
4.5
(6)
trilha
Python Além do Intermediário
2 Cursos1 Projeto62 TarefasIniciante
5.0
(2)
trilha
Essenciais de Java
11 Cursos459 TarefasIniciante
4.5
(16)
trilha
Desenvolvimento de Jogos com Unity
4 Cursos164 TarefasIniciante
4.4
(8)
trilha
Torne-se um Desenvolvedor Django
5 Cursos178 TarefasAvançado
4.5
(33)
Por que as Pessoas Escolhem Codefinity
Web Developer
Kwizera Mugisha
The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.
Senior Business Analyst
Sherry Barnes-Fox
My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.
Accounts Payable Specialist
Bill Wagner
I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.
IT Support Specialist
Daniel Chinea
I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.
Technology Project Manager
Steve Bruening
The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.
Project Manager
Stephanie Chan
As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.
Step-by-Step to Stellar Results
Ambiente de codificação interativo
Mergulhe em nosso ambiente interativo: escreva e execute seu código com feedback em tempo real e métricas de sucesso—aprenda fazendo a cada passo.
Suporte com IA
Aproveite o assistente de IA integrado para explicar erros, sugerir correções ou responder a qualquer pergunta sobre seu código—assim você permanece produtivo e nunca fica preso.
Check your progress
Conclua cada módulo com um questionário rápido que fornece feedback instantâneo, acompanha seu progresso e garante que você dominou os conceitos-chave.
Promote your expertise
Ganhe seu certificado reconhecido pela indústria ao concluir e compartilhe no LinkedIn com um clique—deixe sua rede ver o que você pode fazer.
Confiado por Funcionários de Empresas Líderes
e Estudantes de Universidades de Prestígio
Acesso completo ao catálogo
Uma assinatura abre este curso e todo o nosso catálogo de projetos e habilidades.Features:
500+ Cursos Bem AvaliadosCopiloto de IA de ponta
Trilhas de estudo personalizadas40+ Projetos práticos do mundo real
Sem cancelamento, antes do término do plano com desconto selecionado, aceito que a Codefinity cobrará automaticamente $104 a cada 3 meses até eu cancelar. Saiba mais sobre a política de cancelamento e reembolso em Termos de Assinatura.
Experimente Codefinity com confiança – garantia de devolução do dinheiro em 30 dias incluída
Para dar as boas-vindas ao Codefinity, estamos oferecendo até 64% de desconto em nossos cursos. Além disso, temos uma garantia de devolução do dinheiro em 30 dias, para que você possa nos experimentar sem riscos.Estamos ansiosos para recebê-lo em nossa plataforma e estamos comprometidos em tornar sua experiência de aprendizado fácil, interativa e divertida.
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
to kickstart your career
500+ Top-Rated courses
Completion certificates
Early access to new courses
40+ hands-on Real-world projects
Personalized study tracks
Unlimited workspaces
Acesse instantaneamente 500+ cursos
Aprendizado Ilimitado, Acesso InstantâneoTenha acesso total a todos os cursos e trilhas, incluindo conteúdo em vídeo, questionários e materiais aprofundados—comece a aprender a qualquer momento.
Certificados Reconhecidos pela IndústriaGanhe certificados que validam sua expertise e impulsionam sua carreira em tecnologia, IA, dados, marketing e além.
Aprendizado assistido por IAReceba dicas personalizadas, feedback em tempo real e explicações com IA para acelerar seu progresso.
Constantemente Expansível: Novos Cursos e Trilhas de CarreiraMantenha-se à frente com cursos constantemente atualizados, roteiros de carreira, desafios e testes práticos.
Desenvolva Habilidades que ImportamDomine habilidades em demanda com cursos em IA, ciência de dados, programação, marketing, automação, desenvolvimento web e mais.
Aprendizado Interativo e Sem CosturaEngaje-se com projetos práticos, exercícios do mundo real e uma experiência de aprendizado intuitiva — sem necessidade de ferramentas extras.
