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