Источник: WebForMyself.com
В последнее время часто возникает потребность в быстром создании адаптивных веб-приложений, которые правильно отображаются на устройствах с различным разрешением экрана. Эта потребность обязывает разработчиков искать способы быстрого включения стилей в логику (функционал) приложения, давая им гибкость, позволяющую легко создавать веб-приложения, реагирующие на запросы, без написания CSS медиа-запросов.
В этом руководстве мы узнаем о react-responsive библиотеке и о том, как использовать ее с TypeScript в наших проектах. Мы также применим знания из этого руководства для создания простого адаптивного приложения-портфолио. Позвольте кратко объяснить некоторые знания о реальном значении реализации адаптивных веб-приложений.
Что такое адаптивный веб-дизайн?
Согласно MDN, отзывчивый веб-дизайн (RWD) — это подход к веб-дизайну, который позволяет веб-страницам хорошо отображаться на различных устройствах и размерах окон или экранов от минимального до максимального размера отображения. Последние исследования также рассматривают близость зрителя к части контекста просмотра как расширение для RWD. Контент, дизайн и производительность необходимы на всех устройствах, чтобы обеспечить удобство использования.
Реализация RWD в веб-приложениях дает таким приложениям возможность легко настраиваться и адаптироваться к постоянному изменению размеров экрана на устройствах. Создание приложений, которые являются адгезивными RWD, означает, что это веб-приложение имеет плавные и пропорциональные сетки, гибкие изображения и медиа-запросы CSS3, являющиеся расширением правила @media. В этом руководстве мы сосредоточимся на части медиа-запросов при реализации RWD в веб-приложении.
Что такое React-response?
React-responsive — это модуль медиа-запросов, который предоставляет медиа-запросы CSS в качестве компонента или хука для адаптивного веб-дизайна. Это очень полезно для рендеринга или удаления определенных стилизованных элементов в DOM — реструктуризировать DOM с точки зрения стилей CSS / Sass, в зависимости от разрешения / размера экрана.
Использование react-responseive в наших проектах означает, что мы можем легко разделить контент, который хотим отображать, без написания для него каких-либо дополнительных стилей. Эти стили обрабатываются под капотом, предоставляя нам компонент или интерфейс хука, который мы можем использовать для установки значений max-width или min-width. Эти значения определяют, на каких размерах экрана содержимое будет отображаться или скрываться.
React-response или стилизованные компоненты
Прежде чем мы проведем сравнение между этими инструментами, стоит отметить, что в то время как react-responsive был сделан для брейкпоинтов с помощью пользовательских компонентов, стилизованные компоненты были сосредоточены на создании компонентов с пользовательскими стилями CSS. Это означает, что эти два инструмента можно объединить вместе, чтобы добавить на веб-страницу больше возможностей CSS. В то время как react-responsive больше фокусируются на инкапсуляции в качестве брейкпоинтов, стилизованные компоненты сосредоточены на добавлении большего количества стилей CSS через пользовательские компоненты.
Повышение качества ваших стилизованных компонентов потребует обработки медиа-запросов с помощью react-responsive, как показано ниже:
Выше представлен возможный код объединения двух библиотек для создания более отзывчивых веб-приложений. При размерах экрана в пределах минимальной ширины 1040 пикселей дочерние компоненты, то есть <StyledComponents {… props}>, будут отображаться на экране. Та же концепция применяется и ко второму компоненту <ReactResponsive breakpoint = {786}>.
Реализация React-responsive
В следующих частях этого руководства мы обсудим и исследуем реализацию React-responseive как в качестве хука, так и в качестве компонента. Мы также объединим эти два подхода вместе, таким образом, рассмотрим любую возможную реализацию react-responsive, которую вам необходимо знать, прежде чем создавать хорошо адаптивное приложение. Давайте начнем с настройки react-responsive в качестве хука в проекте React:
Используя хук useMediaQuery, предоставляемый react-responsive, мы смогли создать логику брейкпоинта в нашем коде. Компоненты, прошедшие валидацию isDesktop, будут отображаться только на экранах с областью просмотра больше 1224 пикселей. В то время как isTablet и isMobile будут отображать компоненты на экранах с областью просмотра до 1224 пикселей и 786 пикселей соответственно.
Далее, настроим react-responsive как компонентный интерфейс:
Приведенный выше фрагмент кода дает нам представление о том, как мы можем использовать компонент MediaQuery, а затем передать брейкпоинт в качестве props в компонент. Также в <MediaQuery minResolution = «2dppx»> мы использовали функцию (render prop) в качестве дочернего элемента для программного выбора дочерних свойств компонента.
Последняя концепция перед тем, как мы реализуем React-responseive в нашем проекте портфолио, заключается в том, как инициировать событие с помощью свойства onChange в компоненте MediaQuery или в качестве обратного вызова в нашем хуке useMediaQuery.
В приведенном выше коде мы присоединяем функцию обратного вызова handleMediaQueryChange к хуку useMediaQuery для обработки события onChange, которое возникает при изменении ширины окна просмотра браузера на 1224 пикселей. Это также относится к компоненту MediaQuery, где функция handleMediaQueryChange выполняется свойством onChange компонента.
Реализация React-responsive с TypeScript
В этом проекте мы будем использовать Styled-components библиотеку для применения основных стилей к пользовательским компонентам. Затем мы воспользуемся React-responseive библиотекой, чтобы добавить медиа-запросы для брейкпоинтов. Давайте клонируем наш проект из GitHub в папку портфолио с помощью следующей команды, затем переместим каталог в эту папку и установим все необходимые зависимости.
Запустим проект с помощью команды yarn start в терминале, а в браузере перейдем по адресу localhost:3000 /experience, чтобы познакомится с текущим интерфейсом перед реализацией нашего медиа-запроса.
Теперь давайте начнем с простейшей реализации react-responsive, определив, какой контент отображается в окнах просмотра на десктопе и на мобильных устройствах.
Мы обновили наше приложение, чтобы отображать элемент h1 только в мобильном представлении, в то время как список карточек для проектов, то есть компонент <Project />, отображается только в области просмотра больше 1224 пикселей.
Затем давайте обновим компонент Card в файле src/experience/Project.tsx. Сделаем содержимое пользовательского компонента Glass видимым только в области просмотра десктопа.
Наш обновленный интерфейс при просмотре на экране десктопа будет выглядеть так, как показано ниже:
Теперь давайте реализуем событие onChange в нашем приложении, чтобы оно всегда срабатывало при входе в отдельное окно просмотра.
Приведенный выше фрагмент вызовет функцию window.alert для отображения предупреждения в браузере всякий раз, когда мы изменяем ширину нашего браузера до 1224 пикселей.
Заключение
Построение с помощью React-responseive дает возможность использовать его вместе с другими библиотеками, ориентированными на CSS, для создания адаптивных веб-страниц. Мы можем расширить знания из этого руководства, чтобы быстро построить сетку для экранов разных размеров. Также мы можем разделить компоненты нашего приложения на модули для отображения в зависимости от того, в каком окне просмотра мы их установили. Кроме того, различные интерфейсы поддержки, предоставляемые React-responseive, варьируются от сверхбольших экранов до экранов умных часов, что делает React-responseive хорошей библиотекой для создания дизайна пользовательского интерфейса для небольших экранов от начала и до конца без написания каких-либо медиа-запросов CSS. Вот ссылка на GitHub для загрузки кода, используемого для нашего проекта.
Источник: blog.openreplay.com
#react #reactjs #javascript