Ao longo dos anos, o ecossistema React cresceu com a invenção de bibliotecas que ajudam no desenvolvimento de aplicativos React. Neste tutorial, aprenderemos a usar Grommet para desenvolver componentes responsivos, acessíveis e móveis para aplicativos React. Vamos dar uma olhada em seus conceitos principais, alguns de seus casos de uso e construir um exemplo simples. É importante observar que Grommet é um código aberto com 6,9k estrelas no GitHub .

Este tutorial será benéfico para leitores interessados ​​em desenvolver componentes responsivos em seu aplicativo React usando Grommet. Este artigo requer um conhecimento básico dos componentes React e Styled.

O que é Grommet?

Grommet é uma biblioteca de componentes React que se orgulha de componentes de código mobile-first responsivos e acessíveis. Ele faz isso por meio de seus componentes-que são os blocos de construção da biblioteca. Eles incluem layouts, tipos, cores, controles, entradas, visualizações de mídia e utilitários. Todos os componentes do ilhó são integrados com acessibilidade e capacidade de resposta em mente.

Grommet fornece suporte para especificações do W3C , o que o torna um grande ponto em termos de acessibilidade. Ele também fornece temas e ferramentas poderosos que permitem que você personalize sua cor, tipo, elementos de componentes e necessidades de layout de acordo com as necessidades do seu projeto.

Algumas alternativas populares para Grommet incluem tailwindcss e componentes estilizados , embora muito popular entre os desenvolvedores, cada estrutura difere na abordagem na construção de aplicativos. Grommet é mobile-first, acessível, responsivo e temas prontos para uso e tem suporte para W3C para fácil criação de aplicativos React, enquanto Tailwind CSS é uma estrutura altamente personalizável e utilitária que permite aos desenvolvedores construir aplicativos sem as restrições de CSS, como seu regras em cascata. Os componentes estilizados visam ajudar os desenvolvedores a escrever componentes React reutilizáveis, permitindo-nos escrever código CSS em nosso JavaScript usando literais de objeto e também usa componentes como construção de estilo de baixo nível.

Em nosso projeto, usaremos o Grommet em nossos projetos devido aos seus componentes personalizáveis, acessibilidade e propriedades do tema que precisaremos à medida que avançarmos neste tutorial.

Usando componentes de ilhó

O Grommet, como muitas outras bibliotecas de componentes, vem pré-construído com alguns componentes para layouts e temas, como componentes de caixa, cartão e cabeçalho. Para usar primeiro, você precisa instalar o pacote de ilhós usando NPM ou yarn, como o bloco de código abaixo.

  npm i componentes estilizados de ilhó  

Ou:

  yarn add grommet styled-components  

Do acima exposto, você pode ver que também instalamos componentes estilizados. Isso ocorre porque Grommet usa componentes estilizados para personalizar estilos em componentes; é aconselhável instalar componentes estilizados em seus projetos.

Para usar um componente Grommet em um projeto React, você precisa importar o grommet . Vamos construir um componente de cartão abaixo para explicar:

  import React from'react';
import {Grommet, Card} de'grommet'; função padrão de exportação GrommetExample () { Retorna (   Corpo  } hoverIndicator />  ); }  

No bloco de código acima, primeiro importamos Ilhó e o componente Cartão do pacote Ilhó para o seu arquivo, a seguir envolvemos nosso componente usando o componente Cartão que importamos. Os estilos podem ser adicionados a um componente Grommet como objetos, como fizemos com o Button ou podem ser estilizados usando componentes estilizados.

Vamos ver mais exemplos de componentes de ilhó observando os componentes de formulário.

Por que Grommet?

O objetivo principal do Grommet é melhorar a experiência dos desenvolvedores e criar uma maneira mais rápida de construir aplicativos React com seus componentes móveis, acessíveis e responsivos. O Grommet alinha perfeitamente um design e um fluxo de trabalho do desenvolvedor para criar uma experiência perfeita, tornando muito fácil para qualquer pessoa começar.

O Grommet também oferece suporte para leitores de tela prontos para uso, variantes de tema como o modo escuro são obtidos do grommet fora da caixa e podem ser configurados usando o prop themeMode em um React aplicativo, como abaixo.

  import React from"react";
import {Ilhó, Caixa, Botão, Título, escuro} de"Ilhó";
import {grommet} de"grommet";
const App=()=> { const [darkMode, setDarkMode]=React.useState (false); Retorna (    Alternância do modo escuro do ilhó   setDarkMode (! darkMode)} />   );
};
exportar aplicativo padrão;  

