Introdução ao React - Criando interfaces declarativas - parte 7


O que significa interface declarativa e como as criar?

Data: 09/03/2020
Categoria: dev

Indice

Conteúdo

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.

Condições

1
2
3
4
5
6
7
8
9
class Cachorro extends React.Component {
render() {
return (
<div className="cachorro">
<img src={this.props.imagem} />
</div>
)
}
}

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:

1
2
3
4
5
6
7
8
9
10
11
12
class Cachorro extends React.Component {
render() {
return (
<div className="cachorro">
{this.props.imagem != null
? <img src={this.props.imagem} />
: <img src="https://kutt.it/6YHgD5" />
}
</div>
)
}
}

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:

1
2
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Cachorro extends React.Component {
render() {
return (
<div className="cachorro">
<span className="raça">{this.props.raca || "cachorro"}</span>

{this.props.imagem != null
? <img src={this.props.imagem} />
: <img src="https://kutt.it/6YHgD5" />
}
</div>
)
}
}

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:

1
2
<Cachorro raca="doberman" imagem="https://images.dog.ceo/breeds/doberman/n02107142_3621.jpg" />,
<Cachorro />

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.

Loops

É 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Cachorros extends React.Component {
constructor() {
super()
this.state = {
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",
]
}
}
render() {
return (
<div>
{this.state.cachorros.map((cachorro) => (
<Cachorro imagem={cachorro} />
))}
</div>
)
}
}

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Cachorros extends React.Component {
constructor() {
super()
this.state = {
cachorros: []
}
}

async componentDidMount() {
const resJSOn = await fetch('https://dog.ceo/api/breeds/image/random/50')
const res = await resJSON.json()

this.setState({
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().

Finalizando

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!

Próxima parte