React Responsive design

Question

I'm currently working on a React app. I consider to use bootstrap to design responsive app.

I wonder if I should use pure bootstrap library or use react-bootstrap.

And there are some libraries similar to react-bootstrap like react-grid-layout or react-responsive.

So what is the best library for design responsive app? Thank you!

Answer 1

There exists no perfect library for creating a responsive app. Normally the only way to achieve excellence is by dedicating a time and smart styling.

I normally recommend using flexbox instead of a 3rd party framework. It is a good place to start to achieve responsive apps, it is vanilla CSS which also works on react-native.

In case you still want to take advantage of one of those libraries, just use the one you feel more comfortable with. I have used bootstrap v3 and v4. If using React, go for react-bootstrap so you don't need jQuery as well, and save a lot of verbosity. It has a lot of community and expertise out there, so it would be a reasonable choice for any mid-term or longer project.

Hope it helps.

Answer 2

If you want to have responsive design in react

First: you should install responsive react with this command on Linux

npm install responsive-react --save

Tip: react-responsive and responsive react are 2 different package

Second: for a responsive design you should set a position for every width such a mobile tablet laptop or..... Separately

this is my example index.js file

import React from "react";
import ReactDOM from "react-dom";
import {
  Responsive,
  isMobileDevice,
  isTabletDevice,
  isLaptopDevice
} from "responsive-react";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Responsive displayIn={["mobile"]}>
      <form className="s">
          <label htmlFor="username">Username:</label>
          <br />
          <input type="text" id="username" name="username" />
          <br />
          <label htmlFor="pwd">Password:</label>
          <br />
          <input type="password" id="pwd" name="pwd" />
          <br />
          <br />
          <input type="submit" defaultValue="Submit" />
        </form>      </Responsive>
      <Responsive displayIn={["tablet"]}>
      <form className="r">
          <label htmlFor="username">Username:</label>
          <br />
          <input type="text" id="username" name="username" />
          <br />
          <label htmlFor="pwd">Password:</label>
          <br />
          <input type="password" id="pwd" name="pwd" />
          <br />
          <br />
          <input type="submit" defaultValue="Submit" />
        </form> 
      </Responsive>
      <Responsive displayIn={["laptop"]}>
      <form className="t">
          <label htmlFor="username">Username:</label>
          <br />
          <input type="text" id="username" name="username" />
          <br />
          <label htmlFor="pwd">Password:</label>
          <br />
          <input type="password" id="pwd" name="pwd" />
          <br />
          <br />
          <input type="submit" defaultValue="Submit" />
        </form> 
      </Responsive>

      {/* This function works on load */}

    </div>
  );
}

ReactDOM.render(<Test />, document.getElementById('root'));

This is my example styles.css file

.App {
  font-family: sans-serif;
  text-align: center;
}
.s {
  position: relative;
    top: 150px;
  left: 350px;
}
.r {
  position: relative;
  top: 50px;
left: 150px;
}
.t {
  position: relative;
  top: 250px;
left: 20px;
}

In this example, I call form 3 times for every breakpoint that I set for the special width of devices for each device (laptop, tablet, and mobile)

Each breakpoint describe in responsive react and we use these breakpoints or (special width) with this (<Responsive displayIn={["tablet"]}> or <Responsive displayIn={["mobile"]}> we call form 3 times in each breakpoint or describe the width. Then we specify classname to the form and position it each time for each width or breakpoint that way you can specify how you want it to look.

thats it.

now when you change the width of your browser screen or (open it on phone or laptop or tablet ) the form Appears in the positions that you described for each device.