O que você aprenderá?

Confira algumas coisas que você aprenderá durante o curso.

  • Criar componentes em React

  • Desenvolver uma aplicação do zero com React/Redux

  • Aplicar boas práticas de desenvolvimento

  • Desenvolver uma aplicação full-stack em Javascript

  • Integrar o Redux em uma aplicação React

  • Configurar uma aplicação com Webpack

Benefícios Inclusos no Curso

  • Áudio e Vídeo em Alta Definição

    334 aulas e 40 horas de conteúdo. Didática comprovada. Investimento garantido.

  • Certificado de Conclusão

    Ao final você receberá certificado com a carga horária apropriada para conclusão

  • Suporte Dedicado

    Conte com um time de especialistas e tire todas as suas dúvidas relativas ao curso

  • Sem prazo de expiração

    Assista o curso no seu tempo, sem pressa, sem nenhum prazo para expirar.

  • Recursos para download

    Baixe arquivos e artigos para melhor desenvolvimento do curso

  • Acesso Mobile

    Acesse por qualquer dispositivo: Computador, celular e Ipad

Reviews

5 classificação por estrelas

Excelente

Elenilton Vicente de Aguiar

Ótimo curso, conteúdo passado de forma fácil e muito prática.

Ótimo curso, conteúdo passado de forma fácil e muito prática.

Ler menos
5 classificação por estrelas

Curso detalhado e atualizado constantemente. Muito Bom!

Fernando Tozetto

Esse curso é fantástico, consegui perceber ainda mais o seu valor quando apliquei os conhecimentos em projetos pessoais ao precisar rever alguns conceitos fi...

Ler mais

Esse curso é fantástico, consegui perceber ainda mais o seu valor quando apliquei os conhecimentos em projetos pessoais ao precisar rever alguns conceitos fica nítida a riqueza nos detalhes que o Leonardo passa nas aulas, já tenho vários cursos da Cod3r e recomento a todos que quiserem aprender!

Ler menos
5 classificação por estrelas

Perfeito

Luiz Campos

Perfeito

Perfeito

Ler menos

