Рубрики
Без рубрики

Создание отзывчивой сетки в React

Изучите основные шаги для настройки приложения React с помощью Flexbox, чтобы сделать адаптивную сетку. В нашем P … Tagged с JavaScript, React, DataGrid.

Изучите основные шаги для настройки приложения React с помощью Flexbox, чтобы сделать адаптивную сетку.

В нашей предыдущей статье, Создание отзывчивого макета в React Мы начали с того, чтобы узнать, как настроить базовую адаптивную макет в нашем приложении React, используя запросы Flexbox и Media. Мы использовали пакет NPM React Hooks, чтобы помочь с точками останова и еще одним пакетом для помощи с отзывчивыми изображениями (тег изображения). Мы также продемонстрировали Компонент меню Kendoreact и к концу у нас была довольно отзывчатая демонстрация, которую мы собираемся развить в этой статье.

Не отличающийся от пользовательского интерфейса, макет занимает время и детские шаги. Мы можем продолжать строить и работать, чтобы рефакторировать и улучшить то, что мы уже построили, а также изучать некоторые новые методы, связанные с отзывчивой планировкой и медленно включаем эти идеи. Следующее, над чем мы должны поработать в этом приложении, – это привлечь какую -то отзывную сеть. Я хотел бы использовать еще один пакет NPM для этого, он называется React-Simple-Flex-Grid Анкет

Нашей отправной точкой будет демонстрация Stackblitz, которая является просто вилкой демонстрации, где мы остановились в последней статье. Я бы порекомендовал сделать вилку этой демонстрации, если вы планируете следовать. В противном случае просто прочитайте и поймите, что вы можете открыть любую из демонстраций, которые я предоставляю, чтобы играть с кодом в любой точке остановки в посте. Я предоставлю несколько демонстраций в различных точках ниже.

Наше приложение для начала должно выглядеть как изображение ниже:

Он не выиграет никаких наград, но мы еще не сосредоточены на внешнем виде, мы все еще получаем наши морские ноги в этом постоянно движущемся и изменяющем размер отзывчивого мира. И мы уже выучили несколько основных методов макета для строительства. С учетом сказанного, в этой части серии блогов я хочу сосредоточиться на создании отзывчивой сетки, которую мы можем использовать в нашем приложении, чтобы нам не приходилось приносить что -то вроде начальной загрузки, чтобы использовать их сетку.

Я собираюсь макетировать то, что мы можем попробовать построить, которое будет использовать эту сетку для многих точек останова. Идея будет сеткой логотипов от компаний, которые используют наш продукт. Это довольно стандартная вещь, которую компании делают на своем веб -сайте, и та же концепция может быть применена ко многим различным применениям. Сначала мне нужно получить несколько логотипов, которые мы можем использовать. Я загрузил их в Imgur, чтобы мы могли легко использовать их с StackBlitz. Мы отобразим эти изображения в сетке, показывающей четыре ширины в больших разрешениях, три ширины в среднем разрешении и два ширины в небольшом разрешении.

Я собираюсь раскошелиться на нашу демонстрацию и начать работать над нашим первым набором изменений.

Первый порядок бизнеса – создать список компаний в .json файл. Прежде чем мы составим список логотипов в сетку, мы должны сначала беспокоиться о написании некоторого кода, который будет отображать каждую компанию из нашего списка имен в некоторую разметку в нашем JSX. Наш CompanyList.json Файлы будут просто содержать массив объектов. Каждый объект является компанией, и у него есть имя и URL -адрес изображения. Я загружу изображение для каждой компании в imgur.com что мы можем использовать для нашего изображения.

Добавить CompanyList.json файл.

[
  { "name": "Nasa", "image": "https://imgur.com/RTFOOHR" },
  { "name": "Microsoft", "image": "https://imgur.com/yln0oYC" },
  { "name": "Phillips", "image": "https://imgur.com/ZHKnVr8" },
  { "name": "Fox", "image": "https://imgur.com/Hrzbo49" },
  { "name": "Sony", "image": "https://imgur.com/Ld5Ux3g" },
  { "name": "IBM", "image": "https://imgur.com/rg7RAdm" },
  { "name": "Toshiba", "image": "https://imgur.com/aj9vfmu" },
  { "name": "Volvo", "image": "https://imgur.com/hTkpXvw" }
]

