Можете ли вы на мгновение забыть о названии этой статьи? Статья, которую вы собираетесь прочитать, не имеет ничего общего с химической реакцией или тем, как вы реагируете на обстоятельства. Однако это имеет прямое отношение к приложениям React.
Что вообще значит "реагировать"?
Это просто название статьи, которую вы читаете. Помимо шуток, вы можете понять, что это означает технику создания адаптивных компонентов в приложениях React. Обычно это связано с тем, что я бы назвал адаптивным рендерингом. Мы вернемся к этому через минуту.
Адаптивный дизайн
Адаптивный дизайн - не новая концепция. Если вы какое-то время занимались веб-разработкой, очень высока вероятность, что вы уже знаете, что это значит. Адаптивный дизайн - это просто метод разработки пользовательских интерфейсов, которые можно адаптировать к разным размерам экрана.
Что обычно приходит вам в голову, когда вы слышите об адаптивном дизайне?
Для большинства интерфейсных инженеров это, скорее всего, медиа-запросы CSS, который является одним из наиболее фундаментальных аспектов адаптивного дизайна.
Для некоторых других это может быть один из множества фреймворков CSS, например Bootstrap, Foundation, Bulma и т. Д. - поскольку практически все фреймворки CSS имеют встроенные утилиты адаптивного дизайна.
На самом деле, если вы когда-либо слышали о мобильном дизайне, значит, вы слышали о замаскированном адаптивном дизайне, потому что в этом вся суть.
Хотя мы не делаем акцент на подробном описании адаптивного дизайна, мы, тем не менее, рассмотрим медиа-запросы, поскольку это один из самых фундаментальных аспектов. адаптивного дизайна, а также концепцию, на которой основана эта статья.
Вот как выглядит типичный медиа-запрос.
Ура, наконец-то нам нужно написать код. Здесь мы просто определяем display стили для фиктивного .app-nav элемента в нашем приложении, который предназначен для отображения меню навигации для приложения.
Сначала мы устанавливаем исходные стили для отображения мобильной версии элемента навигации с классом .mobile и скрытия полной версии для более широких экранов.
Затем мы используем медиа-запрос, чтобы убедиться, что полная версия отображается для экранов с шириной области просмотра равной или шире 992px вместо мобильной версии.
Некоторые продвинутые CSS-фреймворки, такие как Bootstrap, даже позволяют достичь чего-то столь простого, используя встроенные адаптивные классы в разметке вашего приложения, без необходимости писать ни единой строчки CSS.
Например, с помощью Bootstrap 4 все, что нам нужно сделать для достижения того же эффекта, - это изменить нашу разметку, чтобы она выглядела как следующий фрагмент (CSS не требуется) .
Здесь мы используем некоторые из встроенных в Bootstrap адаптивных классов для достижения того же эффекта без написания CSS. Bootstrap использует концепцию точек останова для классификации размеров экрана на основе ширины области просмотра. Таким образом, большие экраны считаются экранами с шириной окна просмотра больше или равной (≥) 992px.
Конечным результатом является то, что наше меню навигации приложения может адаптироваться к разным размерам экрана и изменять его отображение по мере необходимости. Мы можем просто сказать наше меню навигации приложения адаптивное.
Отзывчивый рендеринг
В предыдущих примерах каждый элемент навигации приложения остается в DOM, даже если он не отображается. С React мы должны иметь возможность предотвратить рендеринг тех элементов, которые не должны отображаться. Я называю это адаптивным рендерингом.
Есть несколько пакетов, которые можно использовать для этого в React. Но в этой статье мы будем использовать пакет react-responsive.
Вот как может выглядеть наш предыдущий пример с использованием пакета react-responsive в нашем приложении React.
Здесь мы используем возможность тестирования медиа-запросов, предоставляемую пакетом react-responsive, для проверки текущей ширины области просмотра и визуализации только соответствующего меню навигации для нашего приложения - другие версии не отображаются вообще.
Параметр matches дочерней функции компонента MediaQuery имеет значение true, если ширина области просмотра составляет минимум 992px, в противном случае его значение равно false.
Конечным результатом этого отзывчивого рендеринга является то, что наше приложение React теперь отображает только соответствующую версию меню навигации на основе текущей ширины области просмотра.
Заключение
В этой статье мы смогли перейти от простого проектирования адаптивных интерфейсов с использованием базовых медиазапросов CSS и фреймворков CSS к отзывчивому реагированию с использованием пакета react-responsive для создания адаптивных компонентов React.
Несмотря на то, что мы старались быть очень упрощенными в этой статье, есть еще много более сложных вещей, которые вы можете сделать с react-responsive, используя сложные реквизиты медиа-запросов, соответствующие требованиям вашего приложения.
Я очень надеюсь, что эта статья оказалась для вас полезной. Удачного кодирования !!!
✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .
