Índice

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

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:

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:

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

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:

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

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:

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!