Créer un réseau réactif dans React

Découvrez les étapes de base pour configurer une application React à l'aide de Flexbox afin de créer une grille réactive.

Dans notre précédent article, Création d'une présentation réactive dans React nous avons commencé par apprendre à configurer une base. mise en page réactive dans notre application React à l'aide de Flexbox et de requêtes multimédia. Nous avons utilisé un package npm React Hooks pour aider à définir des points d'arrêt et un autre pour aider à créer des images réactives (balise picture). Nous avons également présenté le composant de KendoReact Menu et, à la fin, nous avions une démonstration assez réactive que nous allons développer dans cet article.

Pas de différence avec l'interface utilisateur, la mise en page prend du temps et des finesses. pas. Nous pouvons continuer à construire et à travailler à la refactorisation et à améliorer ce que nous avons déjà construit, ainsi qu'à apprendre de nouvelles techniques autour de la mise en page réactive et à incorporer lentement ces idées. La prochaine chose sur laquelle nous devrions travailler dans cette application est de mettre en place un type de réseau réactif. Pour ce faire, je voudrais utiliser un autre paquet npm appelé react-simple-flex-grid .

Notre point de départ sera une démo de StackBlitz, qui n’est qu’une partie de la démo où nous sommes partis. off dans le dernier article. Je recommanderais de faire une fourchette de cette démo si vous envisagez de suivre. Sinon, il vous suffit de lire et de comprendre que vous pouvez ouvrir n'importe laquelle des démos que je fournis pour jouer avec le code à n'importe quel point d'arrêt du message. Je présenterai plusieurs démonstrations à différents moments ci-dessous.

Notre application de départ devrait ressembler à l'image ci-dessous:

Elle ne remportera aucun prix, mais nous ne nous concentrons pas encore vraiment sur l'aspect et la convivialité, nous avons encore nos jambes dans ce monde réactif en constante évolution et redimensionnant. Et nous avons déjà appris quelques techniques de mise en page très basiques. Cela dit, dans cette partie de la série de blogs, je souhaite mettre l'accent sur la création d'une grille réactive que nous pouvons utiliser dans notre application, de sorte que nous n'ayons pas à importer quelque chose comme Bootstrap pour utiliser leur grille.

I Je vais faire une maquette de quelque chose que nous pouvons essayer de construire et qui utilisera cette grille pour de nombreux points d'arrêt. L'idée sera une grille de logos d'entreprises utilisant notre produit. C’est une chose assez courante que les entreprises font sur leur site Web et le même concept peut être appliqué à de nombreuses utilisations différentes. Je dois d’abord obtenir un certain nombre de logos que nous pouvons utiliser. Je vais les télécharger sur imgur afin que nous puissions les utiliser avec StackBlitz facilement. Nous allons afficher ces images dans une grille illustrant quatre résolutions larges, trois résolutions moyennes et deux résolutions faibles.

Je vais lancer notre démonstration et commencer à travailler sur notre première série de modifications.

Le premier ordre du jour est de créer une liste de sociétés dans un fichier .json . Avant de transformer la liste des logos en une grille, nous devons d’abord écrire un code qui mappera chaque entreprise de notre liste de noms dans une balise de notre JSX. Nos fichiers companyList.json contiendront simplement un tableau d'objets. Chaque objet est une entreprise et porte un nom et une URL d’image. Je vais télécharger une image pour chaque entreprise sur imgur.com que nous pouvons utiliser pour notre image.

Ajouter un fichier companyList.json .

[
  { "name": "Nasa", "image": "https://imgur.com/RTFOOHR" },
  { "name": "Microsoft", "image": "https://imgur.com/yln0oYC" },
  { "name": "Phillips", "image": "https://imgur.com/ZHKnVr8" },
  { "name": "Fox", "image": "https://imgur.com/Hrzbo49" },
  { "name": "Sony", "image": "https://imgur.com/Ld5Ux3g" },
  { "name": "IBM", "image": "https://imgur.com/rg7RAdm" },
  { "name": "Toshiba", "image": "https://imgur.com/aj9vfmu" },
  { "name": "Volvo", "image": "https://imgur.com/hTkpXvw" }
]

Nous devons créer un Companies.jsx page. Ces fichiers de composants ne doivent pas obligatoirement utiliser le format .jsx ils peuvent tout aussi bien utiliser .js comme extension de fichier. Lorsque je crée un nouveau composant, j'utilise généralement .jsx .

 import Réagissez à partir de 'react';
