web-dev-qa-db-ja.com

ReactJsでレスポンシブWebサイトを構築する方法

私は少し混乱しています。これまで、bootstrapまたはjquery mobileを使用して、jQueryの両方をベースにアプリケーションを構築していました。ReactJsについて多くのことを聞いたので、次のアプリケーションに使用したいと思います。 bootstrapしかし、ReactJsで書かれており、すぐに使用できます。しかし、今まで本当に便利なものは見つかりませんでした。最初はMaterializeCssを使用することを考えていましたが、 ReactJsのみで記述されたmaterial-uiがありますが、CDNはなく、3つ目のツールを使用してアプリのJavaScriptファイルを作成する必要があります。最後にmuicsを見つけましたが、これは非常に初期の段階にあるようです。

そのため、これまで、ReactJsでアプリをビルドするための適切なライブラリが見つかりませんでした。何か提案はありますか？

javascripttwitter-bootstrapresponsive-designreactjsmaterial-design
18
Alexandre

それはすべてCSSに帰着します。 Vanilla 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/

メディアクエリの包括的なリスト

25
robabby