Mobile First в реакт, как организовать?

Доброе утро, начинаю проект, тк в процессе обучения, хочу использовать подход Mobile First, но не совсем понимаю как это организовать в React приложении.

Пару раз видел структуру, где компонент реализован для 3 утройств ( mobile, table, desktop ):
components
- myComponent
 - - desktop
 - - - block.js
 - - - block.css
 - - tablet
 - - - block.js
 - - - block.css
 - - mobile
 - - - block.js
 - - - block.css

Как это все собирать, как настроить, как разрабатывать mobile first с реактом ?

Я понимаю что Mobile First это скорее про дизайн, но как подгрузить/добавить компоненты на страницу для десктоп ? (условным рендером с проверкой window.width ?)

Какие есть варианты и подходы, подскажите кто сталкивался ?
  • Вопрос задан
  • 565 просмотров
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
little front
Обычно в глобальное состояние (redux, mobx или просто state основного компонента) записывается что-то типо:
// цифры условные
isDesktop: window.width > 1200,
isTablet: window.width <= 1200 && window.width > 768,
isMobile: window.width <= 768


В redux/mobx есть свои инструменты прокидывания таких данных в компоненты, если у вас нет стейт менеджера -- можно использовать React Context Api . Только не забудьте повестить слушатель на window resize и обновлять данные

В той структуре, которую вы скидывали, я ничего хорошего не вижу. Чтоб один блок настолько отличаался на мобиле/таблете/десктопе - это редкость, у вас будет просто дублирование кода. А собирается оно всё точно так же, как любая другая структура - webpack-ом

И, честно говоря, я не вижу никакого смылся применять "mobile first" именно в композиции Реакт-компонентов, это просто ничего не даст. В стилях - да, но не в компонентах
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы