Publicado em por Alexandre Machado

Criando Pokedéx com React – Parte 2

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:

  1. Construtor: onde inicializamos o nosso estado;
  2. 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);
}

 

  1. Usamos o display: flex para separar as duas visualizações que construiremos;
  2. Fixamos a largura e altura para a tela do desktop;
  3. Aplicamos margem superior e inferior para separar a vista dos cantos e esquerda e direita automaticamente para coloca-los no meio;
  4. 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