How to build a responsive website with ReactJs [closed]

It all comes down to CSS. Regardless of whether you are using vanilla CSS, SCSS, LESS, or CSS-in-JS, you're wanting to target your components with CSS selectors that allow you to adapt to resolution changes.

Here's a basic example:

// ./foo.jsimport React from "react";import "./styles.css";// Either as a Classexport default class FooClass extends React.Component {  render() {    return <div className="foo">Foo</div>;  }}// Or as a functionexport default FooFunction = (props) => <div className="foo">Foo</div>;

And in your styles.css:

.foo {  background-color: red;  width: 100%;  margin: 0 auto;  /* Small Devices, Tablets */  @media only screen and (min-width : 768px) {    width: 75%;    background-color: green;  }  /* Medium Devices, Desktops */  @media only screen and (min-width : 992px) {    width: 50%;    background-color: pink;  }}

The styles above are applied in a mobile-first approach, meaning that the default class declaration is provided with how the element will look on the smallest screen targeted. Those mobile styles will be overridden by the subsequent media queries. Over the years, these "inline" media queries directly under the CSS class have become my favorite way to organize my responsive styles.

Here are some responsive design resources:

https://css-tricks.com/nine-basic-principles-responsive-web-design/

A comprehensive list of Media Queries