Desafio técnico de front-end para o processo seletivo da Ímpar. O objetivo é reproduzir o layout dado, consumir a API PokéAPI e mostrar os cards da melhor maneira possível. Funcionalidades necessárias: implementação de busca e paginação com a melhor performance, utilizando ReactJS de preferência.
Implementar a API Clima Tempo.
Design aqui.
- O primeiro passo é instalar o Git em seu computador caso você ainda não o tenha.
- Os pacotes que iremos utilizar durante o desenvolvimento desse projeto serão gerenciados pelo Node Package Manager (NPM), então precisaremos instalá-lo. Vamos até o site oficial do Node.js para instalar sua versão LTS (versão mais estável). Quando instalamos o Node.js, o NPM também é instalado no computador como parte do mesmo pacote.
- Além disto é interessante ter um bom editor para trabalhar com o código como por exemplo o VSCode.
# Abra seu terminal/cmd e clone este repositório
$ git clone https://github.com/MayllaRabay/desafio-impar.git
# Acesse a pasta do projeto
$ cd desafio-impar
# Baixe todas as dependências e pacotes da aplicação
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm start
# A aplicação será aberta na porta:3000 - acesse em seu navegador
http://localhost:3000
Com o React é mais fácil e prático de manipular a interface de acordo com o que o usuário poderá interagir, graças à tríade que o compõe: COMPONENTES, PROPRIEDADES e ESTADOS.
Toda função dentro do React que retorna um HTML é um COMPONENTE! Os componentes facilitam a manutenção e a leitura do código, principalmente quando nossa aplicação começa a ficar grande, com muitas páginas, muitas linhas de código, muitas funcionalidades. O uso de componentes no React é excelente para evitar repetição, ou seja, quando temos o mesmo 'pedaço' de interface se repetindo ao longo da aplicação, um header ou footer por exemplo, nós podemos encapsular essa parte em um componente e utilizá-lo várias vezes dentro da nossa aplicação.
Além dos componentes serem uma forma de reutilizarmos código, eles também servem para isolar as responsabilidades de uma determinada funcionalidade, sendo assim mais fácil de resolver bugs e manter a integridade do código, com menos chance de quebrá-lo.
Para mais informações, veja a documentação do React.
Os ícones utilizados nesse projeto foram feitos pela Flaticon.
Autor
Feito com ❤️ por Maylla Rabay 👋 Entre em contato!