Нам нужно создать Компании.jsx страница. Эти компоненты не должны использовать .jsx Формат, они могли бы так же хорошо использовать .js как расширение файла. Когда я создаю новый компонент, я обычно использую .jsx .

import React from 'react';
import companyList from './companyList.json';

const Companies = () => {
  return (
    

      {companyList.map(co => 
{co.name}
)}
    

  );
}

export default Companies;

Здесь ничего слишком сложного, мы импортируем React и Syst нашу компаний. Мы создаем функциональный компонент, который просто отображает список компаний и вкладывает значение имени внутри Div. Это повторяется для каждой компании, и теперь мы можем подумать о том, как мы перейдем от этого к созданию гибкой сетки для каждого из изображений.

Теперь давайте добавим следующий импорт в main.js страница:

import Companies from './Companies';

И тогда мы отобразим компонент наших компаний ниже нашей информации о пользовательском интерфейсе Kendo. Div с названием класса Kendo-Details теперь будет выглядеть как пример кода ниже:


    
React Components

    
Building UI for business apps is hard, even on React. Make it easy with our native React UI and DataViz components.

    
Companies Using Kendo

На данный момент, и если вы следили за ним, ваша демонстрация совпадет с StackBlitz ниже:

Поговорим об изображениях

Изображения в этом списке 600 x 600 px И мы не хотим показывать их в этом резолюции, поэтому я хотел просто рассказать о именах, чтобы гарантировать, что наша логика и код работают. Я действительно хочу иметь другое изображение для каждой точки останова, но давайте предпримем шаги ребенка, чтобы добраться туда. Это будет означать, что 600 пикселей будет размером с наши изображения, чтобы показать выше больших точек отдыха. 300 пикселей будут размером с наши изображения над средней точкой перерыва и до большой точки останова. И, наконец, наши изображения на маленьком будет шириной 150 пикселей.

Но сейчас мы можем просто изменить их размер, чтобы занять 100% их пространства.

Давайте добавим пакет, который мы хотим использовать для решения сетки Flexbox: React-Simple-Flex-Grid Анкет Я выбрал этот пакет для его простоты использования. Я попробовал несколько пакетов для React, которые предоставили аналогичную модель компонента. Вместо создания DOV, мы создадим и теги. Эта библиотека, хотя и проста, позволяет нам делать некоторые сложные вещи. Чтобы создать сетку, мы будем использовать только один ряд. Внутри этого тега строки мы собираемся повторить наш компонент COL для каждого элемента в нашем списке. Затем мы можем предоставить инструкции для каждой точки останова.

Вот как я хочу использовать их компонентный API:

Работая с сети столбцов по умолчанию 12, я хочу:

  • В XSmall: каждый компонент COL займет 6 столбцов каждой строки
  • На небольшом: каждый компонент COL займет 4 столбца каждой строки
  • На среде: каждый компонент COL займет 3 столбца каждой строки
  • На свободе: каждый компонент COL займет 2 столбца каждой строки
  • В Xlarge: каждый компонент COL займет 2 столбца каждой строки

Это также означает:

  • В XSmall: будет 2 изображения на ряд
  • На маленьком: будет 3 изображения на ряд
  • На среде: будет 4 изображения на ряд
  • В целом: будет 6 изображений на ряд
  • At xlarge: будет 6 изображений на ряд

Для этого мы обновим часть JavaScript, который отображает список из компании, чтобы генерировать то, что нам нужно, чтобы использовать компоненты, поставляемые React-Simple-Flex-Grid Анкет По умолчанию точки останова:

  • Xsmall: 0-767
  • Маленький: 768-991
  • Среда: 992-1199
  • Большой: 1200-1599
  • Xlarge: 1600-infinity

Имея все это в виду, просто взглянув на страницу GitHub или NPM для React-Simple-Flex-Grid , вы должны увидеть, что JSX, который нам нужно написать, будет:


  {companyList.map(co => 
    {co.name}
  )}

Если бы мы описали, как будет выглядеть наша сетка над точкой среднего перерыва и под большой точкой перерыва, это выглядело бы так:

Но только с текстом внутри каждого столбца он не похож на то, что мы хотим, так что давайте добавим изображения. Обновите свой код на компоненте компаний, чтобы вернуть следующий JSX:

const Companies = () => {
  return (
    
      {(companyList).map(co => 
        
      )}
    
  );
}

На данный момент, и если вы следили за ним, ваша демонстрация совпадет с StackBlitz ниже:

Теперь, когда у нас есть лучший способ избавить нашу страницу, я хочу переосмыслить наш макет Flexbox. Пользовательская работа, которую мы проделали с помощью медиа -запросов в нашем CSS, не очень красиво И гораздо лучше написать четкий краткий код, включая CSS. Когда я оглядываюсь назад на Navbar и главный код, я не могу представить себе, что я действительно понимаю, если я не написал его. Кроме того, я не думаю, что наша цель – написать CSS, который нам нужен для сети сами. Это может быть целая статья сама по себе. Мы хотим, чтобы какой -то тип компонента может абстрагировать детали построения сетки Flexbox и сделать эту технологию доступной в простой компонентной системе React. Я никогда не стесняюсь выбрасывать код. Итак, давайте достанем мусор.

Я думаю, что с помощью этой новой простой системы сетки мы можем достичь аналогичной планировки, плюс мы можем избавиться от некоторых запутанных CSS, которые мы писали ранее, и вместо этого использовать эти компоненты ROW и COL из React Simple Flex Grid. У нас будет какой -то код CSS, и он будет содержать некоторые точки останова, но давайте используем точки останова, которые поставляются по умолчанию в простой гибкой сетке React. После игры с экраном в разных размерах, я думаю, что моя первоначальная идея иметь несколько точек отдыха в таких маленьких размерах – не совсем то, что я хочу в конце. Поэтому я собираюсь удалить точку останова на 415 пикселях. Давайте снова посмотрим на то, что представляют собой точки останова по умолчанию для этой системы сетки.

  • Xsmall: 0-767
  • Маленький: 768-991
  • Среда: 992-1199
  • Большой: 1200-1599
  • Xlarge: 1600-infinity

Глядя на этот набор точек останова, я думаю, что мы можем уйти с двумя графиками заголовка. Один из них появится до 768 пикселей. Тогда мы переключимся на меньшее квадратное изображение. Я сделал два новых изображения для использования:

Наш маленький Изображение должно будет быть шириной 767 пикселей, это потому, что ширина 767 пикселей будет самым большим, чтобы отобразить, прежде чем попасть в эту точку останова в 768 пикселях.

Наш Средний вверх Изображение будет шириной 300 пикселей, потому что это кажется самым большим, что я захочу показывать это изображение на данный момент. Мы всегда могли создать еще одно изображение, чтобы подавать гораздо большие экраны, но ради краткости давайте вернемся к простому обслуживанию малого против среды и выше.

Небольшой:

Средний вверх:

Чтобы сохранить множество утомительных шагов, я думаю, что лучший способ представить эти новые изменения, используя React Simple Flex Grid для меня, чтобы взять волшебную палочку и показать вам обновленный пример StackBlitz, который был рефактор. Но я объясню, что я сделал в этом рефакторе:

Моя идея здесь состоит в том, чтобы использовать наш компонент React Simple Flex Grid вместо пользовательского кода Flexbox, который мы придумали. Это очистит наш CSS и наш HTML. Я также перемесчу раздел информации об пользовательском интерфейсе Kendo в свой собственный компонент под названием Kendoinfo , точно так же, как у компаний есть свой собственный компонент. Наш main.js Файл должен быть довольно прост для просмотра. По этой причине я также поместим адаптивное изображение в свой собственный компонент, чтобы оно не загромождало JSX.

