Torne-se um Desenvolvedor React Ruta - Aprendizado Online com Certificado

Torne-se um Desenvolvedor React

Intermediate

4.3

114 reviews

5.7k+ Learners

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

Learning hours

Assignments

AI Assistant

Shareable Certificate

Resultados

Track content

Related courses and projects

Depoimentos

Recursos

Preços

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.

Configurando Seu Ambiente de Desenvolvimento React

Escolhendo um Editor de Código para Desenvolvimento em React

Organizando a Estrutura de Pastas do Projeto

Trabalhando com o Terminal no Desenvolvimento React

Iniciando e Executando um Projeto React com Vite

Conclusão da Configuração do Projeto 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.

Introdução ao Roteamento em Aplicativos Web

O Que É o React Router?

Compreensão da Estrutura de URL

Explorando URLs na Prática

Quiz: Conceitos Fundamentais do React Router e URLs

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.

Visão Geral

Compreendendo Strings de Consulta em URLs

Configurando um Componente React

Inspecionando Alterações Recentes

Trabalhando com Parâmetros de Consulta

Integrando o Hook useSearchParams

Aplicativo Final

Resumo do Curso de React Router

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.

O Que Você Aprenderá Neste Curso

Introdução ao Gerenciamento de Estado

Compreendendo o Redux Toolkit

Instalando o Redux Toolkit

Criando Seu Primeiro Projeto React Redux Toolkit

Desafio: Instalar Redux Toolkit

Software Adicional

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.

Visão Geral do Desafio

Diretrizes e Regras do Desafio

Desafio: Configurar a Store do Redux

Desafio: Criar Ações Redux

Desafio: Implementar o Reducer

Desafio: Conectar Redux com React

Resumo do Redux Toolkit

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.

Bem-vindo ao Curso

Visão Geral do Projeto

Pré-Requisitos do Curso

Como Este Curso Está Estruturado

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.

Como Funciona o Roteamento no Next.js

Desafio: Criar uma Nova Página

Construindo um Componente de Layout Comum

Otimizando a Navegação no Next.js

Criando e Gerenciando Links Ativos

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.

Configuração de Contas no GitHub e Vercel

Implantação do Aplicativo Next.js no Vercel

Configurando um Banco de Dados para o Projeto

Populando o Banco de Dados com Dados Iniciais

Considere como obter e apresentar dados ao usuário de forma clara e eficiente.

Como Buscar Dados no Next.js

Trabalhando com a Página do Painel

Desafio: Recuperar e Exibir Dados

Renderização Dinâmica vs. Estática no Next.js

Compreendendo Loaders

Implementando Carregadores de Partes Específicas

Desafio: Criar um Skeleton Loader

Otimizando Carregadores com Agrupamento de Componentes

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

MUI Essentials for React Applications

Build modern, responsive, and visually polished React applications using Material UI. Learn to structure interfaces with core components, design flexible layouts, manage forms, and apply responsive behavior. Customize themes, refine visual styles, and develop practical features through focused, real-world mini projects. Gain the confidence to create clean, accessible, production-ready UIs with MUI.

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.

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.

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.

End to End Testing React Apps with Playwright

Test React applications end to end using Playwright. Write reliable browser tests, interact with UI elements, handle asynchronous behavior, and validate navigation and network behavior. Apply advanced testing strategies to build scalable, maintainable test suites for production React applications.

Mapbox Vector Maps in React Apps

Integrate Mapbox vector maps into React applications. Render interactive maps, customize styles and layers, and implement advanced interactivity such as events and geolocation.

React Data Visualization with Chart.js

Learn how to build modern, interactive, and visually engaging data visualizations in React using Chart.js. Explore integrating Chart.js with React, creating popular chart types, handling dynamic data, customizing chart appearance, and building real-world dashboards.

Three.js 3D Graphics in React Apps

Build 3D graphics in React applications using Three.js. Create and render 3D scenes, add objects, lighting, and cameras, and implement interactive and animated behaviors. Optimize rendering performance and structure scalable 3D applications for production use.

State Management in React with Zustand

Manage application state in React using Zustand. Create and update stores, derive and organize state, handle asynchronous logic, and apply middleware for extended behavior. Structure Zustand stores effectively and evaluate when Zustand is an appropriate state management solution.

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.

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.

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.

Discover more Learning Tracks

trilha

Desenvolvimento Web com C#

Iniciante

SQL do Zero ao Herói

Iniciante

C++ para Iniciantes

Iniciante

Desenvolvimento de Jogos com Unity

Iniciante

Essenciais de Java

Iniciante

Desenvolvimento Web Full Stack

Iniciante

Fundação de Desenvolvimento Frontend

Iniciante

Análise e Visualização de Dados em Python

Intermediário

Domínio em Aprendizado de Máquina

Intermediário

Domínio de C++

Avançado

Java Web

Avançado

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

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

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.

O que você vai aprender

Desenvolvimento Web com C#

SQL do Zero ao Herói

C++ para Iniciantes

Desenvolvimento de Jogos com Unity

Essenciais de Java

Desenvolvimento Web Full Stack

Fundação de Desenvolvimento Frontend

Análise e Visualização de Dados em Python

Domínio em Aprendizado de Máquina

Domínio de C++

Java Web

Por que as Pessoas Escolhem Codefinity

Confiado por Funcionários de Empresas Líderes e Estudantes de Universidades de Prestígio

Acesso completo ao catálogo

Experimente Codefinity com confiança – garantia de devolução do dinheiro em 30 dias incluída

Acesse instantaneamente 500+ cursos

Confiado por Funcionários de Empresas Líderes
e Estudantes de Universidades de Prestígio