Conteúdo do Curso

  • 1

    Introdução 33:19

  • 2

    Fundamentos React 302:59

    • Introdução do Módulo

    • Criando Projeto

    • Exibindo String na Tela

    • Conhecendo JSX

    • Carregando CSS

    • Primeiro Componente #01

    • Primeiro Componente #02

    • Componente com Propriedade

    • Propriedades são Somente Leitura

    • React Fragment

    • Componente App

    • Desafio Número Aleatório

    • Desafio Número Aleatório - Resposta

    • Componente Card #01

    • Componente Card #02

    • Componente Card #03

    • Componente com Filho #01

    • Componente com Filho #02

    • Repetição

    • Desafio Repetição

    • Desafio Repetição - Resposta

    • Renderização Condicional #01

    • Renderização Condicional #02

    • Renderização Condicional #03

    • Comunicação Direta

    • Comunicação Indireta

    • Componente com Estado

    • Componente Controlado

    • Contador #01

    • Contador #02

    • Desafio Megasena

    • Desafio Megasena - Resposta #01

    • Desafio Megasena - Resposta #02

    • Conclusão do Módulo

  • 3

    Projeto Calculadora 72:38

    • Criando Projeto

    • Componente Calculator

    • Componente Button #01

    • Componente Display

    • Componente Button #02

    • Implementando a Lógica #01

    • Implementando a Lógica #02

  • 4

    TodoApp (Backend) 60:24

    • Visão Geral

    • Configuração e Instalação

    • Configurando o Servidor com o Express

    • Conexão com o Banco de Dados

    • ODM e Criação da API REST

    • Mapeamento das Rotas

    • Testando a API (Postman)

    • Habilitando o CORS

    • Iniciando o Backend com PM2

  • 5

    TodoApp (Frontend) 117:15

    • Configuração e Instalação

    • Configurando o Build com Webpack

    • Criação do index.html

    • Componente App

    • Componentes Todo e About

    • Componente Menu

    • Configurando as Rotas (React-Router)

    • Componente PageHeader

    • Componentes TodoForm e TodoList

    • Estratégia de Implementação

    • Estrutura do Formulário

    • Componentes Grid e IconButton

    • Renderização Condicional (If)

    • Evento Adicionar

    • Evento onChange

    • Evento Adicionar (Integração Backend)

    • Consulta e Exclusão de TODOs

    • Marcar como Concluído/Pendente

    • Pesquisa de TODOs

    • Melhorias de CSS e Limpar Formulário

    • Adicionar Teclas de Atalhos

  • 6

    Gerenciamento de Estado com Redux 157:55

    • Introdução do Módulo

    • Entendendo o Redux

    • Criando o Projeto

    • Iniciando a App

    • Componente Card

    • Componente Intervalo

    • Outros Componentes

    • Explicando o Funcionamento da App

    • Implementação SEM Redux

    • Limpando a Implementação

    • Configurando Redux

    • Conectando Componentes com Redux #01

    • Conectando Componentes com Redux #02

    • Invocando Action Creator #01

    • Invocando Action Creator #02

    • Invocando Action Creator #03

    • Refatorando Reducer

    • Constantes para os Tipos das Actions

    • Conclusão do Módulo

  • 7

    TodoApp (Migração para Redux) 108:06

    • Instalando as Dependências

    • Configurando os Reducers

    • Configurando o Redux

    • Conectar o TodoList com Redux

    • Conectar o TodoForm com Redux

    • Action Creator changeDescription

    • Configurando o Redux Dev Tools

    • Action Creator de Pesquisa

    • Aplicando Middleware (Redux-Promise)

    • Adicionar TODO

    • Aplicando Middleware (Redux-Multi)

    • Aplicando Middleware (Redux-Thunk)

    • Marcar como Concluído/Pendente

    • Exclusão de TODOs

    • Limpar Formulário

    • Melhorando a Action de Pesquisa

  • 8

    Aplicação Final - Ciclos de Pagamentos (Backend) 107:12

    • Visão Geral

    • Configuração e Instalação

    • Configurando o Servidor com o Express

    • Conexão com o Banco de Dados

    • Mapeamento Objeto-Documento (ODM)

    • Criação da API REST

    • Correção: Método Get

    • Mapeamento das Rotas

    • Testando a API (Postman)

    • Obtendo a Qtde de Registros (Count)

    • Atualização Mongoose / Mongo 3.6

    • Obtendo o Sumário de Pagamentos

    • Tratando as Mensagens de Erro

    • Habilitando o CORS

    • Middleware Query Parser Int

  • 9

    Aplicação Final - Ciclos de Pagamentos (Frontend) 418:13

    • Visão Geral

    • Comunicado IMPORTANTE sobre o AdminLTE

    • Configuração e Instalação

    • Configurando o Build com Webpack

    • Criação do index.html

    • Componentes Index e App

    • Dependências do Template (AdminLTE)

    • Componente Cabeçalho

    • Componente Menu (Parte 1)

    • Componente Menu (Parte 2)

    • Componente Rodapé

    • Navegação com React-router

    • Componente de Título do Conteúdo

    • Componente Dashboard: Visão Geral

    • Componente Grid

    • Componente ValueBox

    • Usando ValueBox

    • Configurando Redux

    • Integrando Dashboard com Redux (Parte 1)

    • Integrando Dashboard com Redux (Parte 2)

    • Ciclo React-Redux com Middlewares

    • Configurando Redux DevTools

    • Dashboard SEM Redux

    • Visão Geral dos Componentes de Abas

    • Componente BillingCycle: Refatorando para Classe

    • Componentes Estruturais das Abas

    • Componente TabHeader

    • Criando a Primeira Action e o Reducer

    • Componente TabHeader: Conectando com Redux

    • Componente Tab Content

    • Componente BillingCycle: Conectando com Redux

    • Visibilidade das Abas (Parte 1)

    • Visibilidade das Abas (Parte 2)

    • Componente de Lista: Visão Geral

    • Criando a Action "getList" e o Reducer

    • Componente BillingCycleList

    • Integrando BillingCycleList com Redux

    • Exibindo os dados em BillingCycleList

    • BillingCycleForm com Redux-Form (Parte 01)

    • BillingCycleForm com Redux-Form (Parte 02)

    • Exibindo as Mensagens de Sucesso e Erro

    • Melhorias na Inclusão do Ciclo de Pagamento

    • Field com Componente Personalizado

    • Exibir Aba de Alterar Ciclo de Pagamento

    • Inicializar Formulário com Dados

    • Função do Botão Cancelar

    • Alterar Ciclo de Pagamento

    • Excluir Ciclo de Pagamento

    • Finalizando o Cadastro Básico (Melhorias)

    • Componente CreditList Básico

    • Componente Input para CreditList

    • Evoluindo o Componente CreditList

    • Adicionar e Clonar Créditos

    • Remover Créditos

    • Generalizando o Componente CreditList

    • Adicionando o Campo Status no ItemList

    • Componente Summary

    • Integrar Soma de Créditos e Débitos

  • 10

    Melhorias e Correções 07:59

    • Problema de Responsividade do Menu

    • Navegação com React-router (Versão 2)

  • 11

    Aplicação Final - Autenticação (Backend) 45:00

    • Correção package.json

    • Apostila do Curso (Versão BETA)

    • Autenticação - Backend (Parte 01)

    • Autenticação - Backend (Parte 02)

    • Autenticação - Backend (Parte 03)

    • Autenticação - Backend (Parte 04)

    • Autenticação - Backend (Parte 05)

    • Autenticação - Backend (Parte 06)

    • Autenticação - Backend (Parte 07)

    • Autenticação - Backend (Parte 08)

    • Autenticação - Backend (Parte 09)

  • 12

    Aplicação Final - Autenticação (Frontend) 47:32

    • Autenticação - Frontend (Parte 01)

    • Autenticação - Frontend (Parte 02)

    • Autenticação - Frontend (Parte 03)

    • Autenticação - Frontend (Parte 04)

    • Autenticação - Frontend (Parte 05)

    • Autenticação - Frontend (Parte 06)

  • 13

    Aplicação Final - Atualizando as Bibliotecas 24:06

    • Parte #01

    • Parte #02

  • 14

    Deploy Heroku 29:44

    • Deploy do Backend #01

    • Deploy do Frontend #02

  • 15

    **Bônus**: Exercícios MongoDB 37:20

    • Mongo - Visão Geral

    • Mongo - Exercício 01: Comandos Básicos

    • Mongo - Exercício 02: Inserções

    • Mongo - Exercício 03: Consultas

    • Mongo - Exercício 04: Agregação

    • Mongo - Exercício 05: Atualização

    • Mongo - Exercício 06: Contador e Remoções

  • 16

    **Bônus**: Exercícios Node 59:58

    • Node - Exercício 01: Javascript Básico

    • Node - Exercício 02: Sistema de Módulos

    • Node - Exercício 03: Singleton

    • Node - Exercício 04: Objeto Global

    • Node - Exercício 05: This

    • Node - Exercício 06: Módulo Externo (Lodash)

    • Node - Exercício 07: Passagem de Parâmetros

    • Node - Exercício 08: Process (ARGV)

    • Node - Exercício 09: Process (STDIN/STDOUT)

    • Node - Exercício 10: Módulo FS

    • Node - Exercício 11: Módulo HTTP

  • 17

    **Bônus**: Exercícios Express 48:24

    • Express - Visão Geral

    • Express - Exercício 01: Configuração e Mapeando uma Rota

    • Express - Exercício 02: Cadeia de Middlewares

    • Express - Exercício 03: Método USE

    • Express - Exercício 04: Método Route

    • Express - Exercício 05: Express Router

    • Express - Exercício 06: Express e Router são Singletons?

  • 18

    Novas Aulas! 03:52

    • Introdução

  • 19

    Webpack 4 51:14

    • Visão Geral do Webpack

    • Estrutura Básica do Projeto

    • Sistema de Módulos

    • Configurando a Pasta de Saída

    • Carregando Arquivo .CSS

    • Externalizando Arquivo .CSS

    • Carregando Arquivo .SCSS (SASS)

    • Desenvolvimento & Produção

    • Carregando Arquivos de Imagens

    • Adicionando WebServer

  • 20

    React 16.4 86:42

    • Criando Projeto

    • Primeiro Componente

    • Componente Com Parâmetro

    • Múltiplos Componentes

    • Componente de Classe #01

    • Componente de Classe #02

    • Componentes: Pai & Filho #01

    • Componentes: Pai & Filho #02

  • 21

    Projeto Cadastro de Usuário 100:28

    • Implementando Backend (JSON Server)

    • Criando Projeto Frontend

    • Criando Componentes (Template)

    • Aplicando Estilo (CSS Grid)

    • Componente Logo

    • Componente Cabeçalho

    • Componente Rodapé

    • Componente Navegação

    • Componente Conteúdo

    • Componente Cadastro Usuário #01

    • Implementando Rotas (React Router)

    • Componente Cadastro Usuário #02

    • Componente Cadastro Usuário #03

    • Componente Cadastro Usuário #04

    • Adicionando Responsividade

  • 22

    **Extra** CSS 88:43

    • Flex Box vs CSS Grid

    • Flex Box Nomenclatura

    • Flex Box #01

    • Flex Box #02

    • Flex Box #03

    • CSS Grid #01

    • CSS Grid #02

    • CSS Grid #03

  • 23

    Fundamentos React [ Legado ] 158:39

    • Introdução do Módulo

    • Código Disponível no Final do Módulo

    • Configuração do Projeto

    • Olá React

    • O que é JSX?

    • Componentes

    • Primeiro Componente

    • Primeiro Componente com Arrow Function

    • Usando props

    • Um Arquivo com Múltiplos Componentes

    • Retornar Múltiplos Elementos

    • Sistema de Módulos (Import/Export)

    • Relação entre Componentes #01

    • Relação entre Componentes #02

    • Comunicação Direta entre Componentes

    • Propagando "props" para Componentes Filhos #01

    • Propagando "props" para Componentes Filhos #02

    • Adicionando Função em um Componente Funcional

    • Comunicação Indireta entre Componentes

    • Componente de Classe

    • Componente Funcional tem Estado?

    • Componente de Classe Contador

    • Problema do "this"

    • Usando "state" em Componente de Classe

    • Conclusão do Módulo

    • React Hooks

    • Recursos do Módulo & Links Úteis

  • 24

    Webpack [Legado] 64:39

    • Visão Geral e Instalação

      TESTE GRÁTIS
    • Configuração Inicial

    • Criando o index.html

    • Testando a Configuração

    • Usando o Sistema de Módulos do CommonsJS

    • Importância da referência

    • Usando EcmaScript 2015 sem Babel

    • Usando o Sistema de Módulos do ES2015 (Babel)

    • Interpretando o Operador Spread (Plugin Babel)

    • Adicionando o Preset do React

    • Adicionando o Loader para CSS

  • 25

    React [Legado] 102:10

    • Configurando o Projeto

    • Configurando o Build com Webpack

    • Criando o arquivo index.html

    • Olá React

      TESTE GRÁTIS
    • Primeiro Componente

    • Primeiro Componente (Arrow Function)

    • Usando as Propriedades do Componente

      TESTE GRÁTIS
    • Exportando mais de um Componente

    • Componentes Filhos

    • Componentes Filhos

    • Passando Propriedades para Componentes Filhos (Parte 1)

    • Passando Propriedades para Componentes Filhos (Parte 2)

    • Componente de Classe

    • Componente com Estado (Ex. Contador)

    • Componentes Controlados/Não Controlados

  • 26

    React com Redux [ Legado ] 77:42

    • Palavras Iniciais e Instalação

    • Conhecendo o Redux

    • Configurando o Redux

    • Ex 01 - Integrando o React-Redux (Parte 1)

    • Ex 01 - Integrando o React-Redux (Parte 2)

    • Ex 01 - Integrando o React-Redux (Parte 3)

    • Ex 02 - Integrando o React-Redux (Parte 1)

    • Ex 02 - Integrando o React-Redux (Parte 2)

