Curso React + Redux: Fundamentos e 2 Apps do Absoluto ZERO!

• Visão Geral do Curso

• Repositório do Curso & Apostila

• Usando o Terminal

• Terminais

• Aviso importante aos usuários de Windows

• Atenção ao baixar o MongoDB

• Resolver problema de instalação de dependências

• Configuração do Ambiente (Windows)

• Configuração do Ambiente (Linux)

• Configuração do Ambiente (Mac)

• 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

• Solução do Bug NaN do projeto Calculadora (React)

• Introdução do módulo

• Criação do projeto

• Estrutura do projeto

• Aplicando estilo

• 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

• Nova estrutura de pastas - Next 13

• 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

• 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

• Configurando o Projeto

• Configurando o Build com Webpack

• Criando o arquivo index.html

• Olá React

• Primeiro Componente

• Primeiro Componente (Arrow Function)

• Usando as Propriedades do Componente

• Exportando mais de um Componente

• 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

• Comuniçã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)