Перемещение нашего AdpressiveImage Компонент в обертку также позволит нам передать реквизиты, если это необходимо. Мы не сделаем этого сейчас, но это хорошая идея в будущем. Например, мы могли бы пройти в массиве изображений, каждый с минимальной шириной. Эти данные могут быть использованы для генерации AcpressiveImagesize Компоненты внутри AdpressiveImage составная часть. Но сейчас, по крайней мере, мы абстрагировали код и переместили его за пределы main.js файл и отделил его.

Давайте посмотрим на то, что мы очистили main.js Файл выглядит сейчас:

const App = () => {
  const checkIfMediumPlus = useMediaPredicate("(min-width: 768px)");
  return (
    
      
        
      
      
        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

Это намного проще для любого, чтобы войти и понять, что происходит. До тех пор, пока они имеют базовое понимание того, как работают другие 12 сетей колонн, или, может быть, они работали с начальной загрузкой или фундаментом в прошлом, это выглядит знакомо.

Что касается Custom.css Файл, то, что я сделал, – это несколько точек останова, чтобы соответствовать React-Simple-Flex-Grid По умолчанию и я кропотливо проходил каждую точку останова и написал несколько стилей для каждого компонента. Мы также увеличиваем размер текста в целом, когда нарастаем до среднего и выше. Это не идеально, но это лучше, чем то, что мы имели раньше и легко читали и следовали, когда вы просматриваете документ.

.navbar {
  background-color: #fff;
}
.component-responsive-image img {
  padding: 1em;
  width: 100%;
}
.kendo-info {
  padding: 1em;
}
.companyList {
  padding: 1em;
  background-color: #efefef;
}

@media screen and (min-width: 0px) {
  .component-responsive-image img {
    padding: 0;
    width: 100%;
  }
  .companyList h2, .kendo-info h2 {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .navbar {
    height: 100vh;
    padding-top: 1em;
    background-color: #efefef;
  }
  .component-responsive-image {
    height: 100%;
  }
  .component-responsive-image img {
    padding: 1em;
    max-width: auto;
    height: 100%;
  }
  .companyList {
    background-color: #fff;
  }
  .kendo-info {
    font-size: 1.25em;
  }
}

@media screen and (min-width: 992px) {
  .kendo-info {
    font-size: 1.5em;
  }
}

Наконец, я сделал некоторое базовое расположение файлов в соответствующие каталоги:

Завершая

Это подводит нас к концу этой части серии. До сих пор в нашей первой статье мы рассказали о том, как работать с Flexbox вручную, а также исследовать готовые к использованию компонентов React из экосистемы, чтобы помочь нам достичь отзывчивого поведения, не выполняя всю работу вручную. В этой статье мы продолжали опираться на экосистему, чтобы найти простую и простую в использовании системы сетки, чтобы мы могли создавать адаптивную макет и сетки для других целей, таких как галерея изображений. Я надеюсь, что вы чувствуете, что знаете, что сейчас реагируете, реагируйте немного лучше.

Всегда стоит знать, как этот материал работает под капюшоном, однако в наше время нет никаких причин, чтобы бросить свою собственную сетку Flexbox – это однажды, чтобы получить базовое понимание – это здорово, но есть много компонентов, которые там может помочь вам сделать это. Это экономит много времени и горя, и это не сложно изменить, если вы переходите к другому решению.

Ниже приведена наша окончательная демонстрация Stackblitz и продукт этого рефакторинга. Если бы я отвечал за создание этого приложения полностью, это было бы отличным местом для начала, и у нас были бы инструменты, которые могут помочь нам справиться с повседневным отзывчивым поведением и макетом в нашем приложении.

Оригинал: “https://dev.to/progresstelerik/creating-a-responsive-grid-in-react-2h9i”

Читайте ещё по теме: