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

Question

[alex4answ]

Доброе утро, начинаю проект, тк в процессе обучения, хочу использовать подход 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 ?)

Какие есть варианты и подходы, подскажите кто сталкивался ?

Answer 1

[Егор Живагин]

Обычно в глобальное состояние (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" именно в композиции Реакт-компонентов, это просто ничего не даст. В стилях - да, но не в компонентах

Comments

[alex4answ]

Егор Живагин ,

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

есть некоторые компоненты, которые нужно рендерить только на десктопе и тп.

Понял вас, спасибо большое за ответ

[Егор Живагин]

alex4answ,

есть некоторые компоненты, которые нужно рендерить только на десктопе и тп.

это совсем не про Mobile First

[alex4answ]

Егор Живагин, Почему?

Нам просто на десктопе нужно отобразить какой-нибудь слайдер, а на мобилке он не нужен и тп

Answer 2

[Роман Дворянов]

Вам пригодится react-responsive, пожалуйста.