🖥 Адаптивный рендер в ReactJS для мобильных и ПК ⏩Чтобы распознать, с какого устройства открывается ваше приложение — с мобильного или с десктопа — в ReactJS, воспользуйтесь window.matchMedia: const isMobile = window.matchMedia("(max-width: 768px)").matches; Значение isMobile примет значение true для экранов шириной меньше 768px — это показатель мобильных устройств. Параметр max-width можно настроить согласно вашим требованиям к адаптивности. В дальнейшем isMobile позволит наладить поведение приложения в зависимости от размера экрана. ⏩Настройте 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; 📎 Читать подробнее @javascript_react