Korzystanie z przelotki w aplikacjach React

Z biegiem lat ekosystem React rozrósł się wraz z wynalezieniem bibliotek, które pomagają w tworzeniu aplikacji React. W tym samouczku nauczymy się używać Grommet do tworzenia responsywnych, dostępnych i mobilnych komponentów dla aplikacji React. Przyjrzymy się bliżej jego podstawowym koncepcjom, niektórym przypadkom użycia i zbudujemy prosty przykład. Należy zauważyć, że Grommet jest oprogramowaniem typu open source z 6,9 tys. gwiazdek na GitHub.

Ten samouczek będzie przydatny dla czytelników, którzy są zainteresowani tworzeniem responsywnych komponentów w swojej aplikacji React przy użyciu Grommet. Ten artykuł wymaga podstawowej wiedzy na temat React i Styled-components.

Co to jest przelotka?

Grommet to biblioteka komponentów React, która szczyci się responsywnymi i dostępnymi komponentami kodu zoptymalizowanymi pod kątem urządzeń mobilnych. Czyni to za pomocą swoich komponentów — które są budulcem biblioteki. Obejmują one układy, typy, kolory, kontrolki, wejścia, wizualizacje Media i narzędzia. Wszystkie komponenty przelotek są wbudowane z myślą o dostępności i szybkości reakcji.

Grommet zapewnia wsparcie dla specyfikacji W3C, co czyni go ogromnym punktem pod względem dostępności. Zapewnia również potężne motywy i narzędzia, które pozwalają dostosować kolor, typ, elementy składowe i wymagania dotyczące układu zgodnie z potrzebami projektu.

Niektóre popularne alternatywy dla Grommet obejmują tailwindcss i styled components, chociaż bardzo popularne wśród programistów, każdy framework różni się podejściem do tworzenia aplikacji. Grommet to platforma mobilna, dostępna, responsywna i motywy po wyjęciu z pudełka, która obsługuje W3C w celu łatwego tworzenia aplikacji React, podczas gdy Tailwind CSS jest wysoce konfigurowalną i użytkową platformą, która umożliwia programistom tworzenie aplikacji bez ograniczeń CSS, takich jak jego zasady kaskadowe. Styled-components mają na celu pomóc programistom w pisaniu komponentów React wielokrotnego użytku, umożliwiając nam pisanie kodu CSS w naszym JavaScript za pomocą literałów obiektowych, a także używa komponentów jako konstrukcji stylizacji niskiego poziomu.

W naszym projekcie będziemy używać Grommet w naszych projektach ze względu na jego konfigurowalne komponenty, dostępność i właściwości motywu, których będziemy potrzebować, gdy przejdziemy dalej w tym samouczku.

Korzystanie z elementów przelotki

Grommet, podobnie jak wiele innych bibliotek komponentów, jest wstępnie skompilowany z niektórymi komponentami dla układów i motywów, takich jak komponenty Box, Card i Header. Aby użyć najpierw, musisz zainstalować pakiet przelotki za pomocą NPM lub przędzy, jak w bloku kodu poniżej.

 npm i grommet styled-components

Lub:

 yarn add grommet styled-components

Z powyższego widać, że zainstalowaliśmy również styled-components. Dzieje się tak, ponieważ Grommet używa styled-components do dostosowywania stylów w komponentach; wskazane jest instalowanie styled-components w swoich projektach.

Aby użyć komponentu Grommet w projekcie React, musisz zaimportować grommet . Zbudujmy składnik karty poniżej, aby wyjaśnić:

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

W powyższym bloku kodu najpierw zaimportowaliśmy Grommet i komponent Card z pakietu grommet do twojego pliku, a następnie opakowaliśmy nasz komponent za pomocą zaimportowanego komponentu Card . Style mogą być dodawane do komponentu Grommet jako obiekty, tak jak zrobiliśmy to do Button , lub mogą być stylizowane za pomocą styled-components.

Zobaczmy więcej przykładów komponentów Grommet, patrząc na komponenty Form.

Dlaczego przelotka?

Głównym celem Grommet jest poprawa doświadczenia programistów i szybsze budowanie aplikacji React dzięki jego mobilnym, dostępnym i responsywnym komponentom. Grommet płynnie dopasowuje projekt i przepływ pracy programisty, aby zapewnić bezproblemową obsługę, dzięki czemu każdy może zacząć z łatwością.

Grommet zapewnia również wsparcie dla czytników ekranu po wyjęciu z pudełka, warianty motywów, takie jak tryb ciemny, są pobierane z grommet po wyjęciu z pudełka i można je skonfigurować za pomocą właściwości themeMode w aplikacji React, jak poniżej.

 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;