importer companyList à partir de './companyList.json';

const Companies = () => {
  revenir (
    

      {companyList.map (co => 
 {co.name} 
)}
    
  )
}

Exportation par défaut des entreprises;

Rien de trop complexe ici, nous importons réagissons et notre liste de sociétés. Nous créons un composant fonctionnel qui mappe simplement sur la liste des entreprises et colle la valeur du nom à l'intérieur d'un div. Ceci est répété pour chaque entreprise, et nous pouvons maintenant penser à la manière dont nous allons passer de là à la création d'une grille flexible pour chacune des images.

Ajoutons maintenant l'importation suivante à main.js page:

 sociétés d'importation de './Companies';

Ensuite, nous afficherons notre composant Sociétés sous nos informations sur Kendo UI. La div portant le nom de classe kendo-details ressemblera maintenant à l'exemple de code ci-dessous:

 

    
 Composants de React 
    
 Construire une interface utilisateur pour les applications professionnelles est difficile, même avec React. Simplifiez-vous la vie avec nos composants natifs React UI et DataViz. 
    
 Entreprises utilisant le kendo 
    

À ce moment-là, et si vous avez suivi, votre démo correspondra au StackBlitz ci-dessous:

Parlons des images

Les images de cette liste sont 600 x 600 px et nous ne voulons pas leur montrer cette résolution, alors je voulais simplement parcourir les noms pour nous assurer que notre logique et notre code fonctionnaient. Je souhaite en réalité une image différente pour chaque point d'arrêt, mais prenons des mesures simples pour y parvenir. Cela signifierait que 600 pixels soit la taille de nos images pour afficher les points d'arrêt importants. 300 pixels correspondraient à la taille de nos images au-dessus du point d'arrêt moyen et jusqu'au point d'arrêt important. Enfin, nos images sur de petites dimensions auraient une largeur de 150 pixels.

Mais pour l’instant, nous pouvons les redimensionner pour occuper 100% de leur espace disponible.

Ajoutons le package que nous souhaitons utiliser pour une solution de grille Flexbox. : react-simple-flex-grid . J'ai choisi ce paquet pour sa facilité d'utilisation. J'ai essayé plusieurs packages pour React qui fournissaient un modèle de composant similaire. Au lieu de créer des divs, nous allons créer les balises et . Cette bibliothèque, bien que simple, nous permet de faire des choses complexes. Pour créer une grille, nous allons utiliser une seule ligne. Dans cette balise Row, nous allons répéter notre composant Col pour chaque élément de notre liste. Nous pouvons ensuite fournir des instructions pour chaque point d'arrêt.

Voici comment je veux utiliser leur API de composant:

En travaillant sur la grille par défaut de 12 colonnes, je veux:

• Dans XSmall: chaque composant de colonne occupera 6 colonnes de chaque ligne
• À petit : Chaque composant Col occupera 4 colonnes de chaque rangée
• À moyen: Chaque composant Col occupera 3 colonnes de chaque rangée
• En général: Chaque composant Col occupera 2 colonnes de chaque rangée
• XLarge: Chaque composant Col occupera 2 colonnes de chaque ligne

Cela signifie également:

• Dans XSmall: il y aura 2 images par ligne
• . En petit: Il y aura 3 images par ligne.
• Moyenne: Il y aura 4 images par ligne
• En général: Il y aura 6 images par ligne
• Sur XLarge: Il y aura 6 images par ligne

Pour ce faire, nous mettrons à jour le code JavaScript que mappe la companyList pour générer ce dont nous avons besoin pour utiliser les composants fournis par react-simple-flex-grid . Par défaut, les points de rupture sont les suivants:

• Très petit: 0-767
• Petit: 768-991
• Medium: 992-1199
• Grand: 1200-1599
• XLarge: 1600-infinity

En gardant tout cela à l'esprit, il suffit de jeter un coup d'œil à la page GitHub ou NPM de la page react-simple-flex-grid pour constater que la JSX que nous devons écrire serait:

 
  {companyList.map (co =>
     {co.name} 
  )}

Si nous devions décrire notre grille au-dessus du point de rupture moyen et au-dessous du grand point de rupture, elle ressemblerait à ceci:

