Fermer

janvier 18, 2021

Utilisation des œillets dans les applications React17 minutes de lecture



À propos de l'auteur

Fortune Ikechi est un ingénieur Frontend basé dans l'État de Rivers au Nigeria. Il est étudiant à l'Université de Port-Harcourt. Il est passionné par la communauté et…
En savoir plus sur
Fortune

Dans ce didacticiel, nous allons apprendre à utiliser Grommet comme bibliothèque d'interface utilisateur pour les applications React. Nous utiliserons Grommet comme bibliothèque d'interface utilisateur de choix pour créer un composant de tarification, cela nous aiderait à mieux comprendre comment utiliser Grommet.

Au fil des ans, l'écosystème React s'est développé avec l'invention de bibliothèques qui aident le développement d'applications React. Dans ce tutoriel, nous allons apprendre à utiliser Grommet pour développer des composants réactifs, accessibles et mobiles pour les applications React. Nous allons examiner de plus près ses concepts de base, certains de ses cas d'utilisation, et créer un exemple simple. Il est important de noter que Grommet est open-source avec 6,9k étoiles sur GitHub .

Ce didacticiel sera utile aux lecteurs qui souhaitent développer des composants réactifs dans leur application React à l'aide de Grommet. Cet article nécessite une compréhension de base des composants React et Styled.

Qu'est-ce que Grommet?

Grommet est une bibliothèque de composants React qui se vante de composants de code mobile-first réactifs et accessibles. Il le fait grâce à ses composants – qui sont les éléments constitutifs de la bibliothèque. Ils comprennent des mises en page, des types, des couleurs, des contrôles, des entrées, des visualisations, des médias et des utilitaires. Tous les composants du passe-fils sont intégrés dans un souci d'accessibilité et de réactivité.

Le passe-fil prend en charge la spécification du W3C ce qui en fait un point énorme en termes d'accessibilité. Il fournit également des thèmes et des outils puissants qui vous permettent de personnaliser la couleur, le type, les éléments de composants et les besoins de mise en page en fonction des besoins de votre projet.

Certaines alternatives populaires à Grommet incluent les composants de style tailwindcss et bien que très populaire parmi les développeurs, chaque framework diffère par son approche dans la création d'applications. Grommet est mobile d'abord, accessible, réactif et des thèmes prêts à l'emploi et prend en charge le W3C pour une création facile d'applications React tandis que Tailwind CSS est un cadre d'utilité hautement personnalisable qui permet aux développeurs de créer des applications sans les restrictions de CSS telles que son règles en cascade. Styled-components vise à aider les développeurs à écrire des composants React réutilisables en nous permettant d'écrire du code CSS dans notre JavaScript à l'aide de littéraux d'objet et il utilise également des composants comme construction de style de bas niveau.

Dans notre projet, nous utiliserons Grommet dans notre projets en raison de ses composants personnalisables, de son accessibilité et des propriétés de thème dont nous aurions besoin au fur et à mesure que nous avancerons dans ce didacticiel. et des thèmes tels que les composants Boîte, Carte et En-tête. Pour utiliser d'abord, vous devez installer le paquet d'œillets à l'aide de NPM ou de fil, comme le bloc de code ci-dessous.

 npm i oeillet styled-components 

Ou:

 yarn add oeillet styled-components 

From ci-dessus, vous pouvez voir que nous avons également installé des composants stylisés. En effet, Grommet utilise des composants stylisés pour personnaliser les styles dans les composants; il est conseillé d’installer des composants stylisés dans vos projets.

Pour utiliser un composant Grommet dans un projet React, vous devez importer œillet . Construisons un composant de carte ci-dessous pour expliquer:

 import React depuis 'react';
import {Grommet, Card} de 'grommet';

Exporter la fonction par défaut GrommetExample () {
  revenir (
     
         Corps 
          <Bouton
            icon = {}
              hoverIndicator
            />
        
      );
    } 

