Publicado em por Alexandre Machado

Criando Pokedéx com React – Parte 4

Na parte 4 do nosso tutorial, vamos fazer o componente DetailView. Você poderá conferir a parte 3 no link: https://www.mundojs.com.br/2020/04/03/criando-pokedex-com-react-parte-3/

DetailView:

Vá para a sua pasta componentes e crie um arquivo chamado DetailView.js. Também vá para a pasta styles e crie o arquivo DetailView.css.

Abra o DetailView.js e siga esses passos:

  1. Importe o React;
  2. Importe o DetailView css;
  3. Cria uma nova função chamada DetailView;
  4. Retorne uma section vazia com className=”detail-view”;
  5. Adicione elementos para mostrar os dados e a imagem;
  6. Exporte a nova função criada.
import React from 'react';
import './styles/DetailView.css';

const DetailView = () => {
    return (
        <section className="detail-view">
            <img className='sprite-image' />
            <div className='data-wrapper'>
                <h1 className='data-name'></h1>
                <p className="data-char"></p>
            </div>
        </section>
    )
}

export default DetailView;

No seu arquivo DetailView.css, adicione o seguinte código:

.detail-view {
    width: 50%;
    height: 100%;
    padding: 10px;
    background-color: #df095e;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sprite-image {
    width: 80%;
    height: 150px;
    margin: 10px auto;
    background-color: #585858;
    border: 15px solid #DEDEDE;
    color: #585858;
}

.data-wrapper {
    width: 80%;
    height: 110px;
    padding: 10px;
    margin: 0 auto;
    background-color: #585858;
    border-radius: 5px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.22);
    color: #FFF;
}

.data-name {
    margin: 0 0 5px;
}

.data-char {
    font-size: 10px;
}
  1. O sprite-image conterá o Sprite Pokemón;
  2. A classe data-chat refere-se às características do Pokemón (id, nome, tipo).

No App.js, importe o componente DetailView. Renderize-o colocando o componente DetailView como uma tag html dentro do elemento pai.

import React, { Component } from 'react';
import PokeList from './PokeList';
import DetailView from './DetailView';
import './styles/App.css';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">
        <PokeList />
        <DetailView />
      </div>
    );
  }
}

export default App;

E este será o resultado:

Está gostando desta sequência de artigos? Comente abaixo!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-4-72afd23905a6