Utilizarea Grommet în aplicațiile React

De-a lungul anilor, ecosistemul React a crescut odată cu inventarea bibliotecilor care ajută la dezvoltarea aplicațiilor React. În acest tutorial, vom învăța să folosim Grommet pentru a dezvolta componente receptive, accesibile și mobile mai întâi pentru aplicațiile React. Vom arunca o privire mai atentă la conceptele sale de bază, la unele dintre cazurile sale de utilizare și vom construi un exemplu simplu. Este important să rețineți că Grommet este open-source cu 6,9k stele pe GitHub.

Acest tutorial va fi benefic pentru cititorii care sunt interesați să dezvolte componente receptive în aplicația lor React folosind Grommet. Acest articol necesită o înțelegere de bază a componentelor React și Styled.

Ce este Grommet?

Grommet este o bibliotecă de componente React care se mândrește cu componente de cod sensibile și accesibile pentru mobil. Face acest lucru prin componentele sale - care sunt elementele de bază ale bibliotecii. Acestea includ Aspecte, Tipuri, Culori, Controale, Intrări, Vizualizări Media și utilități. Toate componentele garniturii sunt încorporate având în vedere accesibilitatea și capacitatea de reacție.

Grommet oferă suport pentru specificațiile W3C, ceea ce îl face să obțină un punct uriaș în ceea ce privește accesibilitatea. De asemenea, oferă teme și instrumente puternice care vă permit să vă personalizați culoarea, tipul, elementele componente și nevoile de aspect în funcție de nevoile proiectului.

Unele alternative populare la Grommet includ tailwindcss și componente cu stil, deși sunt foarte populare în rândul dezvoltatorilor, fiecare cadru diferă în abordare în construirea aplicațiilor. Grommet este mai întâi pe mobil, accesibil, receptiv și teme din cutie și are suport pentru W3C pentru crearea ușoară a aplicațiilor React, în timp ce Tailwind CSS este un cadru de utilitate extrem de personalizabil care permite dezvoltatorilor să creeze aplicații fără restricțiile CSS, cum ar fi reguli în cascadă. Componentele stilate își propun să ajute dezvoltatorii să scrie componente React reutilizabile, permițându-ne să scriem cod CSS în JavaScript folosind literale obiect și, de asemenea, utilizează componente ca construct de stil de nivel scăzut.

În proiectul nostru, vom folosi Grommet în proiectele noastre datorită componentelor personalizabile, accesibilității și proprietăților temei de care am avea nevoie pe măsură ce avansăm în acest tutorial.

Utilizarea componentelor Grommet

Grommet, ca atâtea alte biblioteci de componente, vine pre-construit cu unele componente pentru machete și teme, cum ar fi componentele Box, Card și Header. Pentru a utiliza mai întâi, ar trebui să instalați pachetul cu ochiuri folosind NPM sau fire, cum ar fi blocul de cod de mai jos.

 npm i grommet styled-components

Sau:

 yarn add grommet styled-components

Din cele de mai sus, puteți vedea că am instalat și componente stilizate. Acest lucru se datorează faptului că Grommet utilizează componente cu stil pentru personalizarea stilurilor în componente; este recomandabil să instalați componente cu stil în proiectele dvs.

Pentru a utiliza o componentă Grommet într-un proiect React, trebuie să importați grommet . Să construim o componentă de card mai jos pentru a explica:

 import React from 'react'; import { Grommet, Card } from 'grommet'; export default function GrommetExample() { return ( <Card> <CardBody pad="medium">Body</CardBody> <Button icon={<Icons.Favorite color="red" />} hoverIndicator /> </Card> ); }

În blocul de cod de mai sus, am importat mai întâi Grommet și componenta Card din pachetul grommet în fișierul dvs., apoi am împachetat componenta noastră folosind componenta Card pe care am importat-o. Stilurile pot fi adăugate la o componentă Grommet ca obiecte, așa cum am făcut noi pentru Button , sau pot fi stilate folosind componente cu stil.

Să vedem mai multe exemple de componente Grommet analizând componentele Form.

De ce Grommet?

Scopul principal al Grommet este să îmbunătățească experiența dezvoltatorilor și să creeze un mod mai rapid de a construi aplicații React cu componentele sale mobile, accesibile și receptive. Grommet aliniază perfect un design și un flux de lucru pentru dezvoltatori pentru a crea o experiență perfectă, ceea ce face ca oricine să înceapă foarte ușor.

