it-swarm.com.de

Wie erstelle ich eine responsive Website mit ReactJs?

Ich bin etwas verwirrt. Bisher habe ich bootstrap oder jquery mobile verwendet, um meine Anwendung auf der Basis von jQuery zu erstellen. Ich habe viel über ReactJs gehört und möchte sie für meine nächste Anwendung verwenden. Ich suche nach etwas Wie bootstrap, aber rein mit ReactJs geschrieben und einsatzbereit. Aber bis jetzt habe ich nichts wirklich Praktisches gefunden. Zuerst habe ich überlegt, MaterializeCss zu verwenden, aber ich habe schnell gemerkt, dass es auch eine Basis ist Es gibt Material-ui, das nur mit ReactJs geschrieben wurde, aber es gibt kein CDN, und es verpflichtet mich, ein drittes Tool zum Erstellen Ihrer App-Javascript-Dateien zu verwenden. Schließlich habe ich muicss gefunden, aber dieses scheint sich in einem sehr frühen Stadium zu befinden.

Also habe ich bis jetzt nicht die richtige Bibliothek gefunden, um meine App mit ReactJs zu erstellen. Hast du irgendwelche Vorschläge?

18
Alexandre

Auf CSS kommt es an. Unabhängig davon, ob Sie Vanilla CSS, SCSS, LESS oder CSS-in-JS verwenden, möchten Sie Ihre Komponenten mit CSS-Selektoren ausrichten, mit denen Sie sich an Änderungen der Auflösung anpassen können.

Hier ist ein einfaches Beispiel:

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

Und in Ihrer 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;
  }
}

Die oben genannten Stile werden in einem Mobile-First-Ansatz angewendet. Dies bedeutet, dass in der Standardklassendeklaration angegeben ist, wie das Element auf dem kleinsten Zielbildschirm angezeigt wird. Diese Mobilstile werden von den nachfolgenden Medienabfragen überschrieben. Im Laufe der Jahre haben sich diese "Inline" -Medienabfragen direkt unter der CSS-Klasse zu meiner bevorzugten Methode entwickelt, um meine Reaktionsstile zu organisieren.

Hier sind einige reaktionsschnelle Designressourcen:

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

Eine umfassende Liste von Medienabfragen

25
robabby