Работать с данными — это здорово, но это не очень полезно, если мы не можем отобразить их должным образом. В этом уроке мы создадим простой и настраиваемый компонент, который принимает массив объектов и отображает адаптивную сетку. Я помню разочарование, которое я испытал, когда хотел добиться чего-то подобного, но не волнуйтесь. К концу этой статьи все ваши разочарования превратятся в радость.
Видеоурок: YouTube канал.
При количестве столбцов, равном 2, окончательный результат будет выглядеть примерно так:
Шаги, которые мы пройдем
- Инициализация нашего проекта
- Установка реакции-бутстрапа
- Настройка нашей структуры папок/файлов
- Подведение итогов
Инициализация нашего проекта
Чтобы инициализировать наш проект, мы откроем нашу командную строку, чтобы создать новое приложение для реагирования. Если у вас еще нет приложения create-react-app, вам сначала нужно установить node, а затем выполнить следующую команду:
npx create-react-app responsive-react-grid
Установка реакции-бутстрапа
После того, как вы создали новое приложение для реагирования, мы перейдем к нашей папке, выполнив следующую команду:
cd responsive-react-grid/ && code .
Если вы не используете vscode в качестве IDE по умолчанию, просто запустите команду без кода &&.
Теперь мы установим react-bootstrap и воспользуемся CDN bootstraps, чтобы включить все необходимые файлы css. Перейдите к /public/index.html и поместите следующий код в раздел head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
Теперь установите react-bootstrap, выполнив следующую команду:
npm install react-bootstrap [email protected]
Вы можете проверить свои зависимости внутри файла package.json, чтобы убедиться, что он установлен правильно.
Настройка нашей структуры папок / файлов
Прежде чем мы создадим наш компонент, мы удалим некоторый шаблонный код и настроим нашу структуру папок для нашего проекта. Сначала создайте новый каталог /src/css и переместите в него App.css. Во-вторых, создайте новый каталог /src/components и создайте в нем новый функциональный компонент с именем GridSystem.js. Наконец, удалите ненужный шаблонный код внутри App.css и App.js. После всего этого ваши файлы должны выглядеть так:
App.js
GridSystem.js
App.css
Отлично, теперь у нас есть начальная структура проекта со всеми необходимыми файлами!
Чтобы сделать эту статью короткой, я включу объяснения кода в виде комментариев, размещенных ниже.
Подведение итогов!
В этом разделе мы закончим наши файлы App.js и GridSystem.js.
App.js
Важные выводы
Вот и все! Теперь у вас есть адаптивная система сетки, которую можно использовать всякий раз, когда вы хотите визуализировать коллекцию объектов. Массив внутри нашей системы сетки не обязательно должен состоять из объектов, он также будет работать с простыми числами или примитивными типами данных. Наконец, в этом примере я включил только одну точку останова начальной загрузки; однако вы можете включить больше, если хотите. Просто передайте их в качестве реквизита нашему компоненту. Подробнее о контрольных точках начальной загрузки можно прочитать здесь.
Спасибо, что прочитали мою статью, и я надеюсь, что она помогла вам! Если у вас есть какие-либо вопросы, не стесняйтесь, присылайте мне сообщения в моем канале YouTube.