Grommet oferă, de asemenea, suport pentru cititoarele de ecran din cutie, variantele de teme, cum ar fi modul întunecat, sunt obținute din grommet din cutie și pot fi configurate folosind elementul de sprijin themeMode într-o aplicație React, ca mai jos.

 import React from "react"; import { Grommet, Box, Button, Heading, dark } from "grommet"; import { grommet } from "grommet"; const App = () => { const [darkMode, setDarkMode] = React.useState(false); return ( <Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"}> <Box pad="large"> <Heading level="1">Grommet Darkmode toggle</Heading> <Button label="Toggle Theme" primary alignSelf="center" margin="large" onClick={() => setDarkMode(!darkMode)} /> </Box> </Grommet> ); }; export default App;

În blocul de cod de mai sus, folosim proprietatea themeMode pentru a adăuga un mod întunecat. Folosind un operator ternar, verificăm dacă pagina este în modul întunecat, o putem comuta în modul light, apoi am adăugat un buton pentru comutarea între modul light și dark în aplicația noastră, puteți verifica aici pentru o demonstrație pe Codesandbox.

Grommet poate exista și cu alte cadre și nu adaugă un stil global care va afecta componentele existente în aplicația React, funcțiile și stilurile pot fi interpolate într-un obiect literal pentru stiluri. Grommet are, de asemenea, componente Layout, care prezintă unele proprietăți CSS, cum ar fi flexbox, preia, de asemenea, toate proprietățile flexbox ca elemente de recuzită.

Grommet are o bibliotecă mare de pictograme SVG care sunt accesibile utilizând componenta <Icon /> , spre deosebire de multe alte cadre. Grommet are componente pentru vizualizarea datelor, cum ar fi diagrame cu bare, hărți și chiar instrumente de urmărire a progresului.

Mai multe firme folosesc Grommet astăzi pentru a crea aplicații reale, inclusiv Netflix, IBM, Sony, Samsung, Shopify, GitHub și Twilio.

Construirea unei componente de stabilire a prețurilor cu grommet

Acum cunoaștem elementele de bază și conceptele de bază ale Grommet, vom crea o componentă de preț folosind componente Grommet, ar trebui să includă componente precum Card, Box și Buttons din biblioteca Grommet.

Fără alte prelungiri, să începem!

Configurarea mediului

Mai întâi, să creăm o aplicație React, scrieți blocul de cod de mai jos pe terminalul dvs.

 create-react-app grommet-app

Codul de mai sus va crea o aplicație React simplă folosind pachetul create-react-app. Mutați-vă în directorul de proiect.

 cd grommet-app

Următorul este să instalăm dependențele de care am avea nevoie în proiectul nostru.

 yarn add grommet styled-components

Dacă ați făcut acest lucru, atunci porniți serverul de proiect folosind comanda de mai jos.

 yarn start

Pentru acest proiect, am avea nevoie de o singură componentă pentru cărțile noastre și de stil cu componente cu stil.

Să creăm prima carte de mai jos

 import React from "react"; import styled from "styled-components"; export default function GrommetCard() { return ( <> <CardWrapper> <Card left> <Div> <Div> <CardContent> <small>Basic</small> <h1>$588</h1> </CardContent> <CardContent> <p>500 GB storage</p> </CardContent> <CardContent> <p>2 Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 3 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

În blocul de cod de mai sus, folosim componenta CardWrapper pentru a împacheta toate componentele noastre Card , apoi am adăugat o nouă componentă, CardContent , care este folosită pentru a încheia tot conținutul nostru în fiecare componentă a cardului. Componenta CardButton este o componentă buton care este utilizată pe cardurile de pe Grommet.

În continuare, să creăm stiluri pentru aplicația noastră folosind componente-stilizate. Scrieți fișierul de mai jos:

 const primaryGradient = "linear-gradient(hsl(236, 72%, 79%), hsl(237, 63%, 64%))"; const CardWrapper = styled.div` display: flex; justify-content: center; align-items: center; height: max-content; margin: 20px; @media all and (max-width: 1240px) { flex-direction: column; } `;

În cele de mai sus, am definit un obiect de stil pentru CardWrapper -ul nostru în aplicația noastră. Să adăugăm obiecte de stil pentru componenta Card de mai sus.

 const Card = styled.div` min-width: 380px; box-shadow: 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)}; padding: 25px 20px; height: ${(props) => (props.center ? "520px" : "480px")}; display: flex; justify-content: center; align-items: center; @media all and (max-width: 1240px) { margin-bottom: 20px; border-radius: 6px; height: 480px; } @media all and (max-width: 420px) { min-width: 90%; } `;

Să adăugăm mai multe stiluri componentelor noastre.

 const CardButton = styled.div` min-width: 100%; padding: 10px 15px; min-height: 50px; box-shadow: 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: center; margin-top: 25px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; border-radius: 6px; `; const CardContent = styled.div` width: 100%; color: ${(props) => (props.secondary !== undefined ? "#fff" : "#000")}; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.3px solid #eee; text-align: center; `; const Div = styled.div` min-width: 100%; `;

Odată ce am făcut toate acestea, proiectul nostru ar trebui să arate similar cu imaginea de mai jos.

Trebuie să adăugăm mai multe carduri la componenta noastră folosind blocul de cod de mai jos.

 <Card center secondary> <Div> <Div> <CardContent secondary> <small>Premium</small> <h1>$788</h1> </CardContent> <CardContent secondary> <p>75 GB storage</p> </CardContent> <CardContent secondary> <p>4 Users Allowed</p> </CardContent> <CardContent secondary> <p>Send Up To 5 GB</p> </CardContent> </Div> <CardButton>LEARN MORE</CardButton> </Div> </Card> <Card right> <Div> <Div> <CardContent> <small>PRO</small> <h1>$1000</h1> </CardContent> <CardContent> <p>1TB storage</p> </CardContent> <CardContent> <p>Unlimited Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 10 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

Aici, am creat încă două componente de card, adăugând propriile componente personalizate cu componente de stil și am folosit obiectele de stil pe care le-am definit mai sus pentru a încheia componentele Grommet și pentru a îmbunătăți stilul.

Aplicația noastră finală pentru cardul de preț ar trebui să arate ca imaginea de mai jos.

Utilizarea Grommet în producție (aplicația pentru liste de clădiri)

Pentru a vedea un exemplu despre cum ar arăta folosind Grommet într-o altă aplicație, vom construi o aplicație simplă care va permite unui utilizator să adauge, să vizualizeze și să ștergă elemente din listă. Vom folosi API-ul React Context încorporat pentru a gestiona starea aplicației, Grommet pentru componentele noastre UI și componentele stilizate pentru stilul aplicației noastre.

Din nou, să inițializam o aplicație react folosind comanda de mai jos.

 create-react-app list-app

cd în directorul de proiect

 cd list-app

 yarn add grommet grommet-controls grommet-icons styled-components

În blocul de cod de mai sus, am instalat:

Construirea contextului aplicației

În aplicație, trebuie să partajăm datele utilizatorului pe mai multe componente, pentru a realiza acest lucru, vom folosi Context API. Cu aceasta, putem crea un context de aplicație care ar conține listele și logica aplicației noastre. Puteți consulta acest articol pentru a afla mai multe despre Context API.

Pentru a crea contextul aplicației noastre, creați mai întâi un folder numit context în directorul src al aplicației noastre, apoi creați un fișier numit AppContext.js acesta va fi fișierul pentru tot contextul aplicației noastre, să facem asta în blocul de cod de mai jos:

 import React, { createContext, useState } from 'react'; export const Context = createContext(); const AppContext = ({children}) => { const [lists, setLists] = useState([]); const removeList = item => { let newLists = [...lists]; lists.map((list, id) => { return list === item && newLists.splice(id, 1); }); setLists(newLists); }

În blocul de cod de mai sus, am importat cârligul API de context createContext și hook-ul useState toate din React, folosind componenta useState , am creat o stare centrală pentru aplicația noastră, acest lucru a fost făcut astfel încât componenta să poată acționa ca un furnizor de context pentru alte componentele din aplicația noastră. Apoi, am creat o nouă variabilă numită removeList care ia un element ca parametru, folosind operatorul de răspândire, răspândim ceea ce se află în stare și îmbinăm obiectul care este egal cu elementul pe care vrem să-l eliminam.

În continuare, vom folosi logica de mai sus pentru a crea metode pentru adăugarea și ștergerea elementelor din listă în aplicația noastră, facem asta în blocul de cod de mai jos:

 return ( <Context.Provider value={{ lists, addToLists: (newItem) => setLists([...lists, newItem]), deleteFromList: (item) => removeList(item) }}> {children} </Context.Provider> ) } export default AppContext;

Aici, returnăm Context.Provider și acceptăm props copii, facem acest lucru pentru ca cealaltă componentă să poată accesa proprietățile pe care le transmitem în prop value, am inițializat obiectul lists pentru a le prelua în listele noastre, metoda addToList preia un parametru newItem pentru a adăuga liste noi la starea aplicației noastre, iar deleteFromList elimină sau șterge un articol din magazinul de liste.

Construirea componentei Listă

În această secțiune, vom construi componenta Listă folosind Grommet pentru componentele noastre UI și componentele stilizate pentru a stila unele părți ale UI. Mai întâi, creați un folder de componente în directorul nostru src al aplicației, apoi în folderul de componente, creați un nou fișier List.js și în interiorul acestuia, scrieți codul de mai jos.

 import React from "react"; import styled from "styled-components"; import { Card, CardBody, Box, Text, Button } from "grommet"; function List(props) { return ( <StyledDiv> <Card> <CardBody className="card_body"> <Box direction="row" className="item_box"> <Text className="text">{props.list}</Text> <Box className="button_box"> <Button onClick={props.deleteList.bind(this, props.list)} className="button" > Delete </Button> </Box> </Box> </CardBody> </Card> </StyledDiv> ); } export default List;

În codul de mai sus, am importat mai întâi componentele Card, CardBody, Box, Text și Button din grommet, apoi am creat o componentă List pentru a prelua recuzită, folosind componente Grommet am creat o componentă card cu un buton de ștergere care va fi adăugat automat la o listă. Următorul este să stilăm componenta noastră de mai jos:

 const StyledDiv = styled.div` .button { background-color: #8b0000; color: white; padding: 10px; border-radius: 5px; } .card_body { padding: 20px; margin-top: 20px; } .item_box { justify-content: space-between; } .text { margin-top: auto; margin-bottom: auto; } `;

Odată ce facem cele de mai sus, componenta noastră ar trebui să arate ca imaginea de mai jos.

Construirea componentei de afișare a listei

Această componentă afișează toate listele pe care le-am adăugat și, de asemenea, generează automat un buton de ștergere de îndată ce este adăugată o nouă listă.

 import React from "react"; import List from "./List"; import { Context } from '../context/AppContext'; function ListDisplay() { return ( <Context.Consumer> {(context) => ( <div className="container"> {context.lists.length ? context.lists.map((list, id) => ( <List key={id} list={list} deleteList={context.deleteFromList} /> )) : null } </div> )} </Context.Consumer> ); } export default ListDisplay;

În această componentă, am creat o funcție ListDisplay și am împachetat-o ​​folosind Context.Consumer din componenta noastră appContext , apoi folosind un div pentru eticheta containerului nostru, am destructurat metodele list și deleteList din contextul aplicației, făcând acest lucru putem fi capabili pentru a le trece drept recuzită. Apoi, mapăm lists pentru a returna o nouă listă, pe care o putem folosi în construirea unei singure liste, pasând obiectul returnat ca elemente de recuzită componentei List .

Componenta noastră ar trebui să arate astfel, cu liste adăugate:

Componenta NavBar

Această componentă va fi cea mai mare parte a aplicației noastre, aici vom include componenta noastră folosind Context.Consumer și, similar celorlalte componente ale noastre, vom face stil cu componente stilizate pentru stil. Să construim această componentă mai jos.

 import React, { useState } from "react"; import { Heading, Form, TextInput, Button } from "grommet"; import styled from "styled-components"; import { Context } from '../context/AppContext'; function Navbar() { const [value, setValue] = useState(""); return ( <Context.Consumer> {store => ( <StyledDiv className="container"> <Heading className="title">Grommet List App</Heading> <Form onSubmit={() => store.addToLists(value)} className="form-group"> <TextInput className="form" value={value} type="text" onChange={(e) => setValue(e.target.value)} placeholder="Enter item" /> <Button type='submit' className="button">Add to List</Button> </Form> </StyledDiv> )} </Context.Consumer> ); } const StyledDiv = styled.div` .button { margin-top: 10px; background-color: purple; color: white; padding: 10px; border-radius: 5px; } `; export default Navbar;

În primul rând, pentru a accesa proprietățile din furnizorul de context al aplicației, am împachetat componenta noastră într-o componentă Context.Consumer . Apoi, am adăugat o etichetă Heading de la Grommet și apoi am creat un formular de intrare pentru adăugarea listelor noastre utilizând metoda addToList care preia un parametru de valoare (în cazul nostru valoarea este intrarea utilizatorului). Nu în ultimul rând, am adăugat un buton Trimitere pentru a gestiona trimiterea formularului.

Odată făcută corect, aplicația noastră ar trebui să arate astfel:

Concluzie

În acest articol, am aflat despre Grommet, o bibliotecă de componente având în vedere capacitatea de răspuns și accesibilitatea. De asemenea, am trecut prin procesul de creare a unei aplicații pentru componenta de preț folosind Grommet și o aplicație de listă. Distrați-vă folosind Grommet pentru componentele dvs. și nevoile de UI pentru următoarea aplicație React. Codul pentru aplicația Grommet list poate fi găsit pe Codesandbox și componenta de preț poate fi găsită aici.

Resurse

• Grommet docs
• O introducere în Grommet
• Introducere în API-ul de context React