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:
E se redimensionarmos a tela para uma tela menor, teremos o nosso menu hamburguer.
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.
Top comments (0)