React JS - Parte 2
Transferir como PPTX, PDF1 gostou248 visualizações
1) O documento discute problemas com o escopo do this em JavaScript e como resolver usando arrow functions ou bind. 2) Apresenta o conceito de roteamento em React usando React Router e cria exemplos de componentes acessados por rotas. 3) Explica o Context API para compartilhar estado entre componentes sem ter que passar props manualmente.
![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);
}](https://image.slidesharecdn.com/tap07-190314202609/85/React-JS-Parte-2-3-320.jpg)
![useState
• Facilita a definição de propriedades de estado e seus respectivos
métodos modificadores
• Sintaxe:
• const [propriedade, setPropriedade] = useState(VALOR_INICIAL)](https://image.slidesharecdn.com/tap07-190314202609/85/React-JS-Parte-2-37-320.jpg)
React JS - Parte 2
- 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> </> );
- 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
- 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