Создавайте повторно используемые компоненты React быстрее с помощью Aspect

Автор Клара Экекента✏️

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.

Оцените статью
devanswers.ru
Добавить комментарий