Curso React + Redux: Fundamentos e 2 Apps do Absoluto ZERO!
Aprenda React Js, Redux, Webpack, Redux-Form, MongoDB, Express, Node Vários exercícios práticos e Duas Apps do ZERO!
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
Ó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 menosEsse curso é fantástico, consegui perceber ainda mais o seu valor quando apliquei os conhecimentos em projetos pessoais ao precisar rever alguns conceitos fi...
Ler maisEsse 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 menosPerfeito
Perfeito
Ler menosVisão Geral do Curso
TESTE GRÁTISRepositório do Curso & Apostila
Usando o Terminal
Terminais
Aviso importante aos usuários de Windows
Atenção ao baixar o MongoDB
Configuração do Ambiente (Windows)
Configuração do Ambiente (Linux)
Configuração do Ambiente (MacOS)
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
Criando Projeto
Componente Calculator
Componente Button #01
Componente Display
Componente Button #02
Implementando a Lógica #01
Implementando a Lógica #02
Introdução do Módulo
Criação do Projeto
Estrutura do projeto
Aplicando estilos
React Router Dom v6
Navegação simples
Navegação com parâmetro
Entendendo o parâmetro Exact
Página não encontrada
Conclusão do módulo
Introdução do Módulo
Configuração do Projeto
useState #01
useState #02
useEffect
Desafio useEffect
Desafio useEffect - Resposta
useRef #01
useRef #02
Desafio função Merge
useMemo
useCallback
Porque usar Context API
useContext #01
useContext #02
useReducer #01
Desafio useReducer
Desafio useReducer - Resposta
useReducer #02
Custom Hooks #01
Custom Hooks #02
Conclusão do módulo
Link do repositório
Configuração do Projeto
O que é Next.js?
Estrutura de Pastas
Primeiro Componente & Rotas
Entendendo o JSX
Integração JavaScript/JSX
CSS Global
CSS Modularizado
Usando Componente
Propriedades de Componentes
Navegação entre Componentes
Componente Layout
Componente Navegador
Navegação Simples
Navegação Dinâmica
Componente com Estado
Usando API #01
Usando API #02
Integração com API
Recomendação de Vídeo
Modelos de Pré-Renderização
Pré-Renderização na Prática
Introdução do projeto
Resultado Final
Nova instalação do Tailwind
Configuração: NextJS, TailwindCSS e Firebase
Componentes Layout e Título
Classe Cliente
Componente Tabela #01
Componente Tabela #02
Componente Tabela #03
Componente Botão
Componente Formulário
Alternando entre Tabela e Formulário
Integrando Tabela e Formulário
Configurando Firebase no Projeto
Repositório de Clientes
Integrando Cadastro com Firebase
Organizando Código com Hooks
Excluindo Projeto Firebase
Visão Geral
Configuração e Instalação
Configurando o Servidor com o Express
Conexão com o Banco de Dados
Avisos no terminal sobre MongoDB
ODM e Criação da API REST
Mapeamento das Rotas
Testando a API (Postman)
Habilitando o CORS
Iniciando o Backend com PM2
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
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
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
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
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
Problema de Responsividade do Menu
Navegação com React-router (Versão 2)
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)
Solução: Problemas com Bcrypt
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)
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)
Parte #01
Parte #02
Deploy Backend
Deploy do Backend #01
Deploy do Frontend #02
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
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
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?
Introdução
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
Corrigir problemas do módulo node-sass.
Carregando Arquivo .SCSS (SASS)
Desenvolvimento & Produção
Carregando Arquivos de Imagens
Adicionando WebServer
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
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
Função: Cidadão de Primeira Classe
Função: Parâmetros e Retorno São Opcionais
Função: "this" pode Variar
Função: "this" e a Função bind #01
Função: "this" e a Função bind #02
Funções Arrow #01
Funções Arrow #02
Funções Arrow #03
Funções Anônimas
Funções Callback #01
Funções Callback #02
Funções Callback #03
Funções Construtoras
Array: Map #01
Array: Map #02
Array: Map #03
Array: Filter #01
Array: Filter #02
Array: Reduce #01
Array: Reduce #02
Array: Reduce #03
ESNext: Revisão #01
ESNext: Revisão #02
ESNext: Revisão #03
ESNext: Operador Rest/Spread
Promises
Usando Callbacks Aninhadas
Refatorando Callbacks p/ Promises
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
Visão Geral e Instalação
TESTE GRÁTISConfiguraçã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
Configurando o Projeto
Configurando o Build com Webpack
Criando o arquivo index.html
Olá React
TESTE GRÁTISPrimeiro Componente
Primeiro Componente (Arrow Function)
Usando as Propriedades do Componente
TESTE GRÁTISExportando 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
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
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)
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.
Neste curso também você vai aprender os principais fundamentos e conceitos do NextJS. O NextJS nada mais é do que um framework para React, a principal biblioteca para desenvolvimento web. As principais funcionalidades do Next são a renderização estática e pelo lado do servidor (SSR), possuir suporte para o TypeScript e um serviço próprio de tratamento de rotas. Teremos uma aplicação para Criação, Leitura, Edição e Remoção de dados, o famoso CRUD (Create, Read, Update, Delete) com NextJS. Utilizando o Firebase e Firestore como banco de dados, utilizando também o TailwindCSS para criar o visual do projeto e integrando com TypeScript. Tudo isso será mostrado e explicado durante a seção, desde a criação do projeto, a instalação das dependências, configuração e integração com o banco de dados e também a integração e uso tanto do Tailwind quanto do TypeScript.
Tenho certeza que esse curso te dará uma visão bastante robusta sobre desenvolvimento Web com Javascript!
Seja muito bem vindo!
Leonardo Leitão
Pessoas que adquiriram este curso também se interessaram pelos cursos abaixo
Todos os Cursos
Todos os Cursos
Todos os Cursos
Todos os Cursos
Não, o curso pode ser assistido a qualquer tempo sem limite de prazo.
Sim, ao final do curso você receberá um certificado baseado na carga horária pra concluir o curso
Sim, temos um time de suporte pronto pra tirar as dúvidas relativas ao conteúdo do curso.
Sim
Sim, basta enviar email para [email protected] e solicitar.