Взгляд исследователя на стильную и доступную библиотеку компонентов пользовательского интерфейса для приложений React.
Привет всем! Сначала немного предыстории.
Я работаю с React чуть больше года и провожу большую часть своего времени, изучая удивительные способы организации и представления информации в Интернете. Да, я энтузиаст пользовательского интерфейса, у меня есть своего рода одержимость чистыми пользовательскими интерфейсами.
23 декабря 2021 года я обнаружил кое-что, что мне было действительно интересно, и мне захотелось попробовать. Эта серия будет путешествием по моему опыту создания приложения с нуля до конца.
Немного о UI библиотеке
Chakra UI — это доступная и простая в работе библиотека компонентов для приложений React с некоторыми хорошими встроенными функциями, такими как переключение темного и светлого режимов, компоненты, совместимые с WAI-ARIA, и поддержка компоновки любых компонентов. Таким образом, я был весьма склонен попробовать это.
Проработав около двух с половиной лет с Bootstrap, а затем некоторое время с Angular Material, я подумал, что неплохо было бы попробовать свои силы и с этим фреймворком.
Но что на нем построить?
Вы просто не можете просто создать классный новый фреймворк и использовать его, не задумываясь о том, что вы хотите с его помощью построить. Крутые кнопки, броские цвета и все готовые вещи — это хорошо, но для чего мы это используем? Какие данные мы собираемся представить в такой классной форме?
Моей первой мыслью было найти какой-нибудь удобный и бесплатный REST API для использования во внешнем интерфейсе. Мои требования — он должен быть простым, легкодоступным и должен быть посвящен теме, с которой интересно работать.
Покопавшись в Интернете несколько часов, я наткнулся на TMDB. Это курируемая сообществом база данных фильмов, телешоу и многого другого. С более чем миллионом записей о том, что смотреть, и щедро предоставленным бесплатным API, это был легкий выбор.
Итак, мы создаем простой клон сайта с удаленными более сложными функциями, такими как управление пользователями и списки наблюдения. Просто кое-что, чтобы поиграть и попробовать кое-что.
Настройка проекта.
Я буду использовать Visual Studio Code в качестве редактора кода для этого проекта. Мы создадим очень стандартное приложение create-react-app для базового шаблона. Нам понадобится установленный node.js для настройки проекта. Мы используем текущую стабильную версию 16, которая поставляется с npm версии 8. Но все, что выше версии 14, должно работать нормально.
Шаг 1: Создайте приложение React.
npx create-react-app tmdb-clone-chakra
Здесь мы используем средство запуска пакетов npx, которое поставляется с npm v5.6 и выше.Это настроит наш проект для разработки со всеми позаботились о настройке разработки. Как только процесс завершится, у нас в руках будет приложение, с которым можно поиграть. Структура папок должна выглядеть примерно так:
(Необязательно) Шаг 2. Очистка шаблона.
Отсюда мы можем удалить некоторые вещи, которые нам не понадобятся для этого проекта, если захотим. Это будут файлы, выделенные на изображении выше. После удаления файлов нам также потребуется удалить их импорт из файлов index.js и App.js соответственно.
В конце у нас должны остаться следующие два файла в нашей папке src.
Теперь мы можем запустить npm start в корневом каталоге, чтобы запустить сервер разработки, который должен запустить наше приложение в http://localhost:3000. В качестве альтернативы, если вы используете yarn в качестве менеджера пакетов, вы должны запустить yarn start.Если мы перейдем по ссылке, нам будет представлен очень белый и очень обыденный пустой экран.
Шаг 3: Установка необходимых пакетов.
Интерфейс чакры.
Следуя шагам, описанным в руководстве по create-react-app в документах пользовательского интерфейса Chakra, мы запускаем следующую команду в нашем корневом каталоге, чтобы установить необходимые пакеты в нашем проекте в качестве зависимостей:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
Нам также потребуются следующие пакеты в нашем проекте в дополнение к пользовательскому интерфейсу Chakra.
axios— для связи с API. Мы могли бы использовать встроенный Fetch API в JavaScript, но axios делает нашу жизнь намного проще, тем более что мы не фокусируемся на части API для этого проекта.react-query— Оболочка на основе хука вокруг axios для обработки выборки и кэширования данных нашего API.react-router-dom— Для управления маршрутизацией между разными страницами в нашем приложении. Мы используем последнюю версию 6 библиотеки.formik— библиотека для обработки всех наших форм в приложении. Мы могли бы управлять всеми нашими формами через состояния, но пакет сэкономил бы нам много времени и позволил бы больше сосредоточиться на изучении чакры.
Выполните следующую команду, чтобы установить вышеуказанные пакеты:
npm i axios react-query react-router-dom formik
На этом все, ребята, в следующей части мы рассмотрим, как настроить интерфейс Chakra, react-router-dom и react-query в нашем приложении и мы приступим к построению наших самых первых компонентов чакры.