Dans le bloc de code ci-dessus, importez d'abord Grommet et le composant Card du paquet oeillet dans votre fichier, ensuite nous avons enveloppé notre composant en utilisant le Composant de la carte que nous avons importé. Les styles peuvent être ajoutés à un composant Grommet comme des objets comme nous l'avons fait pour le Button ou ils peuvent être stylisés à l'aide de composants stylisés.

Voyons plus d'exemples de composants Grommet en regardant les composants Form.

] Pourquoi Grommet?

L'objectif principal de Grommet est d'améliorer l'expérience des développeurs et de créer un moyen plus rapide de créer des applications React grâce à ses composants mobiles, accessibles et réactifs. Grommet aligne de manière transparente une conception et un flux de travail de développeur pour créer une expérience transparente, ce qui permet à quiconque de commencer très facilement.

Grommet fournit également une prise en charge des lecteurs d'écran prêts à l'emploi, des variantes de thème telles que le mode sombre sont obtenues à partir de l'œillet prêt à l'emploi et ils peuvent être configurés à l'aide de l'accessoire themeMode dans une application React, comme ci-dessous.

 import React de "react";
import {Grommet, Box, Button, Heading, dark} de "oeillet";
import {oeillet} de "oeillet";
const App = () => {
  const [darkMode, setDarkMode] = React.useState (faux);
  revenir (
    
      
         Bascule à œillets Darkmode 
        

Dans le bloc de code ci-dessus, nous utilisons la propriété themeMode pour ajouter un mode sombre. En utilisant un opérateur ternaire, nous vérifions si la page est en mode sombre, nous pouvons la basculer en mode clair, ensuite nous avons ajouté un bouton pour basculer entre le mode clair et sombre sur notre application, vous pouvez vérifier ici pour une démo sur Codesandbox .

Grommet peut également exister avec d'autres frameworks et n'ajoute pas de style global qui affectera les composants existants dans votre application React, les fonctions et les styles peuvent être interpolés dans un objet littéral pour les styles. Grommet comporte également des composants de mise en page, qui présentent certaines propriétés CSS telles que flexbox, il prend également toutes les propriétés de flexbox comme accessoires.

Grommet propose une grande bibliothèque d'icônes SVG accessibles à l'aide du composant contrairement à de nombreux autres frameworks . Grommet comprend des composants pour la visualisation de données tels que des graphiques à barres, des cartes et même des suiveurs de progression.

Plusieurs entreprises utilisent aujourd'hui Grommet pour créer des applications réelles, notamment Netflix, IBM, Sony, Samsung, Shopify, GitHub et Twilio.

Construire un composant de tarification avec Grommet

Maintenant que nous connaissons les principes de base et les concepts de base de Grommet, nous allons créer un composant de tarification en utilisant des composants de Grommet, il devrait comporter des composants tels que Card, Box et Buttons de la bibliothèque Grommet. [19659006] Sans plus tarder, commençons!

Configuration de votre environnement

Commençons par créer une application React nue, écrivez le bloc de code ci-dessous sur votre terminal.

 create-react-app grommet-app 

Le code ci-dessus créera une application React nue en utilisant le package create-react-app . Allez dans le répertoire du projet.

 cd grommet-app 

Ensuite, installez les dépendances dont nous aurions besoin dans notre projet.

 yarn add oeillet styled-components 

Si vous avez fait cela, alors démarrez le serveur de projet en utilisant la commande ci-dessous.

 yarn start 

Pour ce projet, nous aurions besoin d'un seul composant pour nos cartes et le style avec des composants stylisés.

Créons la première carte ci-dessous

 importer React depuis "react";
import stylisé à partir de "styled-components";

Exporter la fonction par défaut GrommetCard () {
  revenir (
    <>
       
        
          
De base

588 $

500 Go de stockage

2 utilisateurs autorisés

Envoyer jusqu'à 3 Go

EN SAVOIR PLUS
); }

Dans le bloc de code ci-dessus, nous utilisons le composant CardWrapper pour envelopper tous nos composants Card puis nous avons ajouté un nouveau composant, CardContent qui est utilisé pour envelopper tout notre contenu dans chaque composant de la carte. Le composant CardButton est un composant de bouton qui est utilisé sur les cartes sur Grommet.

Ensuite, créons des styles pour notre application à l'aide de composants stylisés. Écrivez le fichier ci-dessous:

 const primaryGradient = "linear-gradient (hsl (236, 72%, 79%), hsl (237, 63%, 64%))";

const CardWrapper = styled.div`
  affichage: flex;
  justify-content: centre;
  align-items: centre;
  hauteur: contenu max;
  marge: 20px;
  @media all et (max-width: 1240px) {
    flex-direction: colonne;
  }
`; 

Dans ce qui précède, nous avons défini un objet de style pour notre CardWrapper dans notre application. Ajoutons des objets de style pour notre composant Card ci-dessus.

 const Card = styled.div`
  largeur min: 380px;
  boîte-ombre: 3px -2px 19px 0px rgba (50, 50, 50, 0,51);
  border-radius: $ {(props) => (props.left? "6px 0 0 6px": props.right? "0 6px 6px 0": "6px")};
  background: $ {(props) => (props.secondary === undefined? "#fff": primaryGradient)};
  rembourrage: 25px 20px;
  hauteur: $ {(props) => (props.center? "520px": "480px")};
  affichage: flex;
  justify-content: centre;
  align-items: centre;
  @media all et (max-width: 1240px) {
    marge inférieure: 20px;
    rayon de la bordure: 6px;
    hauteur: 480px;
  }
  @media all et (max-width: 420px) {
    largeur min: 90%;
  }
`; 

Ajoutons plus de styles à nos composants.

 const CardButton = styled.div`
  largeur min: 100%;
  rembourrage: 10px 15px;
  hauteur min: 50px;
  boîte-ombre: 1px 1px 0 rgba (0, 0, 0, 0,2), 0px 0px 2px rgba (0, 0, 0, 0,2);
  color: $ {(props) => (props.secondary! == undefined? "#fff": "# 7c7ee3")};
  background: $ {(props) => (props.secondary === undefined? "#fff": primaryGradient)};
  text-align: centre;
  margin-top: 25px;
  affichage: flex;
  align-items: centre;
  justify-content: centre;
  poids de la police: 600;
  taille de la police: 16px;
  rayon de la bordure: 6px;
`;
const CardContent = styled.div`
  largeur: 100%;
  color: $ {(props) => (props.secondary! == undefined? "#fff": "# 000")};
  rembourrage en bas: 10px;
  marge inférieure: 10px;
  border-bottom: 1.3px solide #eee;
  text-align: centre;
`;
const Div = styled.div`
  largeur min: 100%;
`; 

Une fois que nous avons fait tout cela, notre projet devrait ressembler à l'image ci-dessous.

 Une carte à œillets
Une carte à œillets. ( Grand aperçu )

Nous devons ajouter plus de cartes à notre composant en utilisant le bloc de code ci-dessous.

 
         
Premium

788 $

75 Go de stockage

4 utilisateurs autorisés

Envoyer jusqu'à 5 Go

EN SAVOIR PLUS
PRO

1 000 $

1 To de stockage

Illimité Utilisateurs autorisés

Envoyer jusqu'à 10 Go

EN SAVOIR PLUS
); }

