React JS: вывод списков пользователей (Урок 7)

Начиная с этого урока, мы приступаем к разработке небольшого проекта на основе библиотеки React JS. В этом уроке мы изучим вывод списка пользователей на веб-странице.

Подготовка проекта

Продолжим работу над существующим проектом, предварительно очистив его. Удалим компоненты Button и Image, так как они пока не понадобятся. В компоненте Header удалим подключение этих компонентов. В файле App.js удалим: компонент Image, изображение, конструктор, хук useEffect, собственные методы, атрибут className и свойство name.

Вместо name будем использовать «Список пользователей». В результате наш сайт будет выглядеть проще.

Работа со стилями

Для улучшения внешнего вида сайта, подправим стили в main.css. Укажем общий шрифт для всего сайта, используя font-family. Воспользуемся сервисом fonts.google.com, выберем шрифт Oswald (варианты 300 и 600) и импортируем его в CSS-файл:

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;600&display=swap');

body {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

header {
  font-weight: 600;
  background-color: #333;
  padding: 25px 100px;
}

Компонент Users

Создадим компонент Users.js для вывода списка пользователей. В него поместим код из App.js (с изменениями) и экспортируем компонент. Добавим массив пользователей:

const users = [
  { id: 1, firstName: 'Bob', lastName: 'Marley', bio: '...', age: 72, isHappy: true },
  { id: 2, firstName: 'John', lastName: 'Doe', bio: '...', age: 30, isHappy: false }
];

Каждый объект в массиве представляет пользователя с уникальным id.

Вывод и стилизация списка

Используем метод map для перебора массива и вывода данных. Добавим стили в main.css для main, aside и класса user:

<div>
  {users.map(user => (
    <div className="user" key={user.id}>
      <h3>{user.firstName} {user.lastName}</h3>
      <p>{user.bio}</p>
    </div>
  ))}
</div>

Импортируем компонент Users в App.js и выведем его, добавив элементы main и aside для структуры страницы:

<main>
  <Users />
</main>
<aside>
  {/* Боковая панель */}
</aside>

CSS стили:

main {
  width: 50%;
  float: left;
  padding: 50px 100px;
}

aside {
  width: 40%;
  float: right;
  padding: 20px;
}

.user {
  background-color: #f0f0f0;
  padding: 20px;
  margin-bottom: 20px;
}

Обработка пустого массива и условный рендеринг

Добавим условие для вывода сообщения «Пользователи отсутствуют», если массив users пуст, и условный рендеринг для отображения информации о настроении пользователя:

{users.length > 0 ? (
  users.map(user => (
    <div className="user" key={user.id}>
      <h3>{user.firstName} {user.lastName}</h3>
      <p>{user.bio}</p>
      <p>{user.isHappy ? 'Счастлив  ' : 'Не особо  '}</p>
    </div>
  ))
) : (
  <div className="user">
    <h3>Пользователи отсутствуют</h3>
  </div>
)}

В этом уроке мы научились выводить списки пользователей на веб-странице, используя React JS, обрабатывать массивы с помощью метода map, добавлять стили и реализовывать условный рендеринг.