Introdução ao React - Criando um pequeno projeto - parte 8


Criando um projeto simples para entender melhor o React

Data: 09/03/2020
Categoria: dev

Indice

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:

1
2
3
4
5
6
7
8
9
10
11
12
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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.

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 (https://cataas.com) 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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: https://pipocacafeinada.com.br/pt/criando-um-ambiente-minimo-para-react/1/

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!