Curso React e Redux para construção de Web Apps

FD9E034F-C706-472D-ABA4-310433A703E5 Created with sketchtool. 32 horas/aula
Veja as próximas turmas

O que você vai fazer

Para quem é esse curso?

Para desenvolvedores web que já tiveram contato com JavaScript e querem desenvolver SPAs trabalhando com estado e o poder dos componentes para reuso de código.

Para aproveitar melhor o curso recomendamos que você tenha conhecimento em

Curso JavaScript Moderno e os fundamentos para construção de Web Apps

Conteúdo detalhado do curso JS-46

    Sobre o curso

  1. Os exercícios
  2. O projeto
  3. Tirando dúvidas

    Configurações Gerais

  1. O que é necessário saber para desenvolver o projeto com React em qualquer lugar?
  2. Ferramentas necessárias:

    React, JSX e o que são Componentes?

  1. Quais as diferenças do HTML e do JSX

    Babel e o JavaScript que não existe

  1. Como o JavaScript que não existe funciona nos navegadores?

    Exercício: Do HTML para o JSX

  1. Objetivo
  2. Passo a passo com código

    Composição de componentes no React

  1. Componentes com diferentes comportamentos
  2. Header da página logado e deslogado da aplicação

    Exercício: Compondo componentes por meio do props.children

  1. Objetivo
  2. Passo a passo com código

    Exercício: Importando o restante da estrutura do projeto

  1. Objetivo
  2. Passo a passo com código

    Trabalhando com estado no React

  1. Exibir ou esconder, eis a questão?

    Exercício: Criando tweets parte 1: Validando com estado

  1. Objetivo
  2. Passo a passo com código

    Elementos dinâmicos no React

  1. Comunicação com APIs utilizando fetch
  2. Adicionando itens de forma dinâmica na página

    Exercício: Criando tweets parte 2: Inserindo Tweet na página

  1. Objetivo
  2. Passo a passo com código
  3. Desafio

    Roteamento no React com os poderes do React Router v4

  1. Componentes que são páginas

    Exercício: Roteamento, a página de Login e a organização das rotas

  1. Objetivo
  2. Passo a passo com código

    Exercício: Lógica do Login

  1. Objetivo
  2. Passo a passo com código
  3. Desafio

    Rotas privadas com High Order Components

  1. Evoluindo componentes adicionando comportamentos
  2. Conceito geral de autenticação no Front End

    Exercício: Autenticando as rotas

  1. Objetivo
  2. Passo a passo com código

    Exercício: Salvando tweets com AJAX

  1. Objetivo
  2. Passo a passo com código

    Lifecycle e por que ele existe?

  1. Conhecendo os ciclos de vida dos componentes React
  2. Os principais Lifecycles

    Exercício: Trazendo tweets com AJAX utilizando o Lifecycle do React

  1. Objetivo
  2. Passo a passo com código

    Exercício: Dando like nos tweets com Estado Interno

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Removendo tweets da página

  1. Objetivo
  2. Passo a passo com o código

    Garantindo os tipos das propriedades dos componentes

  1. Problemas com componentes que possuem diversas props

    Exercício: Tipando as propriedades com PropTypes

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Criando o modal para visualizar o tweet

  1. Objetivo
  2. Passo a passo com o Código

    Configurando o Redux e utilizando no React

  1. Store, state, subscribe e dispatch?

    Exercício: State dessincronizado, SSOT e reestruturação do fluxo de dados.

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Adicionando tweets via o Redux

  1. Objetivo
  2. Passo a passo com o código

    Integrando o Redux via Context com react-redux

  1. Compartilhando informações entre a estrutura do React

    Container e presentational components com Redux

  1. Separando lógicas dos componentes e criando APIs para manipulação de dados
  2. Redux thunk fazendo dispatch de funções

    Exercício: Separando as funções dos componentes

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Removendo a store do window e deixando tudo no Context do React

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Separando a função de remover

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Isolando responsabilidades separando em container components

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Criando o modal para visualizar o tweet

  1. Objetivo
  2. Passo a passo com o código

    Exercício: Tweet como Presentational Component

  1. Objetivo
  2. Passo a passo com o código

    Combinando Reducers no Redux

  1. Trabalhando com várias informações no state da store

    Exercício: Notificações por meio do Redux e combinando reducers

  1. Objetivo
  2. Passo a passo com o código
  3. Desafio

    (*Apêndice) Performance em aplicações React com Server Side Render.

  1. Server Render
  2. Discussão

    (*Apêndice) Exercício: Utilizando o React Charger Razzle

  1. Objetivo
  2. Passo a passo com o código

* Apêndices são conteúdos adicionais que não fazem parte da carga horária regular do curso. São conteúdos extras para direcionar seus estudos após o curso.

Próximas turmas

Selecione a cidade e os períodos de sua preferência

Qual cidade você pode ir?
Quais períodos você prefere?
Ver turmas encontradas

Nós encontramos essas turmas:

Não achou a turma ideal pra você? Consulte outras turmas e horários.

Entre em contato

Não encontrou o curso que procura? Conheça a Alura, a plataforma online da Caelum

Conheça a Alura