App Studios Ghibli — Pt.1

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).

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. Agora vamos focar dentro na pasta ./src.

A primeira coisa que vamos fazer é instalar a biblioteca de icones chamada 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 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). 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:

Menu desktop

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

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.

marcellecode banner