web-dev-qa-db-fra.com

Comment créer un site Web réactif avec ReactJs

Je suis un peu confus. Jusqu'à présent, j'utilisais bootstrap ou jquery mobile pour construire mon application à la fois sur jQuery. J'ai beaucoup entendu parler de ReactJs et j'aimerais l'utiliser pour ma prochaine application. Je cherche quelque chose comme bootstrap mais purement écrit avec ReactJs et prêt à l'emploi. Mais jusqu'à présent, je ne trouvais rien de vraiment pratique. Au début, je pensais utiliser MaterialiseCss mais je me suis vite rendu compte que c'était aussi une base sur jQuery. Il y a du matériel-ui purement écrit avec ReactJs mais il n'y a pas de CDN et cela m'oblige à utiliser un troisième outil pour construire les fichiers javascript de votre application. Enfin j'ai trouvé des muics mais celui-ci semble être à un stade très précoce.

Donc, jusqu'à présent, je n'ai pas trouvé la bonne bibliothèque pour créer mon application avec ReactJs. Avez-vous une suggestion?

javascripttwitter-bootstrapresponsive-designreactjsmaterial-design
18
Alexandre

Tout se résume à CSS. Que vous utilisiez Vanilla CSS, SCSS, LESS ou CSS-in-JS, vous souhaitez cibler vos composants avec des sélecteurs CSS qui vous permettent de vous adapter aux changements de résolution.

Voici un exemple de base:

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

Et dans votre 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;
  }
}

Les styles ci-dessus sont appliqués dans une approche mobile-first, ce qui signifie que la déclaration de classe par défaut est fournie avec l'aspect de l'élément sur le plus petit écran ciblé. Ces styles mobiles seront remplacés par les requêtes multimédias suivantes. Au fil des ans, ces requêtes multimédias "en ligne" directement sous la classe CSS sont devenues ma façon préférée d'organiser mes styles réactifs.

Voici quelques ressources de conception réactives:

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

ne liste complète des requêtes multimédias

25
robabby