Apprenez les étapes de base pour configurer une application React avec Flexbox et rendre votre présentation réactive.

Pour pouvoir réellement aller de l'avant avec toute application React au-delà du niveau de composant individuel, vous avez besoin d'un calque extérieur fournissant des styles facilitant la tâche. vous mettez en page votre site. Mais contrairement à ce que d’autres pensent, il n’est pas difficile d’utiliser des CSS élémentaires et quelques packages de Composants React pour nous aider à atteindre des niveaux de réactivité de base dans une application.

Notre objectif sera de créer une page Web. cela change à plusieurs points de rupture et change la façon dont nous affichons notre contenu sur la page, comme dans l'image ci-dessous:

Vous voudrez souvent la liberté de ne pas être lié à un cadre tel que Bootstrap ou Material, vous voulez le faire rouler vous-même, mais vous ne voulez pas non plus réinventer la roue. Dans ce didacticiel, nous allons utiliser Flexbox, des requêtes de base sur les médias pour créer des points de rupture déterminant le rendu de notre présentation.

J'ai un composant de menu KendoReact que je sais que je souhaite utiliser. Il devra basculer entre les modes vertical et horizontal pour que je puisse l’utiliser de la manière que j’envisage. Pour les appareils mobiles, je souhaite que mon composant de menu apparaisse horizontalement (de gauche à droite) en haut de la page, comme une barre de menus située dans le haut de la navigation, mais sur tablette et bureau, je souhaite que le menu soit vertical (de haut en bas). dans la partie gauche de la page.

Dans un premier temps, nous commencerons par un seul point d'arrêt, puis par la suite, nous en ajouterons un autre. Je vais commencer par une démo de StackBlitz déjà installée, juste pour ne pas avoir à passer en revue toute la configuration de React. Nous voulons nous concentrer uniquement sur la construction de notre application, pas sur sa configuration. Si vous voulez suivre en codant, vous pouvez lancer cette première démo de StackBlitz, sinon, continuez à lire en sachant que vous pouvez saisir n'importe quel exemple de StackBlitz que je fournis tout au long du cours (il y en a quatre) pour jouer avec le code. Chaque démo de StackBlitz contiendra le produit final de toutes les étapes dont nous avons parlé jusqu'à ce point.

Les démos ont quelques dépendances. Il y a react-media-hook que nous utilisons pour suivre un point d'arrêt unique. Nous utilisons react-responsive-image pour restituer les images à l’aide de la balise picture à différentes résolutions. J'utiliserai également le KendoReact Menu comme mentionné précédemment, qui comporte un mode horizontal et vertical que nous pouvons basculer lorsque nous atteignons notre point d'arrêt de taille petite à moyenne.

Jetez un coup d'œil à la démo de StackBlitz ci-dessous, et ensuite nous pourrons parler de ce qui se passe ensuite.

Le point de départ de notre tutoriel

Donc, avec ce premier exemple dans StackBlitz, nous avons déjà beaucoup de choses à faire. Nous utilisons un thème de kendo pour le menu (ceci est normal si vous prévoyez de travailler avec la suite de composants, mais comprenez simplement que seuls les composants KendoReact que nous ajoutons seront stylisés). Nous avons également un fichier custom.css qui correspond exactement à ce qu'il est écrit, à savoir les styles personnalisés. Pour l'instant, nous avons juste quelques styles globaux pour notre conteneur d'applications, les styles .navbar et .main seront utilisés spécifiquement pour la navigation et notre contenu principal. Enfin, nous avons une classe site-container qui agira comme un conteneur Flexbox et définira la direction à suivre pour les éléments qu’elle contient. Avec ce concept dans Flexbox, nous allons créer une présentation de base que nous pourrons facilement modifier en fonction des points d'arrêt définis plus tard.

Si vous êtes nouveau sur Flexbox, je vous suggère Un guide de Flexbox un article de Astuces CSS, pour expliquer les bases de Flexbox. Sinon, continuez!

Commençons par le fichier main.js . L'objectif principal de ce fichier est de charger le composant App shell ou App, un composant fonctionnel nommé App .

Si nous nous concentrons ensuite sur la méthode de rendu du composant App nous verrons que nous avons une disposition très basique de deux div encapsulés dans un conteneur div. Cette configuration permet de tirer parti de Flexbox pour la présentation principale.

Avec Flexbox, nous pouvons avoir un div conteneur et deux div à l’intérieur. La classe conteneur a besoin de quelques règles de classe lui indiquant d’afficher son contenu interne en tant que Flexbox. Nous préciserons que la direction sera colonne .

 .container {
  affichage: flex;
  direction de flexion: colonne;
}

