Автор Клара Экекента✏️
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.