W powyższym bloku kodu używamy właściwości themeMode , aby dodać tryb ciemny. Za pomocą operatora trójargumentowego sprawdzamy, czy strona jest w trybie ciemnym, możemy przełączyć ją w tryb jasny, następnie dodaliśmy przycisk do przełączania między trybem jasnym i ciemnym w naszej aplikacji, możesz sprawdzić tutaj demo na Codesandbox.

Grommet może również istnieć z innymi frameworkami i nie dodaje globalnego stylu, który wpłynie na istniejące komponenty w aplikacji React, funkcje i style mogą być interpolowane do literału obiektowego dla stylów. Grommet zawiera również komponenty Layout, które zawierają niektóre właściwości CSS, takie jak flexbox, a także przyjmuje wszystkie właściwości flexbox jako rekwizyty.

Grommet zawiera dużą bibliotekę ikon SVG, które są dostępne za pomocą komponentu <Icon /> , w przeciwieństwie do wielu innych frameworków. Przelotka zawiera komponenty do wizualizacji danych, takie jak wykresy słupkowe, mapy, a nawet śledzenie postępów.

Kilka firm używa dziś Grommet do tworzenia rzeczywistych aplikacji, w tym Netflix, IBM, Sony, Samsung, Shopify, GitHub i Twilio.

Budowanie komponentu cenowego za pomocą przelotki

Teraz znamy podstawy i podstawowe koncepcje Grommet, zamierzamy stworzyć komponent cenowy za pomocą komponentów Grommet, powinien zawierać komponenty takie jak Card, Box i Buttons z biblioteki Grommet.

Bez zbędnych ceregieli zacznijmy!

Konfigurowanie środowiska

Najpierw stwórzmy samą aplikację React, napisz poniższy blok kodu na swoim terminalu.

 create-react-app grommet-app

Powyższy kod utworzy samą aplikację React przy użyciu pakietu create-react-app. Przejdź do katalogu projektu.

 cd grommet-app

Następnie zainstaluj zależności, których potrzebujemy w naszym projekcie.

 yarn add grommet styled-components

Jeśli to zrobiłeś, uruchom serwer projektu za pomocą poniższego polecenia.

 yarn start

W tym projekcie potrzebowalibyśmy pojedynczego komponentu dla naszych kart i stylu ze styled-components.

Stwórzmy pierwszą kartę poniżej

 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> </> ); }

W powyższym bloku kodu używamy komponentu CardWrapper do owijania wszystkich naszych komponentów Card , a następnie dodaliśmy nowy komponent, CardContent , który jest używany do owijania całej naszej zawartości w każdym komponencie karty. Komponent CardButton jest komponentem przycisku, który jest używany na kartach w Grommet.

Następnie utwórzmy style dla naszej aplikacji za pomocą styled-components. Zapisz plik poniżej:

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

Powyżej zdefiniowaliśmy obiekt stylu dla naszego CardWrapper w naszej aplikacji. Dodajmy obiekty stylu dla naszego komponentu Karta powyżej.

 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%; } `;

Dodajmy więcej stylów do naszych komponentów.

 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%; `;

Gdy już to zrobimy, nasz projekt powinien wyglądać podobnie do poniższego obrazka.

Musimy dodać więcej kart do naszego komponentu, korzystając z poniższego bloku kodu.

 <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> </> ); }

Tutaj stworzyliśmy dwa dodatkowe komponenty karty, dodając własne niestandardowe komponenty z styled-components i użyliśmy obiektów stylów, które zdefiniowaliśmy powyżej, aby otoczyć nasze komponenty Grommet i poprawić stylizację.

Nasza ostateczna aplikacja karty cenowej powinna wyglądać jak na poniższym obrazku.

Korzystanie z przelotki w produkcji (aplikacja Building List)

Aby zobaczyć przykład, jak wyglądałoby użycie Grommet w innej aplikacji, zbudujemy prostą aplikację, która pozwoli użytkownikowi dodawać, przeglądać i usuwać elementy listy. Będziemy używać wbudowanego React Context API do zarządzania stanem aplikacji, Grommet dla naszych komponentów UI oraz styled-components do stylizacji naszej aplikacji.

Ponownie zainicjujmy aplikację React za pomocą poniższego polecenia.

 create-react-app list-app

cd do katalogu projektu

 cd list-app

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

W powyższym bloku kodu zainstalowaliśmy:

Budowanie kontekstu aplikacji

W aplikacji musimy udostępnić dane użytkownika w wielu komponentach, aby to osiągnąć wykorzystalibyśmy Context API. Dzięki temu możemy stworzyć kontekst aplikacji, który będzie zawierał listy i logikę dla naszej aplikacji. Możesz zapoznać się z tym artykułem, aby dowiedzieć się więcej o Context API.

Aby utworzyć kontekst naszej aplikacji, najpierw utwórz folder o nazwie context w katalogu src naszej aplikacji, a następnie utwórz plik o nazwie AppContext.js będzie to plik dla całego kontekstu naszej aplikacji, zróbmy to w poniższym bloku kodu:

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

W powyższym bloku kodu zaimportowaliśmy kontekstowe API hook createContext i useState hook wszystko z Reacta, używając komponentu useState , stworzyliśmy stan centralny dla naszej aplikacji, zrobiono to tak, aby komponent mógł pełnić rolę dostawcy kontekstu dla innych komponenty w naszej aplikacji. Następnie utworzyliśmy nową zmienną o nazwie removeList , która przyjmuje element jako parametr. Używając operatora rozsunięcia, rozkładamy to, co jest w stanie i dzielimy obiekt, który jest równy elementowi, który chcemy usunąć.

Następnie użyjemy powyższej logiki do stworzenia metod dodawania i usuwania elementów listy w naszej aplikacji, robimy to w poniższym bloku kodu:

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

Tutaj zwracamy Context.Provider i akceptujemy właściwości potomne, robimy to, aby inny komponent mógł uzyskać dostęp do właściwości, które przekazujemy we właściwości wartości, zainicjalizowaliśmy obiekt lists do przejęcia naszych list, metodę addToList przyjmuje parametr newItem , aby dodać nowe listy do stanu naszej aplikacji, a deleteFromList usuwa lub usuwa element z magazynu list.

Budowanie składnika listy

W tej sekcji zbudujemy nasz komponent List przy użyciu Grommet dla naszych komponentów UI oraz styled-components do stylizacji niektórych części naszego UI. Najpierw utwórz folder components w naszym katalogu src aplikacji, następnie w folderze components utwórz nowy plik List.js i wewnątrz niego napisz poniższy kod.

 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;

W powyższym kodzie najpierw zaimportowaliśmy komponenty Card, CardBody, Box, Text i Button z grommet, następnie stworzyliśmy komponent List do pobierania rekwizytów, używając komponentów Grommet stworzyliśmy komponent card z przyciskiem usuwania, który zostanie automatycznie dodany do listę. Następnie nadaj styl naszemu komponentowi poniżej:

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

Gdy wykonamy powyższe, nasz komponent powinien wyglądać jak na poniższym obrazku.

Budowanie komponentu wyświetlania listy

Ten składnik wyświetla wszystkie listy, które dodaliśmy, a także automatycznie generuje przycisk usuwania, gdy tylko zostanie dodana nowa lista.

 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;

W tym komponencie stworzyliśmy funkcję ListDisplay i opakowaliśmy ją za pomocą Context.Consumer z naszego komponentu appContext , następnie używając div dla naszego tagu kontenera, zdestrukturyzowaliśmy list i metody deleteList z kontekstu aplikacji, dzięki temu możemy być w stanie przekazać je jako rekwizyty. Następnie mapujemy lists , aby zwrócić nową listę, której możemy użyć do zbudowania pojedynczej listy, przekazując zwrócony obiekt jako rekwizyty do składnika List .

Nasz komponent powinien wyglądać tak z dodanymi listami:

Komponent paska nawigacyjnego

Ten komponent będzie stanowić większość naszej aplikacji, tutaj będziemy tworzyć nasz komponent za pomocą Context.Consumer i podobnie jak inne nasze komponenty, będziemy stylizować za pomocą stylizowanych komponentów do stylizacji. Zbudujmy ten komponent poniżej.

 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;

Po pierwsze, aby uzyskać dostęp do właściwości dostawcy kontekstu aplikacji, opakowaliśmy nasz komponent w komponent Context.Consumer . Następnie dodaliśmy tag Heading firmy Grommet, a następnie stworzyliśmy formularz wejściowy do dodawania naszych list za pomocą metody addToList , która przyjmuje parametr wartości (w naszym przypadku wartość jest danymi wejściowymi użytkownika). Na koniec dodaliśmy przycisk Prześlij do obsługi przesyłania formularza.

Po poprawnym wykonaniu nasza aplikacja powinna wyglądać tak:

Wniosek

W tym artykule dowiedzieliśmy się o Grommet, bibliotece komponentów z myślą o responsywności i dostępności. Przeszliśmy również przez proces tworzenia aplikacji komponentu cenowego za pomocą Grommet i aplikacji do tworzenia list. Baw się dobrze, używając Grommet dla swoich komponentów i potrzeb interfejsu użytkownika w następnej aplikacji React. Kod aplikacji Grommet list można znaleźć na Codesandbox, a komponent cenowy można znaleźć tutaj.

Zasoby

• Dokumentacja przelotki
• Wprowadzenie do Grommet
• Wprowadzenie do API kontekstowego React