App Studios Ghibli — Pt.1
Tags: css, javascript, react, javascriptdevelopmen
Published: 2023-03-28 12:52:56

---
title: App Studios Ghibli — Pt.1
published: true
date: 2022-10-25 12:37:51 UTC
tags: css,javascript,react,javascriptdevelopmen
canonical_url: https://marcellecode.medium.com/app-studios-ghibli-pt-1-bf627e4200e6
---

### App Studios Ghibli — Pt.1

#### Criando uma aplicação de busca utilizando a API dos Studios Ghibli, React.js e o Code Server em um dispositivo Android.

Uma boa forma de praticar os conhecimentos em um determinado framework ou biblioteca, é criando aplicações divertidas de estudo, que irão realizar os mesmos tipos de operações que sistemas maiores costumam executar. Nessa série de artigos nós vamos criar uma aplicação que vai executar a operação de leitura da API dos Studios Ghibli e permitir que criemos filtros buscas. Este app vai seguir o design abaixo ( [Link para o design](https://www.figma.com/community/file/1163894853955717844)).

![](https://cdn-images-1.medium.com/max/957/0*0jzdl0nFGsEWwXGH)
_Design Figma Studios Ghibli App_

Então vamos começar com o basico, criando o nosso projeto e criando a estrutura básica dele.

```
npx cretae-react-app studios-ghibli-app
```

Depois de executarmos esse comando o React vai criar a estrutura básica do nosso projeto. Se você quiser conhecer mais sobre a estruturade um projeto React.js você pode dar uma olhadinha neste [Link](https://blog.webdevsimplified.com/2022-07/react-folder-structure/). Agora vamos focar dentro na pasta ./src.

A primeira coisa que vamos fazer é instalar a biblioteca de icones chamada [React Icons](https://react-icons.github.io/react-icons/)

```
npm install react-icons --save
```

E depois criar o nosso arquivo reset.css, para evitar algumas margens indesejadas no projeto. Para criar esse arquivo eu sugiro que você utilize um arquivo de reset.css já pronto e aqui no projeto nós vamos utilizar o arquivo deste [Site](https://meyerweb.com/eric/tools/css/reset/) e o nosso ./src/reset.css vai ficar desta forma:

Com o reset.css criado vamos importar ele no nosso .src/index.js, para ele ser utilzado por todo o projeto. Seu index.js vai ficar desta forma:

Agora vamos começar a limpar o nosso projeto, removendo coisas que não iremos utilizar e adicionar alguns recursos para essa primeira etapa. Então dentro da pasta src execute o comando abaixo:

Depois vamos abrir o arquivo App.js e remover o conteúdo de dentro do return e remover o import da logo também. Seu arquivo ./src/App.js vai ficar parecido com esse:

Ainda dentro da pasta ./src, vamos criar uma pasta chamada generals e dentro de genrals uma chamada images e colocar a logo dos Studios Ghibli ( [link para download](https://marcellecode.com/Link)). Com a imagem criada vamos começar criando o cabeçalho do nosso app (neste momento ainda não vamos organizar os componentes, isso será feito mais para frente). Em ./src/App.css cole o trecho de código abaixo:

Agora em ./src/App.js vamos criar a estrutura do nosso header. O arquivo App.js vai ficar desta forma:

Se rodarmos o projeto ele vai estar parecido com a imagem abaixo:

![](https://cdn-images-1.medium.com/max/500/0*Anuw7DcO2n96PWC8)
_Menu desktop_

E se redimensionarmos a tela para uma tela menor, teremos o nosso menu hamburguer.

![](https://cdn-images-1.medium.com/max/400/0*K3MR1pO25h1iL4_A)
_Menu Responsivo_

Mas ele ainda não está 100%, pois quando clicamos ele ainda não funciona. O nosso css já possui uma classe para exibir e esconder o menu chamada “.expanded”. Mas para o navegador saber quando essa classe deve ser ativada, precisamos informar quando querermos que ele ative. No nosso caso o melhor candidato para nos trazer essa informação é o botão do menu hamburguer, então quando o usuário clicar no icone do menu queremos que ele seja aberto e se clicar novamente queremos que ele feche.

O React nos permite controlar o status de um item utilizando o hook useState e é exatamente o que vamos fazer agora. Então vamos começar importando esse hook e criando a constante que vai controlar o status do botão e permitir que o React controle o css do nosso header.

```
const [isOpen, setOpen] = useState(false);
```

Agora é a hora em que a mágica do React vai nos permitir manipular o CSS com poucos caracteres de código. Vamos adicionar um ternário no nome da nossa classe css que irá variar de acordo com o estado do nosso botão.

E essa foi a primeira etapa da construção do nosso projeto, o link do repositório com o código que foi feito nesta primeira etapa esta disponível no link abaixo.

Caso você tenha alguma duvida ou algum problema para fazer a instalação é só deixar o comentário ai embaixo.

_Originally published at_ [_https://marcellecode.com_](https://marcellecode.com/app-studios-ghibli-pt1)_._

![](https://cdn-images-1.medium.com/max/1024/1*n3OOmDK242WZa98yNNfT1w.jpeg)
_marcellecode banner_