Pensez à deux boîtes empilées l'une sur l'autre. S'ils sont parfaitement carrés, ils continueront d'empiler et de créer une colonne plus longue à mesure que vous en ajouterez d'autres. Les éléments seront posés les uns sur les autres (empilés comme une colonne).

Nous appliquerons ce modèle à notre exemple, mais nous souhaitons uniquement deux éléments conteneur. L'une sera notre navigation supérieure et nous limiterons sa hauteur, et l'autre sera notre zone de contenu.

La voici, avec la barre de navigation en haut et une zone de contenu en bas. Cette disposition est assez facile à réaliser avec Flexbox et aucune requête multimédia.

Mais j'aimerais que ma barre de navigation passe d'une barre supérieure à une barre latérale lorsque je frappe une largeur spécifique (415 pixels). Ce n'est pas un standard ou quoi que ce soit, mais je pense que la plupart des appareils qui atteignent ce chiffre ou plus ne sont pas un téléphone portable. Le plus gros problème consiste à configurer quelques points d'arrêt afin de pouvoir tester votre mise en page – les points d'arrêt peuvent toujours être modifiés.

Pour voir un changement lorsque nous atteignons 415 pixels, nous devons activer une requête multimédia. cela se fait en répondant à ses exigences. Prenez le CSS suivant:

 @media screen et (min-width: 415px) {
  .site-container {
    direction de flexion: rangée;
  }
}

Il s'agit d'une ligne de code CSS, mais ce dernier modifie notre conteneur Flexbox pour afficher son contenu sous forme de lignes. Voyons à quoi cela ressemble maintenant.

Ce n'est pas exactement ce que nous voulions, mais nous allons déjà quelque part. En modifiant la direction de notre direction de flexion en rangée, nous affichons maintenant les éléments du conteneur côte à côte, ce qui correspond à l'effet recherché. Mais je veux que la colonne de menu de gauche ne fasse que 120 pixels de large et que la zone de contenu principale ne contienne que "Hello World", mais que le reste de la largeur du navigateur soit utilisé.

Heureusement, avec Flexbox, c'est très simple. Nous pouvons ajouter le code suivant à la requête multimédia et ces règles entreront en vigueur une fois que nous aurons atteint ce point d'arrêt à 415 pixels.

 .site-container> * {
  flex: 1;
}

Ce flex: 1 est un peu déroutant, je le sais. En fait, je recommande quelques lectures sur cette partie de Flexbox, car ce n'est pas très intuitif de voir simplement cette ligne de code. Vous voyez, flex: 1 est en réalité un raccourci pour flex: 1 1 ce que je vais utiliser pour que la règle soit aussi descriptive que possible.

Une brève explication de la propriété flex est que, lorsque vous dites flex: 1,
ou flex: 1 1 0; vous définissez les paramètres suivants: properties:

flex-grow: 1; Grandir dans les mêmes proportions que la taille de la fenêtre

flex-shrink: 1; Diminuer dans la même proportion que les dimensions de la fenêtre

flex-base: 0; Si 2 divs sont présents, chaque div va prendre 50%.

Je vais aussi ajouter les préfixes CSS webkit-flex pour différents navigateurs dans les démos de StackBlitz pour faire bonne mesure. Je les montre ci-dessous une fois, mais dans le reste des exemples de cet article, je les omettrai pour des raisons de concision.

 .site-container> * {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}

Maintenant que notre div de contenu principal occupe le plus d'espace possible, si nous ajoutons quelques propriétés comme la largeur et la hauteur au div de barre de navigation, nous le contraindrons et notre div de contenu principale sera obligée de faire la différence. Nous pouvons ajouter le code CSS suivant à la requête du média:

 .navbar {
  rembourrage en haut: 0.75em;
  largeur maximale: 120px;
  hauteur min .: 100vh;
}

C'est génial. Sur la base d’une requête des médias, nous avons créé la disposition de nos deux sections dans une direction de flexion différente. Mais notre composant KendoReact MenuWrapper a besoin d'une copie de la requête multimédia en cours pour pouvoir décider d'afficher le menu horizontalement comme il le fait par défaut ou de l'afficher verticalement lorsqu'il dépasse la limite de 415 pixels. Vous pouvez voir la documentation du composant menu et du mode vertical .

Pour ce faire, nous allons créer un crochet à l'intérieur du main.js ou plus précisément du composant App et nous importerons de la base de données (MediaPredicate ). paquet réagit-crochet-support . Il s'agit d'un crochet React populaire qui, en un sens, crée un abonnement à la requête multimédia que notre composant écoutera en permanence pour connaître les modifications. Nous pouvons le définir sur une constante et l'insérer dans le MenuWrapper en guise d'accessoire, nous l'appellerons isMediumPlus car ce sera vrai s'il dépasse 415 pixels et ce sera faux. s'il fait moins de 415 pixels.

