Mobile First in react how to organize?

Question

React

Good morning, I'm starting a project, maybe in the process of learning, I want to use the Mobile First approach, but I don't quite understand how to organize it in a React application.

A couple of times I saw a structure where the component is implemented for 3 devices ( mobile, table, desktop ):

components

- myComponent
 - - desktop
 - - - block.js
 - - - block.css
 - - tablet
 - - - block.js
 - - - block.css
 - - mobile
 - - - block.js
 - - - block.css

How to collect all this, how to set it up, how to develop mobile first with react?

I understand that Mobile First is more about design, but how to load / add components to a desktop page? (conditional rendering with window.width check?)

What are the options and approaches, tell me who came across?

Answer 1

Usually, the global state (redux, mobx, or just the state of the main component) is written something like:

// цифры условные
isDesktop: window.width > 1200,
isTablet: window.width <= 1200 && window.width > 768,
isMobile: window.width <= 768

redux/mobx has its own tools for passing such data into components, if you don't have a state manager, you can use the React Context Api . Just do not forget to lead the listener to window resize and update the data
. In the structure that you threw off, I don’t see anything good. It is rare for one block to be so different on mobile/tablet/desktop, you will simply have code duplication. And it's all assembled in the same way as any other structure - webpack
And, frankly, I don't see any reason to use "mobile first" in the composition of React components, it just won't do anything. In styles yes, but not in components

Answer 2

You will need react-responsive , please.