Экспорт кода (HTML, React, Tailwind)

uxmagic.ai/dashboard/react-component-library

Что можно выгрузить#

• Один экран как HTML или как React-компонент.
• Целый проект как многоэкранный React-проект, собранный и доступный к скачиванию архивом.

Стилизация — Tailwind CSS, тема проекта выражена дизайн-токенами, поэтому код несёт ту же систему, что и холст.

Экспорт одного экрана#

1. Выделите экран.
2. Экспорт → Код.
3. Выберите HTML или React.
4. Скопируйте или скачайте.

Экспорт целого проекта#

Экспорт проекта выполняется фоновой задачей: он генерирует каждый экран, а затем собирает их в единую структуру проекта. Крупные проекты занимают больше времени; можно следить за прогрессом и скачать результат по завершении.

Каким получается код#

Это настоящий читаемый фронтенд-код: семантическая вёрстка, утилитарные классы Tailwind, токены темы для цвета и шрифтов и изображения, на которые он ссылается по адресам из хранилища ресурсов вашего проекта.

Два момента, которые стоит предусмотреть:

• Ресурсы по умолчанию лежат снаружи. Скачайте их в свой репозиторий до релиза, чтобы боевой сайт не зависел от адресов ресурсов UXMagic.
• Это фронтенд. Слоя данных, маршрутизации и управления состоянием нет — их вы подключаете в своём приложении.

Адаптивность#

Экспортированный код отражает тот экран, который вы выгрузили, на его ширине. Если вы делали отдельные мобильный и десктопный варианты, экспортируйте оба и сведите их на своём брейкпоинте. См. Адаптивные варианты и варианты под устройства.

Сразу в репозиторий#

Экспортированный код можно отправить прямо в GitHub, не скачивая, — см. Синхронизация с GitHub.