Давайте создадим Pokedex с помощью React: Часть 4

В части 4 этого руководства мы собираемся настроить компонент DetailView. Для начала клонируйте ветку part4 этого репо.

Подробный вид

Перейдите в папку компоненты и создайте файл DetailView.js. Затем перейдите в папку стилей и создайте файл DetailView.css.

cd src/components/
touch DetailView.js styles/DetailView.css

Откройте свой DetailView.js и выполните следующие действия:

1. Импортируйте пакет React
2. Импортируйте стили DetailView
3. Создайте новую функцию с именем DetailView
4. Вернуть пустой раздел с подробным представлением className
5. Добавьте элементы для отображения данных и изображения
6. Экспорт вновь созданной функции

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;

Перейдите в файл DetailView.css и добавьте следующие стили:

.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;
  border-radius: 5px;
  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;
}

Вот несколько комментариев к добавленным стилям:

• Спрайт-изображение будет содержать выбранный спрайт покемона
• Класс data-char относится к характеристикам покемона (идентификатор, имя, тип).

Перейдите в App.js и импортируйте компонент DetailView. Выполните визуализацию, поместив компонент DetailView в виде самозакрывающегося тега HTML внутри родительского элемента функции визуализации.

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;

Идите вперед и запустите приложение, чтобы увидеть результат.

Это конец части 4.

Чтобы продолжить Часть 5, нажмите эту ссылку.