Ici, nous avons créé deux autres composants de carte, en ajoutant nos propres composants personnalisés avec des composants de style et avons utilisé les objets de style que nous avons définis ci-dessus pour envelopper nos composants à œillets et améliorer le style.

Notre application de carte de prix finale devrait ressembler à la image ci-dessous.

 Application de la carte de prix de l'œillet
Application de la carte de prix de l'œillet. ( Grand aperçu )

Utilisation de Grommet en production (application Building List)

Pour voir un exemple de ce à quoi cela ressemblerait en utilisant Grommet dans une autre application, nous allons créer une application simple qui permettra à un utilisateur d'ajouter, d'afficher et de supprimer des éléments de liste. Nous utiliserons l'API React Context intégrée pour gérer l'état de l'application, Grommet pour nos composants d'interface utilisateur et des composants stylisés pour styliser notre application.

Encore une fois, initialisons une application de réaction à l'aide de la commande ci-dessous.

 create-react-app list-app 

cd dans le répertoire du projet

 cd list-app 
 yarn add oeillet oeillet-contrôles oeillet-icônes styled-components 

Dans le bloc de code ci-dessus, nous avons installé:

grommet Notre bibliothèque de composants d'interface utilisateur
grommet-controls grommet-icons Paquets d'icônes et de contrôles que nous devons installer pour fonctionner avec Grommet
styled-components ] Pour utiliser des littéraux étiquetés pour styliser les composants de réaction et l'œillet

