How I organize responsive with ReactJS 

The importance of responsive design

Nowadays to create a website or a web application we need to control and take care of a large number of screen sizes.

In common cases, the designer is in charge of creating beautiful designs that work in 1440px size, where we create the layout with a fixed size, then the problem arises when we look at that page in different screen sizes.

Responsive design planning (Planning of responsive design)

Plan from smaller screens and expand. What does this mean?

1. As the use of smartphones has increased a lot in recent years, the main focus should be on optimizing for smaller screen sizes. In most cases, the designer is in charge of creating beautiful designs that work in 1440px size, where we create the layout with a fixed size, then the problem arises when we look at that page in different screen sizes.

Not to mention the part of the larger screens as there are still a lot of computer users.

When we start working on a project we have to work with the principle “Mobile First” and look at the most common breakpoints.

Different libraries and frameworks

To simplify the work with responsiveness a considerable number of developers use various frameworks and libraries such as:

• Bootstrap
• Tailwind CSS
• Bulma CSS
• Pure CSS
• Semantic UI
• Ant Design

2.Use relative values to facilitate your work. When using relative values, we can significantly simplify our work and prevent excessive use of media queries. Using relative values also allows the browser to display content depending on the user’s zoom level.
3. Another very important point is the arrangement of photos to be responsive in different screen sizes, here enters the second point, the use of relative values to prevent the growth of photos more than their container.

If you need to use different photos for mobile and different photos for desktop, we can use the picture element together with srcset.

Ant Design

Ant Design is a react library with many easy-to-use components that are useful for building elegant interfaces. It was created by the world giant Alibaba and used by several large companies such as Binance, Alibaba, Tencent, etc.
The responsive ant design part uses the grid of 24 columns and through the special col element, we can control how many of those columns will extract that element.

The difference between the use of different frameworks and libraries is rather preferred by developers, but in principle, they all try to make our work a little easier. We prefer to use ant design for projects with React.js as it provides us with a large number of components.

volume_up
content_copy

share
star_border

Furthermore, ant design takes care with col properties for different screens by adding an array with special names xs, sm, md, lg, xl or xxl where these properties take care of screens with sizes from <576px and up to> 1600px.

If you want to know more about e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in ecommerce.