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/
- Parte 1:https://www.mundojs.com.br/2020/04/06/criando-pokedex-com-react-parte-1/
- Parte 2:https://www.mundojs.com.br/2020/04/06/criando-pokedex-com-react-parte-2/
- Parte 3: 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:
- Importe o React;
- Importe o DetailView css;
- Cria uma nova função chamada DetailView;
- Retorne uma section vazia com className=”detail-view”;
- Adicione elementos para mostrar os dados e a imagem;
- 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; }
- O sprite-image conterá o Sprite Pokemón;
- 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