React: React-Router, Context, Chrome Developer Tools e Hooks

1. React
React-Router, Context,
Developer Tools e Hooks
Bruno Catão

2. Antes de Tudo
• Vamos falar sobre o problema do this / bind
• Também vamos falar sobre um componente React obrigatoriamente
ter apenas um elemento filho

3. Problema do this / bind
• JavaScript é uma linguagem funcional !
• O objeto this referencia o contexto de quem chama uma função e não
de quem criou a função
• Ex:
Loja
------------------------
produtos: []
------------------------
comprar(produto)
DetalheProduto
------------------------
produto: {}
------------------------
onClick( )
<DetalheProduto
produto={p}
onComprar={this.comprar} />
onClick={() =>
this.props.onComprar(p)}
comprar(p) {
this.produtos.push(p);
}

4. Problema do this / bind
• Soluções:
• Passar o valor do this como parâmetro (ô solução feia !)
• var that = this;
• chamaFuncaoComCallback(that, callback);
• // No callback usa "that" ao invés de this
• Fixar o valor do this usando o bind (é menos feia, mas ocupa muito espaço)
• function minhaFuncao() { ... }
• minhaFuncao = minhaFuncao.bind(this);
• Usar as arrow functions (vem com bind automático)
• minhaFuncao = ( ) => { ... }

5. Problema de Apenas um Filho
• Isso não pode:
return (
<h1>Um elemento</h1>
<p>Outro elemento</p>
);
• Solução tradicional (feia):
return (
<div>
<h1>Um elemento</h1>
<p>Outro elemento</p>
</div>
);
• React.Fragment (quase bom):
return (
<React.Fragment>
<h1>Um elemento</h1>
<p>Outro elemento</p>
</React.Fragment>
);
• Elemento vazio (agora sim !)
return (
<>
<h1>Um elemento</h1>
<p>Outro elemento</p>
</>
);

6. Roteamento (finalmente)

7. Roteamento
• "Definição": é uma forma de mudar os componentes exibidos na
página a partir de padrões de URL (rotas);
• Para tanto, precisamos instalar um pacote "React Router"
create-react-app teste-rotas
cd teste-rotas
npm i --save react-router-dom
code .

8. Projeto de Exemplo
• Vamos criar alguns componentes básicos que podem ser acessados
com os seguintes padrões de URL
Componente URL
Principal /
ListaDeProdutos /produtos
DetalheProduto /produtos/ID_PRODUTO
PaginaNaoEncontrada QQ_OUTRA_URL

9. Configuração das Rotas

12. Componentes

17. Resultado

20. Navegando entre os componentes

24. Context

25. Qual é o problema ?
• Ter que passar valores em muitos níveis (props e callbacks)
• Acoplamento entre componentes
• Solução:
• Criar um contexto
• Um contexto armazena um objeto chamado value
• Esse objeto pode conter valores e funções
• Qual aplicado em um componente, o valor do contexto está disponível nele e
em seus filhos

27. Context
• Criando um Context:
var MeuContexto = React.createContext( );
• Atribuindo o value do context:
<MeuContexto.Provider value={QQ_COISA} >
ELEMENTOS QUE VÃO RECEBER O CONTEXTO
</MeuContexto.Provider>

28. Consumindo os valores do Context
• Consumer:
• Ex. MeuContext.Consumer
• Faz sentido, se o valor é atribuído com Provider, ele é lido com Consumer
• Ex:
<MeuContext.Consumer>
{ (context) => ACESSA AQUI OS VALORES QUE ESTÃO NO VALUE }
</MeuContext.Consumer>
• contextType:
• Ex: Componente.contextType = MeuContext;
• Injeta o context no componente, aí é só acessar (this.context)

31. React Developer Tools
Extensão para o Chrome

35. Hooks (introdução)
esse tema ainda vai continuar

36. Hooks
• Novo meio para declarar e manipular o estado de componentes
• Utilizados em Function Components:

37. useState
• Facilita a definição de propriedades de estado e seus respectivos
métodos modificadores
• Sintaxe:
• const [propriedade, setPropriedade] = useState(VALOR_INICIAL)

38. Motivação
• Function Components e Hooks são meios para simplificar a criação de
componentes
• A retrocompatibilidade é mantida
• Class Components continuam sendo suportados (ainda são o jeito
padrão de utilizar componentes)
• Próximos passos:
• Ciclo de vida dos componentes (Class e Function)
• Requisições AJAX (fetch)
• async / await

39. Atividade
• Individual
• Prazo: 21/03/2019
• O que fazer:
• Adicionar rotas à loja:
• todos os produtos, detalhe de um produto, registro e login
• O registro e o login ainda não precisam estar funcionando (preciso só dos
formulários e das rotas)
• Como entregar:
• O link do repositório deverá ser enviado para a atividade no classroom da
disciplina