Pour cela, nous devons importer le package:

 import {useMediaPredicate} de 'react-media-hook';

Juste à l'intérieur du composant App nous allons définir la constante et lui attribuer un nom décrivant son activité:

 const checkIfMediumPlus = useMediaPredicate (
  '(min-width: 415px)'
)

L'argument de la méthode useMediaPredicate () est la règle que nous souhaitons vérifier. Si le navigateur a une largeur minimale d'au moins 415 pixels, la valeur renvoyée est true sinon false . Nous pouvons ensuite passer cette propriété dans le composant en tant que support:

Maintenant, il ne nous reste plus qu'à entrer dans le fichier MenuWrapper et à ajouter le support isMediumPlus à la composante fonctionnelle. Pour ajouter l'accessoire, il suffit d'ajouter un paramètre au composant fonctionnel. Nous souhaitons également remplacer la valeur transmise au composant

lui-même. Ainsi, au lieu d'être false, nous passons l'accessoire in.

 const MenuWrapper = ({isMediumPlus}) => {
  revenir (
    

      
    
  );
}

Nous disposons enfin de tout ce dont nous avons besoin pour pouvoir passer du point de rupture faible à moyen. Lorsque nous dépassons cette limite de 415 pixels de large, nous redistribuons les éléments flexibles et plaçons le menu en position verticale de manière à ce qu'il s'intègre dans l'affichage sidenav en pile verticale.

Sur une note intéressante, si vous avez inspecté le menu KendoReact. Dans les outils de développement, vous remarquerez qu’il utilise également Flexbox pour positionner ses menus et ses boutons.

Voici la démo de StackBlitz qui montre les progrès réalisés:

Dans la section suivante, nous ajouterons quelques images à notre zone de contenu et afficher des images différentes sur des largeurs de navigateur petites (mobiles) vs moyennes. Si le site est chargé sur un mobile, il ne restituera que la plus petite image, mais s'il est chargé sur un support moyen ou supérieur (415 pixels plus), il générera une image différente en tant que source.

En utilisant les balises et srcSet nous pouvons créer une expérience plus réactive et ne servir que l'image dont nous avons besoin à une taille particulière. Ce qui est important pour moi, c'est de répondre à quelques questions:

Comment puis-je fournir des images de haute qualité?
Comment puis-je m'assurer que les bits inutiles ne sont pas téléchargés?

Ainsi, lorsque vous utilisez du HTML simple, utiliser la balise picture est assez simple. En revanche, dans React, je préfère travailler avec un paquet nommé react-responsive-image qui nous donnera un composant intéressant qui facilitera l'utilisation de l'élément encore plus facilement!

Après une installation rapide de react-responsive-image nous allons effectivement rendre une image juste au-dessus du texte qui dit "Hello World". Pour notre démo, puisque nous intégrons le contenu de navbar et notre zone de contenu principale dans le même fichier, nous allons simplement ajouter notre composant image réactif directement à la page App.js .

Voici deux images que je veux montrer. Celui étiqueté petit sera affiché pour les tailles de 0 à 414 pixels. Celui étiqueté «moyen en haut» sera affiché sur tout ce qui dépasse 415 pixels.

