Введение в создание приложения React с помощью Grommet

Я хватаюсь за любую возможность включить стиль в проект. Теперь, когда пришло время создать полномасштабное приложение React в качестве младшего разработчика, этот интерес к стилю все еще жив и здоров. В процессе поиска библиотек пользовательского интерфейса React для включения в приложение моей команды я наткнулся на недавно созданную библиотеку пользовательского интерфейса, известную как Grommet.

Grommet, позиционирующий себя как фреймворк, основанный на «реакции, который обеспечивает доступность, модульность, отзывчивость и тематику в аккуратном пакете», имеет очень гладкие, современные компоненты, которые любой может включить в существующий проект React.

Если вы хотите намочить ноги перед полным погружением, у Grommet также есть стартовое приложение, которое вы можете загрузить в свой браузер и поиграть с ним, чтобы понять функциональность нескольких компонентов, включая Grommet Box и Кнопка с люверсом

С точки зрения установки и использования Grommet процесс довольно прост:

  1. Оказавшись внутри своего приложения React в своем терминале, выполните приведенную ниже команду, чтобы установить пакеты Grommet:
npm install grommet grommet-icons styled-components --save

2. Затем выберите файлы .js, в которые вы хотите импортировать Grommet:

import React, { Component } from 'react';
+ import { Grommet } from 'grommet';

Примечание. Экспериментируя с Grommet, я заметил, что Grommet необходимо импортировать в начале каждого файла, с которым вы собираетесь его использовать. Когда я попытался импортировать его в свой родительский компонент (например, App.js), Grommet не был доступен для всех дочерних элементов файла приложения. Это может показаться или не быть очевидным / это может измениться со временем.

3. Втулка также должна быть включена в узел верхнего уровня в любом компоненте, в котором вы ее используете, чтобы она могла работать должным образом. Вот пример кода со страницы стартового приложения Grommet для демонстрации:

4. Вы можете настроить свой стиль, чтобы сопровождать теги Grommet объявлением, подобным приведенному ниже, над вашей функцией, которая отображает элементы JSX (в компонентах, в которые вы импортировали Grommet), если вы не хотите/делать еще не знаю, как настроить загрузчик css для анализа ваших файлов css. В этом случае вы должны поместить приведенный ниже стиль в этот отдельный файл.

Эта тема будет распространяться на все компоненты данного экземпляра Grommet. Однако Grommet отмечает, что если вы работаете с другой библиотекой, такой как Material UI, которая уже устанавливает стили в тегах с собственной типографикой, Grommet не сможет повлиять на эти стили. Однако, что хорошо в этом примечании, так это то, что Grommet МОЖЕТ работать с другими библиотеками. Мне еще предстоит изучить степень этого.

5. Для ЛЮБОГО из компонентов Grommet, которые вы хотите использовать, вам необходимо импортировать их в верхнюю часть выбранного файла .js, как показано ниже:

- import { Grommet } from 'grommet';
+ import { Box, Grommet } from 'grommet';

Наконец, есть еще несколько инструментов, которые могут помочь вам, когда вы экспериментируете с различными компонентами:

а) Storybook: в основном иллюстрирует, как работают все компоненты Grommet, и, хотя это не реальные сценарии применения, поможет вам понять, как работают компоненты.

б) Песочница с втулкой: Редактор песочницы позволяет вам играть с компонентами и их функциональностью, хотя, опять же, они не имеют сценариев реального приложения. Таким образом, когда у вас есть компонент, работающий так, как вы представляете в песочнице, мне будет проще реализовать его в моем приложении.

c) Slack Grommet:Grommet с радостью приглашает всех пользователей присоединиться к его Slack, чтобы вы могли публиковать любые вопросы, которые могут у вас возникнуть об использовании Grommet.

Хотя это только введение в Grommet (я учусь вместе с вами!), я рад видеть эволюцию Grommet и снова использовать его для будущих приложений.

Удачного стайлинга!