Design a Responsive Website Using ReactJs for all platform

React.js is undoubtedly a magical tool to create interactive UIs, but before the existence of React, there were other tools that developers frequently used to create truly responsive applications.

In the past, before frameworks like Bootstrap and Tailwind CSS were available, developers of both CSS and frontends relied on a form of ancient arcane magic known as Media Queries to craft applications that would adapt to any screen size.

Frontend developers understood that mastery of media queries was essential to ensuring that their creations would look great on a wide variety of devices, from smartphones and tablets to desktop computers and other platforms.

So, today we will learn to use this tool, which is now popular as the react-responsive package found on npm.

What is react-responsive?

Before proceeding, it is critical for a beginner to understand what "react-responsive" means. Using this npm package, you can make your React app exceptionally responsive. It leverages the efficacy of media queries and breakpoints to define DOM elements the developer wishes to display or conceal. As a React developer, it's a potent addition to your arsenal.

If you like mobile-first or responsive designs, or if you want your app to scale up and down based on screen size, react-responsive is for you.

Create a Responsive Website Using ReactJs:

To begin, let's create a fresh React project from scratch with no external dependencies. Using the command npm i -S react-responsive, we'll install the necessary package.

React-responsive can be used with Hooks or components. Now go to app.js and import package using the below command import { useMediaQuery } from 'react-responsive'

Define media queries

Initially, we have to define media queries in the app.js function using the following codes:

const isMobileDevice = useMediaQuery({     query: "(min-device-width: 480px)",   });   const isTabletDevice = useMediaQuery({     query: "(min-device-width: 768px)",   });   const isLaptop = useMediaQuery({     query: "(min-device-width: 1024px)",   });   const isDesktop = useMediaQuery({     query: "(min-device-width: 1200px)",   });   const isBigScreen = useMediaQuery({     query: "(min-device-width: 1201px )",   });

Here, we're making use of media queries to only display content suitable for a given screen size. Furthermore, the device prop in react-responsive allows us to compel content to scale to any screen resolution.

Using the keys provided (such as orientation, scan, aspectRatio, deviceAspectRatio, height, etc.), you can create a device simulator to conduct tests in settings where the real thing would not work.

After that, we will create a folder in src with the name “components”. Create five new folders with names: big-screen, desktop, laptop, mobile, and tablet-mobile.

There will be a component.jsx and a styles.css file in each of these directories.

// big-screen.component.jsx import React from 'react' import './big-screen.styles.css' export const BigScreen = () => {     return (         <div className="big-screen">             <p>Whoops! I'm in big screen mode.</p>             <p>This is the base of the pyramid</p>         </div>     ) }

// big-screen.styles.css .big-screen {   width: 600px;   height: 100px;   background: #7c52bf;   margin: 0 auto;   } .big-screen p {   padding-top: 2%; }

// desktop.component.jsx import React from 'react' import './desktop.styles.css' export const Desktop = () => {     return (         <div className="desktop">             <p>Whoops! I'm in desktop mode.</p>             <p>But if you see anything below me, i am now in Laptop mode</p>         </div>     ) }

// desktop.styles.css .desktop {   width: 400px;   height: 100px;   background: #b097d8;   margin: 0 auto; } .desktop p {   padding-top: 2%; }

// laptop.component.jsx import React from 'react' import './laptop.styles.css' export const Laptop = () => {     return (         <div className="laptop">             <p>Whoops! I'm in laptop mode.</p>             <p>But if you see anything below me, i am now in Big Screen mode</p>         </div>     ) }

// laptop.styles.css .laptop {     width: 500px;     height: 100px;     background: #9674cb;     margin: 0 auto;   } .laptop p {   padding-top: 2%;   }

// tablet-mobile.component.jsx import React from "react"; import "./tablet-mobile.styles.css"; export const TabletMobile = () => {   return (     <div className="tablet-mobile">       <p>Whoops! I'm in tablet-mobile mode.</p>       <p>But if you see anything below me, i am now in Desktop mode</p>     </div>   ); };

// tablet-mobile.styles.css .tablet-mobile {     width: 300px;     height: 100px;     background: #cab9e5;     margin: 0 auto; } .tablet-mobile p {     padding-top: 2%; }

// mobile.component.jsx import React from 'react' import './mobile.styles.css' export const Mobile = () => {     return (         <div className="mobile">             {/* <p>Whoops! I'm in mobile mode.</p> */}         </div>     ) }

// mobile.styles.css .mobile {     width: 80px;     height: 80px;     margin: 0% auto;     border-radius: 50%;8     box-shadow: 15px 15px 0 0 #e4dcf2; }

If you look at the aforementioned files, you'll see that we simply made a new component for each screen resolution so that when you switch resolutions, our pyramid automatically adapts to the new dimensions.

You can check out the live version of the app or my GitHub repo to see how everything is put together.

Now, let’s go back to app.js and place the below code in the return statement:

<h1>React Responsive - a guide</h1>       {isMobileDevice && <Mobile />}   {isTabletDevice && <>   <TabletMobile />   {isDesktop && <Desktop />}   {isLaptop && <Laptop />}   {isBigScreen && <BigScreen />} </>}

Now, we have to use statements to define the size and the content. This can be done in a number of ways, including using components to handle breakpoints defined in app.js methods.

Import the component MediaQuery by import MediaQuery from react-responsive and use it in components:

<MediaQuery minDeviceWidth={1224}>   <p>Manipulate me with the powers of React Responsive</p> </MediaQuery>

Testing react-responsive within your application

Hurray! We have successfully created a responsive app in React.

Now it's time to test the app that we have designed using the above code.

Launch the developer tools in your browser and toggle the viewport to responsive. Then, scale it up or down as necessary to achieve a pyramidal shape.

Final thoughts: 

The React.Js framework is a great tool for creating responsive websites that are suitable for all platforms. In this article, we have learned to create a completely responsive app using React. React offers a component-based approach to web development and makes it easy for React developers to customize and reuse code. It also has a great community of developers who can help you learn and debug any issues you may encounter. Overall, ReactJs is an excellent choice for building responsive websites that are easy to use and maintain. Readers can try out the above code yourself to create a responsive app.