No bloco de código acima, estamos usando a propriedade themeMode para adicionar um modo escuro. Usando um operador ternário, verificamos se a página está no modo escuro, podemos alterná-la para o modo claro, a seguir adicionamos um botão para alternar entre o modo claro e escuro em nosso aplicativo, você pode verificar aqui uma demonstração em Codesandbox .

Grommet também pode existir com outras estruturas e não adiciona um estilo global que afetará os componentes existentes em seu aplicativo React, funções e estilos podem ser interpolados em um objeto literal para estilos. Grommet também possui componentes de Layout, que apresentam algumas propriedades CSS, como flexbox, ele também leva em todas as propriedades flexbox como adereços.

Grommet apresenta uma grande biblioteca de ícones SVG que são acessíveis usando o componente , ao contrário de muitos outros frameworks. Grommet apresenta componentes para visualização de dados, como gráficos de barras, mapas e até mesmo rastreadores de progresso.

Várias empresas usam o Grommet hoje para criar aplicativos do mundo real, incluindo Netflix, IBM, Sony, Samsung, Shopify, GitHub e Twilio.

Criação de um componente de preço com ilhó

Agora que conhecemos os conceitos básicos e centrais do Grommet, vamos criar um componente de precificação usando componentes do Grommet, ele deve apresentar componentes como Cartão, Caixa e Botões da biblioteca do Grommet.

Sem mais delongas, vamos começar!

Configurando seu ambiente

Primeiro, vamos criar um aplicativo React simples, escreva o bloco de código abaixo em seu terminal.

  create-react-app grommet-app  

O código acima criará um aplicativo React simples usando o pacote create-react-app . Mova para o diretório do projeto.

  cd grommet-app  

O próximo é instalar as dependências de que precisamos em nosso projeto.

  yarn add grommet styled-components  

Se você fez isso, inicie o servidor de projeto usando o comando abaixo.

  início do fio  

Para este projeto, precisaríamos de um único componente para nossos cartões e estilo com componentes estilizados.

Vamos criar o primeiro cartão abaixo

  import React from"react";
importar estilizado de"componentes estilizados"; função padrão de exportação GrommetCard () { Retorna ( <>   
 
   Básico  
 $ 588 
   
 500 GB de armazenamento 
   
 2 usuários permitidos 
   
 Envie até 3 GB 
  
  SAIBA MAIS  
    );
}  

No bloco de código acima, estamos usando o componente CardWrapper para envolver todos os nossos componentes Card ; em seguida, adicionamos um novo componente, CardContent que é usado para envolver todo o nosso conteúdo em cada componente do cartão. O componente CardButton é um componente de botão usado em cartões no Grommet.

A seguir, vamos criar estilos para nosso aplicativo usando componentes estilizados. Escreva o arquivo abaixo:

  const primaryGradient="gradiente linear (hsl (236, 72%, 79%), hsl (237, 63%, 64%))"; const CardWrapper=styled.div` display: flex; justificar o conteúdo: centro; alinhar-itens: centro; altura: conteúdo máximo; margem: 20px; @media all e (max-width: 1240px) { direção flexível: coluna; }
`;  

Acima, definimos um objeto de estilo para nosso CardWrapper em nosso aplicativo. Vamos adicionar objetos de estilo para nosso componente Cartão acima.

  const Card=styled.div  min-width: 380px; sombra da caixa: 3px-2px 19px 0px rgba (50, 50, 50, 0,51); border-radius: $ {(props)=& gt; (props.left?"6px 0 0 6px": props.right?"0 6px 6px 0":"6px")}; fundo: $ {(props)=& gt; (props.secondary===undefined?"#fff": primaryGradient)}; preenchimento: 25px 20px; altura: $ {(adereços)=& gt; (props.center?"520px":"480px")}; display: flex; justificar o conteúdo: centro; alinhar-itens: centro; @media all e (max-width: 1240px) { margin-bottom: 20px; raio da borda: 6px; altura: 480px; } @media all e (max-width: 420px) { largura mínima: 90%; } ;  

