O que você vai fazer
- Entender os conceitos por trás do React (estado, componentes, VirtualDOM);
- Criação de interações com o usuário;
- Como os recursos do JavaScript Moderno entram no mundo React;
- Modularização e organização de código;
- Arquitetura de uma aplicação escalável;
- Performance a nivel de carregamento da página e de código;
- Conceitos para a criação de uma SPA;
- Persistência e sincronização de dados via Web Services;
- Desenvolver aplicações pensando em componentes;
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
- Os exercícios
- O projeto
- Tirando dúvidas
Sobre o curso
- O que é necessário saber para desenvolver o projeto com React em qualquer lugar?
- Ferramentas necessárias:
Configurações Gerais
- Quais as diferenças do HTML e do JSX
React, JSX e o que são Componentes?
- Como o JavaScript que não existe funciona nos navegadores?
Babel e o JavaScript que não existe
- Objetivo
- Passo a passo com código
Exercício: Do HTML para o JSX
- Componentes com diferentes comportamentos
- Header da página logado e deslogado da aplicação
Composição de componentes no React
- Objetivo
- Passo a passo com código
Exercício: Compondo componentes por meio do props.children
- Objetivo
- Passo a passo com código
Exercício: Importando o restante da estrutura do projeto
- Exibir ou esconder, eis a questão?
Trabalhando com estado no React
- Objetivo
- Passo a passo com código
Exercício: Criando tweets parte 1: Validando com estado
- Comunicação com APIs utilizando fetch
- Adicionando itens de forma dinâmica na página
Elementos dinâmicos no React
- Objetivo
- Passo a passo com código
- Desafio
Exercício: Criando tweets parte 2: Inserindo Tweet na página
- Componentes que são páginas
Roteamento no React com os poderes do React Router v4
- Objetivo
- Passo a passo com código
Exercício: Roteamento, a página de Login e a organização das rotas
- Objetivo
- Passo a passo com código
- Desafio
Exercício: Lógica do Login
- Evoluindo componentes adicionando comportamentos
- Conceito geral de autenticação no Front End
Rotas privadas com High Order Components
- Objetivo
- Passo a passo com código
Exercício: Autenticando as rotas
- Objetivo
- Passo a passo com código
Exercício: Salvando tweets com AJAX
- Conhecendo os ciclos de vida dos componentes React
- Os principais Lifecycles
Lifecycle e por que ele existe?
- Objetivo
- Passo a passo com código
Exercício: Trazendo tweets com AJAX utilizando o Lifecycle do React
- Objetivo
- Passo a passo com o código
Exercício: Dando like nos tweets com Estado Interno
- Objetivo
- Passo a passo com o código
Exercício: Removendo tweets da página
- Problemas com componentes que possuem diversas props
Garantindo os tipos das propriedades dos componentes
- Objetivo
- Passo a passo com o código
Exercício: Tipando as propriedades com PropTypes
- Objetivo
- Passo a passo com o Código
Exercício: Criando o modal para visualizar o tweet
- Store, state, subscribe e dispatch?
Configurando o Redux e utilizando no React
- Objetivo
- Passo a passo com o código
Exercício: State dessincronizado, SSOT e reestruturação do fluxo de dados.
- Objetivo
- Passo a passo com o código
Exercício: Adicionando tweets via o Redux
- Compartilhando informações entre a estrutura do React
Integrando o Redux via Context com react-redux
- Separando lógicas dos componentes e criando APIs para manipulação de dados
- Redux thunk fazendo dispatch de funções
Container e presentational components com Redux
- Objetivo
- Passo a passo com o código
Exercício: Separando as funções dos componentes
- Objetivo
- Passo a passo com o código
Exercício: Removendo a store do window e deixando tudo no Context do React
- Objetivo
- Passo a passo com o código
Exercício: Separando a função de remover
- Objetivo
- Passo a passo com o código
Exercício: Isolando responsabilidades separando em container components
- Objetivo
- Passo a passo com o código
Exercício: Criando o modal para visualizar o tweet
- Objetivo
- Passo a passo com o código
Exercício: Tweet como Presentational Component
- Trabalhando com várias informações no state da store
Combinando Reducers no Redux
- Objetivo
- Passo a passo com o código
- Desafio
Exercício: Notificações por meio do Redux e combinando reducers
- Server Render
- Discussão
(*Apêndice) Performance em aplicações React com Server Side Render.
- Objetivo
- Passo a passo com o código
(*Apêndice) Exercício: Utilizando o React Charger Razzle
* 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
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