Автор Клара Экекента✏️
Aspect — это новый инструмент разработки, который позволяет создавать компоненты React практически в браузере. Он устраняет стресс, связанный с созданием и настройкой проекта React для приложений.
Aspect экономит время разработки, предоставляя приборную панель с функцией HTML drag-and-drop, которая значительно упрощает процесс создания компонентов React. Aspect также синхронизирует ваши проекты с кодовой базой и предоставляет возможность экспортировать их в виде zip-файла.
В будущей версии обещано множество дополнительных возможностей, например, поддержка таких библиотек, как MaterialUI и Tailwind CSS, а также Sketch и AdobeXD.
В этом руководстве мы покажем, как использовать Aspect для более быстрого создания многократно используемых компонентов. Мы создадим простую страницу товара, показанную ниже:
Перейти вперед:
- Начало работы
- Обзор пользовательского интерфейса проекта
- Создание представления
- Добавление элементов
- Создание родительского макета
- Создание панели навигации
- Создание продуктов
- Экспорт компонентов
Начало работы
Чтобы начать работу с Aspect, зарегистрируйтесь здесь.
Затем установите Aspect CLI глобально с помощью следующей команды:
npm install @metacode-inc/aspect -g
Как только вы зарегистрируетесь, Aspect создаст новый проект с пустым представлением для начала работы.
Обзор пользовательского интерфейса проекта
Прежде чем двигаться дальше, давайте вкратце рассмотрим пользовательский интерфейс проекта Aspect, чтобы лучше понять, как перемещаться и использовать инструмент.
Вот краткое описание различных разделов пользовательского интерфейса Aspect:
- Проект: Просмотр списка деталей вашего проекта, таких как ID продукта; здесь вы также можете генерировать, просматривать и синхронизировать вашу кодовую базу, используя API-ключ вашего проекта.
- ВИДЫ: Создавайте различные представления для своих проектов; дважды щелкните на представлении, чтобы изменить его название по умолчанию.
- СВОЙСТВА: Определите пользовательские свойства вашего проекта
- СОСТОЯНИЯ: Создавайте пользовательские состояния и задавайте условия для элементов проекта.
- ЭЛЕМЕНТЫ: Управление элементами в проекте и определение их иерархии
- CSS: Определите стиль вашего проекта; используйте быстрый макет для организации элементов; раздел CSS виден, когда раздел ELEMENTS развернут.
- + INSERT: добавление фильтра и добавление элементов в проекты.
Теперь, когда мы больше знакомы с возможностями Aspect, давайте поработаем над созданием страницы нашего продукта.
Создание представления
У нас уже есть представление, созданное Aspect. Чтобы создать новое представление, нажмите на символ + на вкладке VIEWS. Затем дважды щелкните на View2 и переименуйте его в «Product».
Добавление элементов
Теперь давайте добавим некоторые элементы в представление.
Создание родительского макета
Начнем с добавления родительского div
, нажав на + INSERT и выбрав div из выпадающего списка. При наведении курсора на представление должен появиться символ +. Это означает, что элемент был выбран. Щелкните правой кнопкой мыши на элементе и перетащите его, чтобы увеличить элемент до нужного размера.
Создание навигационной панели
Теперь, когда у нас есть родительский макет, давайте добавим еще один div
для навигационной панели. Повторите те же шаги, что и при добавлении родительского div
. Затем перейдите на вкладку CSS и установите ширину в 100%, а минимальную высоту в 63.
Полученный макет должен выглядеть следующим образом:
Далее давайте воспользуемся элементом ul
, чтобы добавить в проект несколько списков навигационной панели. Нажмите на INSERT, выберите ul и добавьте его к родительскому div
, div-0, опустив его на него.
Теперь добавьте три элемента списка li
в элемент ul
. В элементах li
добавьте элементы p
и «Home», «About» и «Products» к свойству text на вкладке PROPERTIES.
Добавьте текст к элементам p
, затем нажмите на первый макет на вкладке CSS > QUICK LAYOUT, чтобы добавить стилизацию. Выберите первый макет для отображения содержимого в строке.
Чтобы убрать символы пули, измените свойство list-style в элементе ul
на none. Добавьте черный фон, указав background-color #42a7f5 для div-0.
Затем выровняйте элементы и измените шрифт на белый, добавив margin-right 7px и цвет #fff для каждого элемента li
.
Создание продуктов
Теперь давайте создадим макет для товаров. Для описания товара мы будем использовать элемент p
. Затем создадим дочерний макет для продуктов.
Вставьте div
, а внутри него вставьте еще один div
и p
внутри div-1. Теперь измените свойство text у p-2 на «Products».
Чтобы придать стиль дочернему макету, нажмите на div-1 и перейдите на вкладку CSS > QUICK LAYOUT. Выберите второй макет и измените свойство width у div-2 на 100%. Ваш проект должен выглядеть следующим образом:
Затем вставьте еще один div
внутрь div-2 для размещения подробной информации о товаре. Внутри div-3 вставьте два элемента p
, один img
и одну button
. Измените свойство текста элемента p-3 на «Techno m16», а свойство текста элемента p-4 ** на **Цена: $200. Затем добавьте p
к кнопке и установите свойство text на «Добавить в корзину».
Теперь измените font-size всех элементов p
в div-3 на 12px и установите свойство align на center.
Установите свойство src изображения на https://tslnigeria.tv/wp-content/uploads/2021/05/mobile-phone.jpg
.
Затем щелкните на div-3 и нажмите Ctrl + D, чтобы продублировать div и создать div-4. Измените свойства text и src каждого элемента в div-4.
Теперь щелкните div-2, перейдите в CSS > QUICK LAYOUT и выберите первый макет.
У вас должен получиться результат, похожий на этот:
Экспорт компонентов
Мы закончили создание нашего компонентного пользовательского интерфейса с помощью конструктора Aspect UI, теперь давайте извлечем дизайн и синхронизируем его с нашей кодовой базой с помощью следующей команды:
aspect fetch --project <projectId> --out <outputDirectory> --key <apiKey>
Вы можете получить ID проекта и API ключ, нажав на название проекта в выпадающем списке Project.
N.B., <apiKey>
не генерируется по умолчанию, вам нужно будет нажать на кнопку Generate new API key.
После того, как дизайн будет успешно извлечен и синхронизирован, вы должны увидеть следующий результат:
Aspect сгенерирует файл component.tsx
и components.css
. Теперь вы можете импортировать и использовать представление в своих проектах.
Заключение
В этом руководстве мы показали, как использовать Aspect для сокращения времени разработки, связанного с созданием многократно используемых компонентов React.
Не стесняйтесь следовать шагам, описанным в этом руководстве, чтобы добавить больше возможностей в приложение.
Полная видимость производственных React-приложений
Отладка приложений React может быть сложной задачей, особенно когда пользователи сталкиваются с проблемами, которые трудно воспроизвести. Если вы заинтересованы в мониторинге и отслеживании состояния Redux, автоматическом выявлении ошибок JavaScript, отслеживании медленных сетевых запросов и времени загрузки компонентов, попробуйте LogRocket.
LogRocket — это как видеорегистратор для веб- и мобильных приложений, записывающий буквально все, что происходит в вашем React-приложении. Вместо того чтобы гадать, почему возникают проблемы, вы можете собрать данные и отчитаться о том, в каком состоянии находилось ваше приложение в момент возникновения проблемы. LogRocket также отслеживает производительность вашего приложения, предоставляя такие показатели, как загрузка процессора клиента, использование памяти клиента и многое другое.
Пакет промежуточного ПО LogRocket Redux добавляет дополнительный уровень видимости пользовательских сессий. LogRocket регистрирует все действия и состояние ваших хранилищ Redux.