Vamos adicionar mais estilos aos nossos componentes.

  const CardButton=styled.div  largura mínima: 100%; preenchimento: 10px 15px; altura mínima: 50px; box-shadow: 1px 1px 0 rgba (0, 0, 0, 0,2), 0px 0px 2px rgba (0, 0, 0, 0,2); cor: $ {(props)=& gt; (props.secondary!==undefined?"#fff":"# 7c7ee3")}; fundo: $ {(props)=& gt; (props.secondary===undefined?"#fff": primaryGradient)}; alinhamento de texto: centro; margem superior: 25px; display: flex; alinhar-itens: centro; justificar o conteúdo: centro; peso da fonte: 600; tamanho da fonte: 16px; border-radius: 6px; ;
const CardContent=styled.div  largura: 100%; cor: $ {(props)=& gt; (props.secondary!==undefined?"#fff":"# 000")}; acolchoamento inferior: 10px; margin-bottom: 10px; borda inferior: 1.3px sólido #eee; alinhamento de texto: centro; ;
const Div=styled.div  min-width: 100%; ;  

Depois de fazer tudo isso, nosso projeto deve ser semelhante à imagem abaixo.

Precisamos adicionar mais cartões ao nosso componente usando o bloco de código abaixo.

   
 
   Premium  
 $ 788 
   
 75 GB de armazenamento 
   
 4 usuários permitidos 
   
 Envie até 5 GB 
  
  SAIBA MAIS  
   
 
   PRO  
 $ 1000 
   
 1 TB de armazenamento 
   
 Usuários ilimitados permitidos 
   
 Envie até 10 GB 
  
  SAIBA MAIS  
    );
}
 

Aqui, criamos mais dois componentes de cartão, adicionando nossos próprios componentes personalizados com componentes estilizados e usamos os objetos de estilo que definimos acima para envolver nossos componentes de Ilhó e melhorar o estilo.

Nosso aplicativo de cartão de preço final deve ser semelhante à imagem abaixo.

Usando Grommet na produção (aplicativo de lista de construção)

Para ver um exemplo de como seria usar o Grommet em outro aplicativo, vamos construir um aplicativo simples que permitirá ao usuário adicionar, visualizar e excluir itens da lista. Usaremos a API React Context embutida para gerenciar o estado do aplicativo, Grommet para nossos componentes de IU e componentes estilizados para estilizar nosso aplicativo.

Novamente, vamos inicializar um aplicativo react usando o comando abaixo.

  create-react-app list-app  

cd no diretório do projeto

  cd list-app  

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

No bloco de código acima, instalamos:

Construindo o contexto do aplicativo

No aplicativo, precisamos compartilhar os dados do usuário em vários componentes, para conseguir isso, faríamos uso da API de contexto. Com isso, podemos criar um Contexto de aplicativo que conteria as listas e a lógica de nosso aplicativo. Você pode verificar este artigo para saber mais sobre a API de contexto.

Para criar o contexto do nosso aplicativo, primeiro crie uma pasta chamada context no diretório src do nosso aplicativo, em seguida crie um arquivo chamado AppContext.js este será o arquivo para todo o contexto do nosso aplicativo, vamos fazer isso no bloco de código abaixo:

  import React, {createContext, useState} de'react';
export const Context=createContext ();
const AppContext=({crianças})=> { const [listas, setLists]=useState ([]); const removeList=item=> { deixe newLists=[... listas]; lists.map ((lista, id)=> { lista de retorno===item && newLists.splice (id, 1); }); setLists (newLists); }  

No bloco de código acima, importamos o gancho da API de contexto createContext e o gancho useState , todos do React, usando o componente useState , criamos um estado central para nosso aplicativo, isso foi feito para que o componente possa atuar como um provedor de contexto para outros componentes em nosso aplicativo. Em seguida, criamos uma nova variável chamada removeList que leva um item como parâmetro, usando o operador spread, estamos espalhando o que está no estado e juntando o objeto que é igual ao item que queremos remover.

A seguir, usaremos a lógica acima para criar métodos para adicionar e excluir itens de lista em nosso aplicativo, faremos isso no bloco de código abaixo:

  return (  setLists ([... lists, newItem]), deleteFromList: (item)=> removeList (item) }}> {crianças}  )
}
exportar AppContext padrão;  

Aqui, estamos retornando o Context.Provider e aceitando adereços filhos, estamos fazendo isso para que outro componente seja capaz de acessar as propriedades que passamos no valor prop, inicializamos o lists objeto para levar em nossas listas, o método addToList leva em um parâmetro newItem para adicionar novas listas ao estado do nosso aplicativo e o deleteFromList remove ou exclui um item do armazenamento de lista.

