Web Programming Full Stack

Criando um aplicativo com

create-react-app
prática integrativa

Objetivos
● Vamos criar um aplicativo com create-react-app. Em seguida, vamos identificar os
componentes, adicionar estilos a eles e consultar uma API externa.
● No final do aplicativo, teremos uma visão geral bastante completa do React.

Requisitos
Ter instalado npm: para executar o comando npx, que é uma extensão do npm. Isso nos
permitirá usar o comando create-react-app.

Ter uma conta no Giphy: esta é a API que vamos consumir de nosso aplicativo. Deixamos o
link aqui: https://developers.giphy.com.

Recomendamos baixar os seguintes arquivos para tornar o estilo do site mais amigável:
link.

1
 Micro desafio - Etapa 1:
● Inicie um novo projeto com npx create-react-app giphy-app. No final da
instalação, devemos verificar se dentro da pasta você vê algo semelhante à imagem
a seguir.

Eles podem não ser exatamente os mesmos arquivos (variam dependendo da versão do npm e de
outras ferramentas).

● Em seguida, devemos executar o comando npm start para ver se tudo funciona
corretamente.

2
 Micro desafio - Passo 2:
● Vamos abrir os arquivos que deixamos no início e vamos identificar os
componentes que podemos ver.
● Assim que os componentes forem identificados, vamos começar a mover o HTML
para nosso aplicativo React. Recomendamos criar uma pasta chamada components
onde vamos criar e salvar todos os componentes da aplicação.
● Vamos resolver os erros que nos trazem a transferência de HTML para JSX.
Lembre-se que JSX não é HTML, por isso temos que ter cuidado com o fechamento
das tags, com os nomes das propriedades e com o retorno de dois elementos HTML
diferentes. Se tudo correr bem, deveremos ter algo assim:

Mas por que é assim? Não tinha estilos associados?

Na IU que fornecemos, há também um CSS, cabe a você pensar em como adicioná-lo.
Com os estilos adicionados, deve ser parecido com o seguinte.

3
Caso não tenha sido o mesmo, teremos que revisar os erros no console e verificar se
estamos importando o CSS corretamente.

Micro desafio - Etapa 3:

1. Uma vez que todo o site foi atomizado com seus respectivos componentes, vamos
começar a dar-lhe funcionalidade. A funcionalidade de exibição de gifs, mas… quem
deve ter essa funcionalidade? Isso depende muito de como estruturamos os
componentes. Normalmente, quando há poucos componentes, não atomizamos
tanto para não ter que fazer muitas transferências de informações. Suponha que
temos apenas três componentes. App, que terá toda a lógica; o Nav, que ficará
encarregado de atualizar os Gifs; e o componente Gif, que vai se encarregar de
exibir as informações de um gif.
2. Dentro do componente App, vamos começar a fazer um componente de classe com
todos os seus métodos. Lembre-se de que os mais importantes são render (),
componentDidMount () e componentDidUpdate ().
3. Vamos chamar a API giphy. Este é o URL da documentação para saber como
chamá-lo: https://developers.giphy.com/docs/api/endpoint#trending. O endpoint
que vamos usar é o seguinte:
https://api.giphy.com/v1/gifs/trending?api_key=tuapikey.

Algo a ter em mente é que você precisa de uma API Key, e ela só será obtida se você estiver
registrado.

4
 Micro desafio - Passo 4:
● Precisamos exibir as informações no navegador. Se pudéssemos fazer a chamada
API, poderíamos fazer um console.log e deveria ser parecido com isto:

Antes de podermos exibir esta informação, precisamos salvá-la em um local

temporário. Vamos criar um estado para os gifs e armazená-los dentro. Agora,
como podemos exibir esses gifs?
Se você pensou em usar um iterador, acertou, mas, cuidado, vamos ter que usar o
componente Gif. Os dados mais importantes são url e nome de usuário.
Você também tem que ter cuidado onde você começa o URL da imagem de. Na
imagem a seguir podemos ver onde está o correto.

5
 Dentro do objeto Gif temos um objeto chamado images, a partir dele vamos
selecionar a propriedade downsized ou original. Em outras palavras, teremos que
chamar: data [0] .images.downsized.url quando se trata de realmente exibir a
imagem.

Poderíamos fazer um mapa para modificar os valores reais do array e encurtar essa chamada.

Se tudo deu certo, podemos ver algo parecido com isso no site:

Lembre-se que os gifs podem variar dependendo de quando você fez o exercício.

6
Conclusão

React é uma ferramenta incrivelmente poderosa. Esperamos que você aproveite ao máximo.
Embora o que sabemos sobre o React até agora seja muito limitado, há muito mais
informações na documentação oficial.

Deixamos você pensar como poderia implementar o botão "carregar aleatoriamente"

(uma pequena dica seria usar eventos).

Até a próxima!