Учебное пособие по электронной коммерции и блогам, часть 3:
Библиотеки компонентов
Ничего себе, функциональный, созданный вручную, бесплатный веб-сайт всего за 20 минут 👏! Покажите себе немного любви к своей тяжелой работе и отметьте свой собственный репозиторий на GitHub ⭐️
(не стесняйтесь подписываться на мой Github и Star/смотрите также мой репозиторий)
(Посмотрите видеоверсию здесь!)
Несмотря на всю эту тяжелую работу, у нас все еще есть только базовый, готовый create-react-app с некоторыми незначительными правками. Чтобы ваш сайт выделялся, нам нужно добавить индивидуальный стиль и брендинг вместе с основными веб-компонентами, такими как панели навигации, кнопки, сообщения и формы, которые вы видите на большинстве веб-сайтов.
Наш большой кусок кода на данный момент мало что делает. Хотя можно написать все ваши страницы и виджеты с нуля, мы можем использовать готовые компоненты, чтобы сделать процесс разработки намного быстрее и проще, поскольку React — это библиотека на основе компонентов.
Давайте посмотрим на некоторые из этих библиотек, которые React рекомендует здесь.
Здесь вы можете увидеть множество бесплатных библиотек компонентов, а также несколько более продвинутых платных. Мне больше всего нравится Material-UI, который мы собираемся использовать в этом руководстве, но я определенно рекомендую потратить некоторое время на изучение других вариантов и поиск стиля, который вам подходит.
Мы также собираемся выпустить серию обзоров некоторых других библиотек компонентов, так что заходите поскорее!
Причина, по которой я люблю Material-UI, заключается в том, что он соответствует собственным рекомендациям Google по стилю для Интернета (Google, вероятно, хорошо представляет, что людям нравится на веб-сайтах), что означает, что пользователям будет удобно и уже знает, как ориентироваться и использовать ваш сайт.
Сам стиль довольно прост, и готовые компоненты будут очень похожи на компоненты, которые вы видите на собственных сайтах Google. Это довольно масштабный проект с более чем 50 000 звезд на Github, что означает, что поддержка сообщества для исправления ошибок и запросов функций является одной из лучших в списке.
Кроме того, документацию легко читать, а количество опций компонентов просто ОГРОМНОЕ! Это означает, что если вы застряли на чем-то или вам нужна дополнительная информация о том, как встроить какие-либо функции в свой сайт, вы можете напрямую перейти на их сайт и, возможно, выяснить, что вам нужно. С учетом сказанного давайте приступим к установке и использованию библиотеки.
Прежде всего, откройте окно терминала и перейдите в папку, в которой хранится ваш сайт, с помощью cd. Если вы используете npm, введите npm install @material-ui/core и нажмите Enter, если вы используете пряжу, как я, введите yarn add @material-ui/core и нажмите Enter.
После его установки вы можете увидеть данные о пакете и версии внутри вашего package-lock.json или yarn.lock с помощью быстрой команды + F.
Чтобы убедиться, что мы можем использовать все функции внутри Material-UI, нам также необходимо установить некоторые шрифты и значки. Типичные шрифты для Google и, следовательно, Material-UI относятся к семейству Roboto, поэтому давайте установим его так же, как мы установили основной пакет, введя либо npm install typeface-roboto --save, либо yarn add typeface-roboto, а затем установив значки с помощью npm install @material-ui/icons или yarn add @material-ui/icons.
Теперь, когда они установлены, мы можем импортировать компоненты из Material-UI внутри нашего приложения, поместив:
import ComponentName from '@material-ui/core/ComponentName
в верхней части любого файла, в котором вы хотите использовать этот компонент. Мы начнем выбирать наши компоненты и разрабатывать наш сайт в следующем уроке!
А пока посмотрите потрясающие значки, доступные здесь, и почувствуйте некоторые компоненты, которые мы будем использовать здесь.
