How to build a responsive website with ReactJs [closed]

问题

I am a bit confused. Until now I was using bootstrap or jquery mobile to build my application both base on jQuery. I heard a lot about ReactJs and I would like to use it for my next application. I am searching for something like bootstrap but purely written with ReactJs and ready to use. But until now I didn't found anything really convenient. First I was thinking to use MaterializeCss but I quickly realize that it was base as well on jQuery. There is material-ui purely written with ReactJs but there is no CDN and it oblige me to use third tool to build your app javascript files. Finally I found muicss but this one seem to be in a very early stage.

So till now I didn't found the right lib to build my app with ReactJs. Do you have any suggestion?

回答1:

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.js
import React from "react";
import "./styles.css";

// Either as a Class
export default class FooClass extends React.Component {
  render() {
    return <div className="foo">Foo</div>;
  }
}

// Or as a function
export 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

来源：https://stackoverflow.com/questions/32742532/how-to-build-a-responsive-website-with-reactjs

标签

javascript

twitter-bootstrap

responsive-design

reactjs

material-design