Índice

Conteúdo

Criando um Gerador de memes de gatos

Então, agora que vimos as bases do React, vamos criar um projeto bem simples de uma página só para praticarmos o que aprendemos até agora, eu chamo esse projeto de Gerador de memes de Gatos, eu já até o publiquei online, acesse a página: https://jonathan-santos.github.io/geradorDeMemesDeGatos/

É um projeto bem simples onde você digita o texto do meme que você quer, clica no botão criar meme e finalmente, na parte de baixo da página aparecerá o seu meme.

Vamos como sempre, começando a criar o básico de uma aplicação react:

class App extends React.Component {
    render() {
        return (
            <h1>Gerador de memes de gatos</h1>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector("#app")
)

Agora, podemos pensar em como iremos fazer a página. Se você a observar, temos na página:

Não é muita coisa, então vamos preencher o nosso componente App:

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Gerador de memes de gatos</h1>
                <hr />

                <div>
                    <input placeholder="Digite algo" />
                    <button>Criar meme</button>
                </div>

                <img />
            </div>
        )
    }
}

Agora temos a base da interface criada, mas sem conteúdo, então vamos resolver isso agora! O nosso conteúdo será dinâmico, digitamos o texto do meme no <input> e quando clicamos no <button> atualizamos o <img> com uma imagem rândomica de gato com o texto digitado dentro dela. Para isso usaremos o maravilhoso Cat as a Service, que é uma serviço que nos oferece fotos de gatos com uma simples chamada para a API deles, podendo customizar o tamanho da imagem que vem e até o texto que vem. Acesse o link https://cataas.com/cat/says/hello%20world! para ver o poder desse serviço.

Agora que sabemos o que será dinâmico em nossa página e de onde virão as imagens, vamos começar a inserir a State da nossa aplicação. O nosso State terão duas propriedades: texto e meme. texto é a propriedade que guardará a string do que o usuário digitou na caixa de texto e meme também será uma string que guardará o link do meme criado pelo CatAsAService.

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            texto: null,
            meme: null
        }
    }

Tendo o State iniciado, vamos começar a o atualizar, vamos primeiro adicionar a mudança da propriedade texto do State:

class App extends react.Component {
    //...

    textoDigitado(e) {
        this.setState({
            ...this.state,
            texto: e.target.value
        })
    }

    render() {
        return (
            <div>
                <input value={this.state.texto} type="text" placeholder='Digite algo...' onChange={(e) => this.textoDigitado(e)} />
            </div>
        )
    }
}

Simplesmente fizemos com que o <input> da aplicação tenha como o valor a propriedade texto do State e que a cada vez que o usuário digite algo (evento onChange()) ele execute a função textoDigitado(e) que aceita um parâmetro e que tem dentro dele o que o usuário digitou e.target.value. Graças ao jeito que o React funciona, precisamos de tudo isso para atualizar uma propriedade do State com o que está digitado em um Input.

Agora que a propriedade texto do State está sendo atualizada, vamos para a última parte, atualizar a <img> com o meme:

class App extends react.Component {
    //...

    async pegarFoto() {
        this.setState({
            ...this.state,
            foto: 'https://cataas.com/cat/says/' + this.state.texto + '?t=medium'
        })
    }

    render() {
        return (
            <div>
                <button onClick={() => this.pegarFoto()}>Criar meme</button>

                <img src={this.state.foto} />
            </div>
        )
    }
}

Para atualizar a imagem, estamos fazendo com que quando cliquemos no button, o onClick() dele execute a função pegarFoto() que atualiza a propriedade foto do State com o link com um novo texto no meio.

E nosso projeto está pronto, teste-o e veja como ficou!

E é isso, agora você tem um belo gerador de memes de gatos em suas mãos. É claro, ele ainda pode melhorar bastate, acesse o site da Api e veja as diferentes opções para fazer algo mais legal, por exemplo, use Gifs ao invés de imagens! E também tente estilizar a página para que fique mais bonite e a publique.

Código final

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            texto: null,
            meme: null
        }
    }
    
    textoDigitado(e) {
        this.setState({
            ...this.state,
            texto: e.target.value
        })
    }

    async pegarFoto() {
        this.setState({
            ...this.state,
            foto: 'https://cataas.com/cat/says/' + this.state.texto + '?t=medium'
        })
    }

    render() {
        return (
            <div>
                <h1>Gerador de memes de gatos</h1>
                <hr />

                <div>
                    <input value={this.state.texto} type="text" placeholder='Digite algo...' onChange={(e) => this.textoDigitado(e)} />
                    <button onClick={() => this.pegarFoto()}>Criar meme</button>
                </div>

                <img src={this.state.foto} />
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector("#app")
)

Finalizando

E você finalmente chegou ao final do post, isso é o básico do React. Existe muito mais no React para você aprender e especialmente praticar. Tente criar um projeto um pouco mais elaborado no React, por exemplo, um clone do Instagram ou do Twitter, para práticar o que aprender e fixar na cabeça.

Algo que eu recomendo que faça agora é aprender a como criar um ambiente completo para o React, pois o Babel Standalone, que usamos até agora é muito bom, mas é lento em comparação com o React propriamente preparado. Eu fiz um post explicando como criar um ambiente React profissional e sem muitas frivolidades, tente fazer um também.

Obrigado por chegar até o final desse post! Dúvidas e sugestões pode entrar em contato comigo pelo Twitter ou algum outro lugar e até mais!