Construire le contexte de l'application

Dans l'application, nous devons partager les données de l'utilisateur entre plusieurs composants, pour y parvenir, nous utiliserions l'API de contexte. Avec cela, nous pouvons créer un contexte d'application qui contiendrait les listes et la logique de notre application. Vous pouvez consulter cet article pour en savoir plus sur l'API de contexte.

Pour créer le contexte de notre application, créez d'abord un dossier appelé context dans le répertoire src de notre application, créez ensuite un fichier appelé AppContext.js ce sera le fichier pour tout notre contexte d'application, faisons cela dans le bloc de code ci-dessous:

 import React, {createContext, useState} de 'réagir';
export const Contexte = createContext ();
const AppContext = ({enfants}) => {
  const [lists, setLists] = useState ([]);
  const removeList = item => {
    laissez newLists = [...lists];
    
    lists.map ((liste, id) => {
      liste de retour === élément && newLists.splice (id, 1);
    });
    setLists (newLists);
  } 

Dans le bloc de code ci-dessus, nous avons importé le hook API de contexte createContext et le hook useState tous de React, en utilisant le composant useState nous avons créé un état central pour notre application, cela a été fait pour que le composant puisse agir en tant que fournisseur de contexte pour d'autres composants de notre application. Ensuite, nous avons créé une nouvelle variable nommée removeList qui prend un élément en tant que paramètre, en utilisant l'opérateur de répartition que nous répartissons ce qui se trouve dans l'état et en épissant l'objet qui est égal à l'élément que nous voulons supprimer.

Ensuite, nous utiliserons la logique ci-dessus pour créer des méthodes pour ajouter et supprimer des éléments de liste dans notre application, nous le faisons dans le bloc de code ci-dessous:

 return (
     setLists ([...lists, newItem]),
      deleteFromList: (élément) => removeList (élément)
    }}>
      {enfants}
    
  )
}
export default AppContext; 

Ici, nous retournons le Context.Provider et acceptons les accessoires enfants, nous faisons cela afin que l'autre composant puisse accéder aux propriétés que nous transmettons dans le prop value, nous initialisé l'objet lists à prendre dans nos listes, la méthode addToList prend un paramètre newItem pour ajouter de nouvelles listes à l'état de notre application et le deleteFromList supprime ou supprime un élément du magasin de listes.

Construction du composant de liste

Dans cette section, nous allons créer notre composant de liste en utilisant Grommet pour nos composants d'interface utilisateur et des composants stylisés pour styliser certaines parties de notre interface utilisateur. Commencez par créer un dossier de composants dans le répertoire de notre application src puis dans le dossier de composants, créez un nouveau fichier List.js et à l'intérieur, écrivez le code ci-dessous.

 import Réagir de "réagir";
import stylisé à partir de "styled-components";
importer {Card, CardBody, Box, Text, Button} depuis "oeillet";
Liste des fonctions (accessoires) {
 revenir (