L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Utilisation des œillets dans les applications React
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 = {
);
} 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
);
};
export default App; 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
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.
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.
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 (
{props.list}
);
}
Exporter la liste par défaut; Dans le code ci-dessus, nous avons d'abord importé les composants Card, CardBody, Box, Text et Button à partir de l'œillet, puis nous avons créé un composant List pour prendre en charge les accessoires, en utilisant les composants de l'œillet, nous avons créé un composant de carte avec une suppression bouton qui sera automatiquement ajouté à une liste. Il faut ensuite styliser notre composant ci-dessous:
const StyledDiv = styled.div`
.bouton {
couleur de fond: # 8b0000;
Couleur blanche;
rembourrage: 10px;
rayon de la bordure: 5px;
}
.card_body {
rembourrage: 20px;
margin-top: 20px;
}
.item_box {
justify-content: espace entre;
}
.texte {
margin-top: auto;
margin-bottom: auto;
}
`;
Une fois que nous faisons ce qui précède, notre composant devrait ressembler à l'image ci-dessous.
Construire le composant d'affichage de liste
Ce composant affiche toutes les listes que nous avons ajoutées et génère également automatiquement un bouton de suppression dès qu'une nouvelle liste est ajoutée.
importer React depuis "react";
importer la liste de "./List";
import {Context} de '../context/AppContext';
function ListDisplay () {
revenir (
{(contexte) => (
{context.lists.length?
context.lists.map ((liste, id) => (
)) : nul
}
)}
);
}
export default ListDisplay; Dans ce composant, nous avons créé une fonction ListDisplay et l'avons encapsulée à l'aide du Context.Consumer de notre composant appContext puis en utilisant un div pour notre balise conteneur, nous avons déstructuré les méthodes list et deleteList à partir du contexte de l'application, en faisant cela, nous pouvons les passer comme accessoires. Ensuite, nous mappons les listes pour renvoyer une nouvelle liste, que nous pouvons utiliser pour construire une liste unique en passant l'objet renvoyé comme accessoire au composant List .
Notre Le composant devrait ressembler à ceci avec les listes ajoutées:
Composant NavBar
Ce composant sera l'essentiel de notre application, ici nous allons envelopper notre composant en utilisant le Context.Consumer et similaire à notre autre composants, nous styliserons avec des composants stylisés pour le stylisme. Construisons ce composant ci-dessous.
import React, {useState} from "react";
import {Heading, Form, TextInput, Button} depuis "oeillet";
import stylisé à partir de "styled-components";
import {Context} de '../context/AppContext';
function Navbar () {
const [value, setValue] = useState ("");
revenir (
{magasin => (
Application Liste des œillets
)}
);
}
const StyledDiv = styled.div`
.bouton {
margin-top: 10px;
couleur de fond: violet;
Couleur blanche;
rembourrage: 10px;
rayon de la bordure: 5px;
}
`;
exporter la barre de navigation par défaut;
Tout d'abord, afin d'accéder aux propriétés dans le fournisseur de contexte d'application, nous avons enveloppé notre composant dans un composant Context.Consumer . Ensuite, nous avons ajouté une balise Heading de Grommet, puis nous avons créé un formulaire de saisie pour ajouter nos listes en utilisant la méthode addToList qui prend un paramètre de valeur (dans notre cas, la valeur est l'entrée de l'utilisateur). Enfin, nous avons ajouté un bouton Soumettre pour gérer la soumission du formulaire.
Une fois terminé correctement, notre application devrait ressembler à ceci:
Conclusion
Dans cet article, nous avons découvert Grommet, une bibliothèque de composants avec réactivité et accessibilité à l'esprit. Nous sommes également passés par le processus de création d'une application de composant de tarification à l'aide de Grommet et d'une application de liste. Amusez-vous en utilisant Grommet pour vos besoins en composants et en interface utilisateur pour votre prochaine application React. Le code de l'application de la liste des œillets se trouve sur Codesandbox et le composant de tarification peut être trouvé ici .
Resources
(ks, vf, yk, il) Source link