Как создать отзывчивый веб-сайт с помощью ReactJs

Я немного смущен. До сих пор я использовал bootstrap или jquery mobile для создания моего приложения как базы на jQuery. Я много слышал о ReactJs, и я хотел бы использовать его для своего следующего приложения. Я ищу что-то вроде бутстрапа, но только написанное ReactJs и готовое к использованию. Но до сих пор я не нашел ничего действительно удобного. Сначала я думал использовать MaterializeCss, но я быстро понял, что он также был базовым для jQuery. Существует материал-ui, написанный исключительно с помощью ReactJs, но нет CDN, и он обязывает меня использовать третий инструмент для создания ваших файлов javascript приложения. Наконец, я нашел muicss, но этот, кажется, находится на очень ранней стадии.

Так до сих пор я не нашел нужную библиотеку для создания моего приложения с помощью ReactJs. Есть ли у вас какие-либо предложения?

ОТВЕТЫ

Ответ 1

Все сводится к CSS. Независимо от того, используете ли вы ванильный CSS, SCSS, LESS или CSS-in-JS, вы хотите нацеливать свои компоненты с помощью селекторов CSS, которые позволяют вам адаптироваться к изменениям разрешения.

Вот основной пример:

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

И в твоих 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;
  }
}

Приведенные выше стили применяются в подходе, ориентированном на мобильные устройства. Это означает, что в объявлении класса по умолчанию указывается, как будет выглядеть элемент на самом маленьком целевом экране. Эти мобильные стили будут переопределены последующими медиа-запросами. За эти годы эти "встроенные" медиа-запросы непосредственно в классе CSS стали моим любимым способом организации моих адаптивных стилей.

Вот некоторые адаптивные ресурсы дизайна:

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

Полный список медиазапросов