如何使用ReactJs构建响应式网站

Question

我有点困惑.到目前为止,我使用bootstrap或jquery mobile来构建基于jQuery的应用程序.我听说过很多关于ReactJs的内容,我想将它用于我的下一个应用程序.我正在寻找类似bootstrap的东西,但纯粹用ReactJs编写并准备使用.但直到现在我才发现任何真正方便的东西.首先我想使用MaterialiseCss,但我很快意识到它在jQuery上也是基础.有材料-ui纯粹用ReactJs编写,但没有CDN,它迫使我使用第三个工具来构建你的应用程序javascript文件.最后我找到了muicss,但这个似乎还处于早期阶段.

所以直到现在我还没有找到合适的lib来用ReactJs构建我的应用程序.你有什么建议吗？

Answer 1

只需花点时间了解Google,我找到了一些新的框架和库,可以让您为React应用程序制作更加集成的响应式实现:

https://github.com/contra/react-responsive

https://react-bootstrap.github.io/

反应引导的一个例子:

// ./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>;

但实际上,它只是归结为CSS.您可以随意命名您的组件__CODE__,例如__CODE__.然后用你的风格定位foo,你就可以实现你需要的任何东西.

.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;
  }
}

以下是一些响应式设计资源:

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

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/