Fermer

février 7, 2019

Créer un réseau réactif dans React13 minutes de lecture


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:

 Présentation initiale de l'application

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:

 Maquette d’agencement de la grille

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:

  • Medium-Up:

    Pour économiser de nombreuses étapes fastidieuses, je pense que la meilleure façon de présenter ces nouveaux changements à l'aide de la grille React Simple Flex est pour moi d'agiter une baguette magique et de vous montrer un exemple actualisé de StackBlitz qui a été refactoré. Mais je vais expliquer ce que j'ai fait dans ce refactor:

    Mon idée ici est d'utiliser notre composant React Simple Flex Grid au lieu du code personnalisé Flexbox que nous avons créé. Cela va nettoyer notre CSS et notre HTML. Je vais également déplacer la section d'informations sur l'interface de Kendo dans son propre composant appelé KendoInfo tout comme les sociétés ont leur propre composant. Notre fichier main.js devrait être assez simple à consulter. Pour cette raison, je mettrai également l'image Responsive dans son propre composant, de sorte à ne pas encombrer le JSX.

    Déplacer notre composant ResponsiveImage dans un wrapper nous permettra également de lui transmettre des accessoires. si besoin. Nous ne le ferons pas maintenant, mais c'est une bonne idée pour l'avenir. Par exemple, nous pourrions passer dans un tableau d’images ayant chacune une largeur minimale. Ces données pourraient être utilisées pour générer les composants ResponsiveImageSize à l'intérieur du composant ResponsiveImage . Mais pour le moment, au moins, nous avons extrait le code et l'avons déplacé en dehors du fichier main.js pour le séparer.

    Voyons ce que nous avons nettoyé main.js [ le fichier ressemble maintenant:

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

    C'est beaucoup plus facile pour quiconque d'entrer et de comprendre ce qui se passe. Tant qu'ils ont une compréhension de base du fonctionnement des autres grilles à 12 colonnes, ou peut-être qu'ils ont déjà travaillé avec Bootstrap ou Foundation, cela semble familier.

    En ce qui concerne le fichier custom.css j'ai défini quelques points de contrôle correspondant aux valeurs par défaut de react-simple-flex-grid que j'ai longuement parcourues. point d'arrêt et écrit des styles pour chaque composant. Nous augmentons également la taille du texte lorsque nous augmentons à moyen et haut. Ce n'est pas parfait, mais c'est mieux que ce que nous avions auparavant et facile à lire et à suivre lorsque vous parcourez le document.

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

    Enfin, j'ai arrangé les fichiers dans des répertoires respectifs:

     Nouvelle structure de répertoires

    Wraping Up

    Cela nous amène à la fin de cette partie de la série. Jusqu'à présent, dans notre premier article nous avons expliqué comment utiliser manuellement Flexbox et exploré les composants prêts à l'emploi de l'écosystème pour nous aider à adopter un comportement réactif sans effectuer tout le travail manuellement. Dans cet article, nous avons continué à nous appuyer sur l'écosystème pour trouver un système de grille simple et facile à utiliser, permettant de créer une mise en page et des grilles réactives à d'autres fins, comme une galerie d'images. J'espère que vous sentez que vous connaissez votre chemin Responsive React un peu mieux maintenant.

    Il est toujours utile de savoir comment cela fonctionne sous le capot. Cependant, il n'y a aucune raison de nos jours de créer sa propre grille Flexbox – le faire une fois pour bien comprendre les bases est génial, mais il y a de nombreux composants là-bas qui peut vous aider à le faire. Cela vous fait économiser beaucoup de temps et de peine et il n'est pas difficile de changer si vous passez à une autre solution.

    Vous trouverez ci-dessous notre démo finale de StackBlitz et le produit de cet exercice de refactoring. Si j'étais en charge de la création complète de cette application, ce serait un excellent point de départ et nous aurions des outils qui pourraient nous aider à gérer le comportement réactif quotidien et la présentation dans notre application.


  • Les commentaires sont désactivés en mode Aperçu. [19659083]




    Source link