Не изобретайте велосипед, используйте надежную библиотеку компонентов, чтобы запустить свое следующее приложение React

Когда я начинаю новый проект React, я всегда стараюсь сэкономить время. У меня в голове есть идея, и я просто хочу заняться программированием. Я не хочу тратить часы на создание компонентов пользовательского интерфейса, кодирование CSS, написание анимации, выбор цветовой темы.

Именно по этой причине я большой поклонник работы с Tailwind. Это ускоряет мои проекты. Но иногда мне нужно больше, чем просто CSS-фреймворк - мне нужны готовые компоненты. В этих случаях я обращаюсь к Chakra UI.

Chakra UI - это простая, модульная и доступная библиотека компонентов, которая дает вам все строительные блоки, необходимые для создания ваших приложений React.

Примечания на скале

Быстрый и грязный. Вот семь причин, по которым вам следует использовать Chakra UI в своем следующем проекте.

  • Он построен с использованием TypeScript
  • Он поддерживает рендеринг на стороне сервера
  • Он соответствует спецификации WAI-ARIA для доступности.
  • Это легко настраивается
  • Это активный проект с более чем 7000 звезд на Github.
  • Имеет отличную документацию
  • В нем есть все необходимое для начала работы - средства ввода, аккордеоны, значки, всплывающие подсказки и т. Д.

Как Frontend-разработчик я считаю, что доступность зачастую остается позади. Начав свой проект на основе надежных и доступных компонентов, вы с большей вероятностью создадите онлайн-интерфейс, который понравится каждому.

Начиная

Установить и начать работу с Chakra не может быть проще. Сначала устанавливаем Chakra с помощью пряжи (или npm).

yarn add @chakra-ui/core

Затем, поскольку пользовательский интерфейс Chakra использует эмоцию (CSS в библиотеке JS), нам нужно установить его одноранговые зависимости.

yarn add @emotion/core @emotion/styled emotion-theming

Затем мы можем настроить нашу настраиваемую тему, чтобы немного настроить пользовательский интерфейс.

import { theme } from "@chakra-ui/core";
// we can customize the "brand" color
const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
};

Затем мы можем обернуть все наше приложение нашей темой.

import React from "react";
import ReactDOM from 'react-dom';
import { ThemeProvider } from "@chakra-ui/core";
import App from './App';
ReactDOM.render(
  <ThemeProvider theme={customTheme>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Наконец, мы можем использовать компоненты пользовательского интерфейса Chakra в нашем приложении.

import { Box } from "@chakra-ui/core";
<Box bg="tomato" w="100%" p={4} color="white">
  This is the Box
</Box>

Какие компоненты предлагает Chakra?

Chakra предлагает большое количество высококачественных компонентов React. Для краткости упомянем лишь некоторые из них.

Компоненты ввода

Chakra предлагает множество компонентов ввода, включая ввод текста, ввод чисел, переключатели, флажки, выбор и переключение вводов.

Компоненты макета

Когда дело доходит до форматирования и компоновки вашего приложения, Chakra всегда готов помочь. Вы можете использовать их компоненты Сетка и Flex для организации вашего контента, а их компонент Стек - для разделения ваших компонентов.

Вы также можете использовать компонент Chakra Вкладки, чтобы разделить ваши представления на несколько экранов. Мне нравится использовать компонент Панировочные сухари, чтобы упростить маршрутизацию между разными страницами.

Чего не хватает?

Chakra не дает нам всего необходимого для создания сложных веб-приложений.

Одно примечательное признание библиотеки - полное отсутствие средства выбора даты. Вы можете использовать встроенное средство выбора даты HTML или выбрать другую библиотеку React. У меня был хороший опыт работы с ReactDayPicker в прошлом.

Я не виню Чакру в том, что она пропустила Day Picker из библиотеки. Их сложно построить, они привередливы и имеют множество крайних случаев. Кроме того, библиотеки, содержащие DatePickers, часто в конечном итоге включают другие зависимости в ваш проект (момент или дата-fns).

Какие есть альтернативы?

Ant-Design предлагает компоненты React корпоративного уровня. Вам также может быть интересно использовать постоянно популярный Material-UI. Если вы создаете настольное приложение, вам также может быть интересно попробовать Blueprint JS.

Подводя итоги

Я считаю использование библиотек компонентов очень полезным для проверки моих идей. Намного легче начать работу над проектом, когда мне не нужно беспокоиться об игре с CSS.

Сэкономьте свое время, не изобретая велосипед, и начните свой следующий проект React с Chakra UI. Вы не пожалеете.