Mais avec juste texte à l'intérieur de chaque colonne, cela ne ressemble en rien à ce que nous voulons, ajoutons donc les images. Mettez à jour votre code sur le composant Sociétés pour renvoyer le fichier JSX suivant:

 const Companies = () => {
  revenir (
    
      {(companyList) .map (co =>
        
      )}
    
  )
}

À ce stade, et si vous avez suivi le processus, votre démo correspondra au StackBlitz ci-dessous:

Maintenant que nous avons une meilleure façon de mettre en page notre page, je souhaite repenser notre mise en page Flexbox. Le travail personnalisé que nous avons effectué avec les requêtes de médias dans notre CSS n'est pas si joli et il est bien mieux d'écrire un code clair et concis, y compris le CSS. Quand je regarde la barre de navigation et le code principal, je ne peux pas imaginer la comprendre vraiment sans l'écrire. De plus, je ne pense pas que notre objectif soit d’écrire nous-mêmes le CSS dont nous avons besoin pour la grille. Cela pourrait être un article entier en soi. Ce que nous voulons, c'est un type de composant capable de résumer les détails de la construction d'une grille Flexbox et de rendre cette technologie disponible dans un simple système React Component. Je ne crains jamais de jeter le code. Alors, sortons la corbeille.

Je pense qu'avec ce nouveau système de grille simple, nous pouvons obtenir une présentation similaire, mais aussi nous débarrasser de certains des CSS complexes que nous avons écrits auparavant et utiliser ces composants Row et Col de React Simple. Flex Grid à la place. Nous aurons du code CSS qui contiendra des points d'arrêt, mais utilisons les points d'arrêt fournis par défaut dans la grille React Simple Flex Grid. Après avoir joué avec l'écran à différentes tailles, je pense que mon idée initiale d'avoir plusieurs points d'arrêt à des tailles aussi petites ne correspond pas exactement à ce que je souhaite à la fin. Je vais donc supprimer le point d'arrêt à 415 pixels. Examinons à nouveau quels sont les points de rupture par défaut pour ce système de grille.

• Très petit: 0-767
• Petit: 768-991
• Moyen: 992-1199
• Grand: 1200-1599 [19659031] XLarge: 1600-infinity

En regardant cet ensemble de points d'arrêt, je pense que nous pouvons nous en tirer simplement avec deux graphiques d'en-tête. L'un d'eux s'affichera jusqu'à 768 pixels. Nous passerons ensuite à une image carrée plus petite. J'ai créé deux nouvelles images à utiliser:

Notre petite image devra faire 767 pixels de large, car 767 pixels de large sera la plus grande qu'elle puisse afficher avant d'atteindre son point d'arrêt à 768 pixels [19659004] Notre image de hauteur moyenne fera 300 pixels de large, car elle semble être la plus grande que je souhaite afficher pour le moment. Nous pourrions toujours créer une autre image pour servir des écrans beaucoup plus grands, mais par souci de brièveté, revenons à ne servir que des services plus petits, voire plus hauts.

Petit:

 const App = () => {
  const checkIfMediumPlus = useMediaPredicate ("(min-width: 768px)");
  revenir (
    
      
        
      
      
        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

 .navbar {
  couleur d'arrière-plan: #fff;
}
.component-responsive-image img {
  rembourrage: 1em;
  largeur: 100%;
}
.kendo-info {
  rembourrage: 1em;
}
.companyList {
  rembourrage: 1em;
  couleur de fond: #efefef;
}

Écran @média et (largeur minimale: 0px) {
  .component-responsive-image img {
    rembourrage: 0;
    largeur: 100%;
  }
  .companyList h2, .kendo-info h2 {
    marge supérieure: 0;
  }
}

Écran @média et (largeur minimale: 768 pixels) {
  .navbar {
    hauteur: 100vh;
    rembourrage en haut: 1em;
    couleur de fond: #efefef;
  }
  .component-responsive-image {
    hauteur: 100%;
  }
  .component-responsive-image img {
    rembourrage: 1em;
    max-width: auto;
    hauteur: 100%;
  }
  .companyList {
    couleur d'arrière-plan: #fff;
  }
  .kendo-info {
    taille de police: 1.25em;
  }
}

Écran @média et (largeur minimale: 992 pixels) {
  .kendo-info {
    taille de police: 1.5em;
  }
}