Na parte 2 do nosso projeto, construiremos o layout básico do nosso projeto. Você precisará da Parte 1 para dar sequência neste artigo.
Wireframe:
O React tem a ver com construção de componentes. Então, a melhor maneira de fazer isso é criar wireframes para mapeamento dos componentes a serem construídos. O nosso aplicativo principal terá dois componentes: a visualização do Pokemón e a visualização dos detalhes.
O Pokemon view conterá um componente chamado PokeList que envolverá 151 PokeCélulas (da primeira geração de Pokemón). Ao clicar em uma PokeCélula, a visualização dos detalhes mostrará as informações e a sprite do Pokemón selecionado.
Tipos de componentes:
O React possui 2 tipos básicos de componentes: stateful (com estado) e stateless (sem estado). Os componentes Stateful têm seu próprio estado. No nosso aplicativo, o componente APP será Stateful, pois manterá o estado dos dados do Pokemón.
Vamos construir!
Abra o App.js e exclua todo o conteúdo interno. A primeira etapa é importar o pacote React e desconstruir a classe Component.
import React, { Component } from 'react';
Agora, precisamos criar um novo aplicativo que estenda o Componente. Todos os componentes Stateful requerem dois métodos principais:
- Construtor: onde inicializamos o nosso estado;
- Render: onde escrevemos nosso jsx.
No construtor, precisamos chamar a função super(), pois estamos estendendo da classe componente. Além disso, precisamos declarar nosso estado inicial. Por enquanto, será um objeto vazio.
import React, { Component } from 'react'; class App extends Component { constructor() { super(); this.state = {}; } }
Adicionaremos o método render. Ele retorna a sintaxe jsx, que é uma mistura de JavaScript e HTML. O método render só pode retornar um elemento, portanto, criaremos um elemento pai e aninharemos filhos dentro dele. Se estamos retornando um elemento aninhado, envolveremos ele entre parênteses.
import React, { Component } from 'react'; class App extends Component { constructor() { super(); this.state = {}; } render() { return ( <div className = "App"> </div> ); } }
Feito isso, importaremos nossa folha de estilo na parte superior para adicionar o CSS do nosso componente e exportar toda a classe para que possamos usá-la em outros arquivos.
import React, { Component } from 'react'; import './styles/App.css' class App extends Component { constructor() { super(); this.state = {}; } render() { return ( <div className = "App"> </div> ); } } export default App;
Abra o seu arquivo App.css e adicione o seguinte css:
.App { display: flex; align-items: center; justify-content: center; width: 650px; height: 400px; padding-left: 10px; margin: 50px auto; background-color: #FE0065; border-radius: 10px; box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22), 0 18px 45px rgba(0, 0, 0, 0.22); }
- Usamos o display: flex para separar as duas visualizações que construiremos;
- Fixamos a largura e altura para a tela do desktop;
- Aplicamos margem superior e inferior para separar a vista dos cantos e esquerda e direita automaticamente para coloca-los no meio;
- Aplicamos cor ao fundo.
Com isso, concluímos a Parte 2! Até a próxima!
Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-2-3d119b07f9e0