Адаптивный рендер в ReactJS для мобильных и ПК

Быстрый ответ

Чтобы распознать, с какого устройства открывается ваше приложение — с мобильного или с десктопа — в ReactJS, воспользуйтесь window.matchMedia. Вот пример кода:

const isMobile = window.matchMedia("(max-width: 768px)").matches;

Значение isMobile примет значение true для экранов шириной меньше 768px — это показатель мобильных устройств. Параметр max-width можно настроить согласно вашим требованиям к адаптивности. В дальнейшем isMobile позволит наладить поведение приложения в зависимости от размера экрана.

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

Динамический рендеринг с помощью хуков React

Свобода переключения при изменении размера окна

Настройте React-компоненты так, чтобы они были чувствительны к изменению размеров экрана. Это особенно важно, когда пользователи переворачивают свои мобильные устройства или изменяют размеры окна браузера на десктопе:

import React, { useState, useEffect } from 'react';

// Хук useDeviceDetect освободит вас от забот по определению типа устройства
const useDeviceDetect = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  useEffect(() => {
    // Отслеживаем изменение размера экрана здесь, моментально реагируя на любые его изменения
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    // Непременно удаляем обработчик, чтобы предотвратить утечку памяти
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return { isMobile };
};

export default useDeviceDetect;

Подробнее об этом расскажет наш спикер на видео

Компоненты, мгновенно адаптирующиеся к изменению размера экрана

Кастомный хук useDeviceDetect позволяет отслеживать изменение ширины устройства и динамически адаптировать рендеринг компонентов:

import React from 'react';
import useDeviceDetect from './useDeviceDetect';

// Мы ценим адаптивность наших компонентов, не меньше, чем наслаждаемся отличным кофе
const MyResponsiveComponent = () => {
  const { isMobile } = useDeviceDetect();

  return (
    <div>
      {
        // Выбираем между мобильным и десктопным компонентами в зависимости от типа устройства
        isMobile ? <MobileComponent /> : <DesktopComponent />
      }
    </div>
  );
};

export default MyResponsiveComponent;

Использование инструментов для точного определения устройства

Media queries с помощью "react-responsive"

Для более изящного контроля используйте библиотеку react-responsive, которая упрощает условный рендеринг на основе медиа-запросов, подобно CSS:

import { useMediaQuery } from 'react-responsive';

const MyComponent = () => {
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });

  // Условный рендеринг компонентов на основе данных, полученных от медиа-запросов
};

export default MyComponent;

Глубокое изучение устройств с помощью "React Device Detect"

Если вам нужна более подробная информация об устройстве, помимо размера экрана, полезной будет библиотека React Device Detect, предоставляющая сведения о системах, браузерах и других характеристиках:

import { BrowserView, MobileView } from 'react-device-detect';

// Разделяем мобильные устройства и десктопы...
const MyComponent = () => {
  return (
    <>
      <BrowserView>
        {/* Для десктопных пользователей тут размещен DesktopComponent */}
        <DesktopComponent />
      </BrowserView>
      <MobileView>
        {/* А здесь отобразится MobileComponent для мобильных пользователей */}
        <MobileComponent />
      </MobileView>
    </>
  );
};

export default MyComponent;

Компоненты типа BrowserView и MobileView из этой библиотеки повышают читабельность и структурированность кода.

Визуализация

Мы можем воспринимать использование ReactJS как выбор одной из двух дверей в зависимости от устройства: одной для мобильных пользователей, другой — для десктопов.

Вход в Заведение:
🚪📱: Мобильный пользователь выбирает узкий проход (Адаптивный дизайн)
vs.
🚪💻: Пользователь десктопа выбирает широкую дверь (Полноформатный дизайн)

ReactJS:
👨‍💼✨ Определение через User Agent или размер вьюпорта и выбор соответствующего "входа" (UI)

Главная идея: ReactJS, применяя User-Agent или размер вьюпорта, определяет, какой интерфейс подходит для пользователя.

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

Правильно настроенное приложение будет приветливо открыто для всех, радушно приглашая посетителей, как место с широко распахнутыми дверями.

Полезные материалы

1. Обнаружение браузера с помощью user agent – HTTP | MDN — изучите методы определения user-agent с помощью JavaScript.
2. Основы адаптивного веб-дизайна | web.dev — познакомьтесь с основными принципами создания адаптивного веб-дизайна.
3. react-responsive – npm — библиотека для React, предоставляющая медиа-запросы в качестве элемента разработки.
4. Адаптивный веб-дизайн медиа-запросы — углубите свои знания по использованию медиа-запросов CSS для создания адаптивных интерфейсов.
5. javascript – Распознавание мобильного браузера – Stack Overflow — обратите внимание на код для определения мобильных устройств.
6. Метод Window: matchMedia() – Веб-API | MDN — узнайте больше о window.matchMedia() для проверки медиа-запросов в JavaScript.
7. react-device-detect – npm — найдите подходящий инструмент для определения устройства в React-приложениях.