Petit ( https://i.imgur.com/OxjKMBr.png )

Moyen-haut ([19459017)] https://i.imgur.com/sgz5R9d.png )

Nous devons d'abord importer les composants ResponsiveImage et ResponsiveImageSize ces informations figurent sur la première page de react-responsive-image Page GitHub. Créez une constante pour chaque taille:

 import {ResponsiveImage, ResponsiveImageSize} à partir de 'react-responsive-image';
...
const small = 'https://i.imgur.com/OxjKMBr.png';
const medium = 'https://i.imgur.com/sgz5R9d.png';

const App = () => {
...

La manière dont nous combinons ces deux composants est qu'un composant ResponsiveImage aura plusieurs composants ResponsiveImageSize imbriqués à l'intérieur. Chaque ResponsiveImageSize représente une image différente que vous souhaitez afficher à une résolution différente. Comme je l'ai dit, je veux seulement penser à deux images différentes pour le moment. Celui qui affiche sur petit et un sur moyen. Vous trouverez ci-dessous le code qui permettra de casser les 415 pixels souhaités. Nous le placerons juste au-dessus de la balise de paragraphe intitulée "Hello World".

 

  
    
    
  
  
 Bonjour tout le monde 

Nous avons maintenant tout ce qui fonctionne ensemble. À ce stade, notre projet ressemble à la démo suivante de StackBlitz:

Nous apporterons une autre série de modifications à ce billet de blog. Nous placerons le texte et du contenu informatif sous l'image sur une petite et à droite de l'image si nous sommes sur le moyen et le haut.

Créons une division autour de l'image et du texte. Au lieu de "Hello World", nous allons fournir des informations utiles sur KendoReact. En attribuant des classes à ces divs que nous avons encerclés dans l'image et le texte, nous pouvons créer un nouveau point d'arrêt à 600 pixels qui présente notre contenu un peu plus agréablement à une résolution plus grande.

 

  
    
    
  


  
 Composants KendoReact 
  
 Il est difficile de créer une interface utilisateur pour les applications professionnelles, même avec React. Simplifiez-vous la vie avec nos composants natifs React UI et DataViz. 

Avec ce changement, je souhaite réellement introduire une nouvelle image pour notre taille moyenne. Elle prendra la place de notre image de taille moyenne que nous renommerons en grand. Notre petite image restera la même. Mais cette nouvelle image moyenne sera légèrement plus grande mais le même format que la petite image. La voici avec les autres images précédentes, nous devrons mettre à jour nos constantes contenant la valeur de chaque image en utilisant les images ci-dessous:

Small ( https://i.imgur.com/OxjKMBr. png )

Moyenne ( https://i.imgur.com/ZrM4G3j.png )

Grande ( https://i.imgur.com/sgz5R9d. png )

 const small = 'https://i.imgur.com/OxjKMBr.png';
const medium = 'https://i.imgur.com/ZrM4G3j.png';
const large = 'https://i.imgur.com/sgz5R9d.png';

Enfin, nous allons ajouter une nouvelle requête de média définissant un point d'arrêt à 600 pixels et quelques styles supplémentaires dans notre fichier custom.css .

 .main {
  afficher: -webkit-flex;
  display: -ms-flexbox;
  affichage: flex;
  -webkit-flex-direction: colonne;
  -ms-flex-direction: colonne;
  direction de flexion: colonne;
}
.kendo-image img {
  largeur: 100%;
}
.kendo-details h2 {
  haut de la marge: 0,25 m;
}

Nous avons ajouté les styles normaux dans le code ci-dessus. Ils définiront la div avec la classe de main pour qu'elle utilise également Flexbox et se comporte comme un conteneur, son contenu flex-direction sera une colonne par défaut. . Ensuite, nous allons ajouter une nouvelle requête multimédia de grande taille et intégrer davantage de CSS dans la requête multimédia de taille moyenne:

 @media screen et (min-width: 415px) {
  ...
  .kendo-details {
    rembourrage: 0 1em 0 0;
  }
}

Le code ci-dessus ajoute simplement un padding au div avec le nom de classe kendo-details . Nous sommes maintenant prêts à ajouter notre dernier point d'arrêt pour représenter les périphériques avec un écran plus grand.

 @Écran multimédia et (largeur minimale: 600 pixels) {
  .principale {
    -webkit-flex-direction: rangée;
    -ms-flex-direction: row;
    direction de flexion: rangée;
  }
  .kendo-details {
    rembourrage: 0 1em 0 1.5em;
  }
  .kendo-image img {
    largeur minimale: 150px;
    largeur maximale: 223 pixels;
  }
} 

Ici, nous changeons la direction des éléments à l'intérieur de la div avec le nom de classe de main . Nous ajoutons également plus de rembourrage à la div avec le nom de classe kendo-details . Enfin, pour notre div avec le nom de classe kendo-image nous ciblons toutes les images qu’il contient et nous assurons que, lorsque l’écran est supérieur à 60 pixels, l’image ne sera pas plus large que 223 pixels la largeur réelle de l’image), elle ne sera pas inférieure à 150 pixels.

Nous pouvons maintenant examiner l'état final de notre démonstration dans le StackBlitz ci-dessous. Cette démo devrait montrer tous nos progrès jusqu'ici et, en fait, nous sommes bien mieux placés pour commencer à créer une application réelle, maintenant que nous avons quelques-unes de ces pratiques réactives de base.

Jouez avec la démo et redimensionnez-la de petit à grand pour voir comment les différentes requêtes des médias changent l’orientation de la présentation de nos divs à chaque étape.

Faites-le-moi savoir dans les commentaires si vous souhaitez en savoir plus sur le responsive design dans React, car surface. Ce sont les bases ainsi que certaines des techniques les plus modernes pour créer des pages Web réactives, mais nous ne pouvons en aucun cas prétendre être des ninjas réactifs. Peut-être qu'un deuxième article partant de ce point est en ordre? Faites-le-nous savoir dans les commentaires!

---