Construindo o componente da lista

Nesta seção, construiremos nosso componente List usando Grommet para nossos componentes de IU e componentes estilizados para estilizar algumas partes de nossa IU. Primeiro, crie uma pasta de componentes dentro do diretório src do nosso aplicativo, depois, dentro da pasta de componentes, crie um novo arquivo List.js e dentro dele, escreva o código abaixo.

  import React from"react";
importar estilizado de"componentes estilizados";
import {Card, CardBody, Box, Text, Button} de"grommet";
lista de funções (adereços) { Retorna (      {props.list}    Excluir       );
}
exportar lista padrão;  

No código acima, primeiro importamos os componentes Card, CardBody, Box, Text e Button do ilhó, a seguir criamos um componente List para receber adereços, usando componentes do Grommet criamos um componente do cartão com um botão de exclusão que será adicionado automaticamente a uma lista. O próximo passo é definir o estilo de nosso componente abaixo:

  const StyledDiv=styled.div` .button { cor de fundo: # 8b0000; cor branca; preenchimento: 10px; raio da borda: 5px; } .card_body { preenchimento: 20px; margem superior: 20px; } .item_box { justify-content: espaço entre; } .text { margem superior: automático; margin-bottom: auto; }
`;
 

Depois de fazer o acima, nosso componente deve ser semelhante à imagem abaixo.

Construindo o componente de exibição de lista

Este componente exibe todas as listas que adicionamos e também gera automaticamente um botão de exclusão assim que uma nova lista é adicionada.

  import React from"react";
importar lista de"./List";
importar {Context} de'../context/AppContext';
function ListDisplay () { Retorna (  {(contexto)=> ( 
 {context.lists.length? context.lists.map ((list, id)=> (  )): nulo } 
 )}  );
}
exportar ListDisplay padrão;  

Neste componente, criamos uma função ListDisplay e a envolvemos usando o Context.Consumer de nosso componente appContext , em seguida usando um div para nossa tag de contêiner, nós desestruturamos os métodos list e deleteList do contexto do aplicativo, fazendo isso, podemos passá-los como props. Em seguida, mapeamos através das listas para retornar uma nova lista, que podemos usar na construção de uma única lista, passando o objeto retornado como adereços para o componente Lista .

Nosso componente deve se parecer com isto com listas adicionadas:

Componente NavBar

Este componente será a maior parte do nosso aplicativo, aqui iremos empacotar nosso componente usando o Context.Consumer e, semelhante a nossos outros componentes, iremos estilizar com componentes estilizados para estilização. Vamos construir este componente abaixo.

  import React, {useState} de"react";
import {Heading, Form, TextInput, Button} de"grommet";
importar estilizado de"componentes estilizados";
importar {Context} de'../context/AppContext';
function Navbar () { const [valor, setValue]=useState (""); Retorna (  {loja=> (   Aplicativo de lista de ilhós  
 store.addToLists (value)} className="form-group">  setValue (e.target.value)} placeholder="Inserir item" />  Adicionar à lista    )}  );
}
const StyledDiv=styled.div .button { margem superior: 10px; cor de fundo: roxo; cor branca; preenchimento: 10px; raio da borda: 5px; } ;
exportar Navbar padrão;
 

Primeiro, para acessar as propriedades no provedor de contexto do aplicativo, envolvemos nosso componente em um componente Context.Consumer . Em seguida, adicionamos uma tag Heading do Grommet e, em seguida, criamos um formulário de entrada para adicionar nossas listas usando o método addToList que leva em um parâmetro de valor (no nosso caso o valor é a entrada do usuário). Por último, mas não menos importante, adicionamos um botão Enviar para lidar com o envio do formulário.

Depois de feito corretamente, nosso aplicativo deve ter a seguinte aparência:

Conclusão

Neste artigo, aprendemos sobre o Grommet, uma biblioteca de componentes com capacidade de resposta e acessibilidade em mente. Também passamos pelo processo de criação de um aplicativo de componente de precificação usando Grommet e um aplicativo de lista. Divirta-se usando o Grommet para seu componente e as necessidades de IU para seu próximo aplicativo React. O código para o aplicativo da lista Grommet pode ser encontrado em Codesandbox e o componente de preço pode ser encontrado aqui .

Recursos

• Documentos do Grommet
• Uma introdução ao Grommet
• Introdução à API de contexto do React