Pipoca Cafeinada - Introdução ao React - Criando interfaces declarativas
Introdução ao React - Criando interfaces declarativas - parte 7
O que significa interface declarativa e como as criar?
Criando interfaces declarativas
O React como dito anteriormente, é uma biblioteca javascript para criação de componentes de maneira declarativa para a Web. Mas o que quer dizer de maneira "declarativa"? Isso quer dizer que podemos criar interfaces com lógica imbutida de maneira "natural", o que quero dizer com isso? Vamos ver alguns dessas possibilidades.
class Cachorro extends React.Component {
<div className="cachorro">
<img src={this.props.imagem} />
O componente Cachorro que você viu acima é bem simples, ele aceita uma propriedade chamada imagem que então é mostrada quando o componente é renderizado, mas, o que acontece se ele não recebe uma imagem? Não vai aparecer nada e ainda pode acabar atrapalhando o design da página. Não seria bom se pudéssemos de alguma maneira fazer com que aparecesse outra coisa se ele não recebesse uma imagem? Bem, na verdade podemos:
{this.props.imagem != null
? <img src={this.props.imagem} />
: <img src="https://kutt.it/6YHgD5" />
Usando o Ternary Operator do Javascript (na prática um If inline) podemos falar para o React renderizar uma imagem padrão no componente Cachorro caso não passemos uma no seu uso. Então experimente o código anterior dando um parâmetro ou não para o componente:
<Cachorro imagem="https://images.dog.ceo/breeds/doberman/n02107142_3621.jpg" />,
<Cachorro />
E podemos fazer isso com texto também, por exemplo, se não passarmos uma raça pro cachorro ele mostra apenas a palavra cachorro:
<span className="raça">{this.props.raca || "cachorro"}</span>
Nesse caso nem precisamos usar o Ternary Operator, usando uma operação booleana estamos falando pro React que caso a propriedade raca seja igual a false (ou seja, caso ela tenha o valor null, "" ou até false) ele deve mostrar como raça cachorro. Copie o código anterior e teste ele:
<Cachorro raca="doberman" imagem="https://images.dog.ceo/breeds/doberman/n02107142_3621.jpg" />,
Depois de o testar tente fazer modificações, por exemplo, tente fazer com que se você passar pro componente bonitinho="true", ele adicione uma classe "bonitinho" para estilização ou alguma outra ideia interessante.
É claro, outra coisa que podemos fazer bem legal com o React são Loops, por exemplo, passando uma lista de links de imagens, criar vários componentes Cachorro, cada um com uma imagem:
class Cachorros extends React.Component {
cachorros: [
"https://t2.ea.ltmcdn.com/pt/razas/1/0/0/img_1_chihuahua_0_600.jpg",
"https://love.doghero.com.br/wp-content/uploads/2018/02/shutterstock_434268268-768x512.jpg",
"https://i.pinimg.com/originals/81/06/6f/81066fdd3f0ed7a909712cf094e56ee6.jpg",
{this.state.cachorros.map((cachorro) => (
<Cachorro imagem={cachorro} />
O map() é uma função imutável do javascript ES2015+ que itera (executa uma função sobre) cada item da lista onde é executado, neste caso, estamos fazendo com que para cada item da lista (que se tornou o parâmetron cachorro dentro do map), o React rendezize um componente Cachorro com o link apropriado.
E graças a essa abordagem declarativa, podemos deixar o código dentro da função render() como está e alterar outra parte do componente Cachorros para que ao invés de ele usar uma lista padrão de imagens de cachorro, ele a pegue da internet usando uma chamada de API:
cachorros: []
const resJSOn = await fetch('https://dog.ceo/api/breeds/image/random/50')
const res = await resJSON.json()
cachorros: res.message
Aqui nós utilizamos uma nova função dos componentes React, o componenteDidMount(), essa função é executada loga depois que o nosso componente é "desenhado" pela primeira vez, ou seja, qualquer código que colocarmos dentro dele será executado imediatamente após o nosso componente estiver pronto para uso, ele é o lugar ideal para fazermos chamadas de Api o quanto antes em nossas páginas. E dentro dele usamos a função fetch() para fazer nossa chamada pra Api, usamos a função json() na resposta do fetch() para transformar a resposta em um objeto que podemos usar e finalmente atualizamos o nosso state com a resposta usando a função setState().
E você agora viu como você pode usar o React para criar interfaces dinâmicas bem complexas de maneira muito fácil de alterar e trabalhar. Mas antes de ir para a próxima parte, por que não tenta criar uma interface nova usando essas técnicas, ou então melhorar uma antiga e ver o quão melhor ficou?
E na próxima parte, praticaremos o que vimos até agora em um simples projeto que pode acabar lhe fazendo rir um pouco, pelo menos assim espero!