Descrição

O principal objetivo de um desenvolvedor de software é sem dúvida construir aplicações, então que tal construir duas aplicação do absoluto zero usando o principal framework web do mercado? 

A proposta do curso de React é te guiar passo a passo na construções de duas aplicações completas, mas se você ainda está iniciando no mundo do React, não tem problema porque antes de entrarmos no desenvolvimento das aplicações, serão apresentados vários exercícios para ensinar os fundamentos de Webpack, React, Redux e todo o ecossistema envolvido no processo. Inclusive tecnologias de backend, como Node, Express e MongoDB.

Falaremos desde o básico, mostrando os primeiros passos, até assuntos complexos como geração de formulários dinâmicos e middlewares.

Curso 100% prático, mas sempre deixando muito claro os conceitos essenciais para que o aluno aprenda os princípios associados à prática.

Tenho certeza que esse curso te dará uma visão bastante robusta sobre desenvolvimento Web com Javascript!

Seja muito bem vindo!

Instrutor

Leonardo Leitão

Leonardo Leitão é graduado em Engenharia Elétrica pela Universidade Federal do Ceará e Mestre em Informática Aplicada pela Universidade de Fortaleza. Há 13 anos atua como desenvolvedor de softwares e é Professor de desenvolvimento de software há mais de 10 anos. Instrutor premiado internacionalmente pela excelência dos seus cursos, Fundador da Cod3r, reconhecida como uma das melhores escolas de tecnologia do pais onde já passaram mais de 150 mil alunos.

Seja Nosso Assinante

Tenha acesso a este curso e muitos outros por um preço muito mais acessível. Junte-se a muitos outros assinantes e venha fazer parte desta comunidade. Clique no botão abaixo e descubra como!

FAQ

  • Após a compra do curso tenho prazo pra poder assistir?

    Não, o curso pode ser assistido a qualquer tempo sem limite de prazo.

  • O curso oferece certificado?

    Sim, ao final do curso você receberá um certificado baseado na carga horária pra concluir o curso

  • Existe suporte para as minhas dúvidas?

    Sim, temos um time de suporte pronto pra tirar as dúvidas relativas ao conteúdo do curso.

  • Adquirindo o plano de assinatura também terei acesso a este curso?

    Sim

  • Existe a possibilidade de pagar este curso por boleto?

    Sim, basta enviar email para suporte@cod3r.com.br e solicitar.