Создавайте и настраивайте компоненты React без особых усилий с помощью AthenaJS — единого окна для проектирования компонентов React.
Что такое AthenaJS?
Разработка компонентов React в большом приложении может быстро превратиться в сложную задачу. Фокус и время, которые должны быть потрачены на детали компонента, вместо этого тратятся на навигацию по приложению или фильтрацию отладочных сообщений. Кроме того, бывает сложно разделить логику, принадлежащую разным частям приложения, что приводит к тому, что компоненты нельзя использовать повторно. Изоляция компонентов от контекста приложения может помочь разработчикам эффективно выполнять отладку и сосредоточиться на конкретных деталях. Применяя подход к разработке, основанный на компонентах, компоненты пользовательского интерфейса могут хорошо функционировать независимо и эффективно повторно использоваться.
Что делает AthenaJS?
AthenaJS — это мастерская визуализатора компонентов, которая позволяет разработчикам быстро разрабатывать и редактировать свои компоненты React изолированно, без интеграции кодовой базы.
Простота в использовании. AthenaJS — это автономное электронное приложение, которое позволяет разработчикам импортировать свои собственные компоненты React или создавать компоненты с нуля в редакторе кода приложения.
Динамический. Разработчики могут имитировать http-запросы, стилизовать и изменять функциональность своих компонентов в редакторах кода приложения. Изменения отражаются в рендерере одним нажатием кнопки!
Прототипы пользовательского интерфейса.Разработчики могут создавать прототипы пользовательского интерфейса и сравнивать компоненты из своей библиотеки, используя интуитивно понятную доску пользовательского интерфейса с помощью перетаскивания.
Разработка компонента с нуля
Когда вы загружаете AthenaJS, первые функции, которые вы заметите, — это редакторы кода, которые вы можете использовать для редактирования компонентов или создания компонентов с нуля. Редактор JSX содержит оператор возврата компонента, а тело содержит все остальное (перехватчики, функции и т. д.). Нажмите «Обновить», чтобы просмотреть изменения в средстве визуализации компонентов. Сохраните свой прогресс, выбрав имя для вашего компонента и сохранив его в библиотеке компонентов.
Загрузить и изменить компоненты
У вас уже есть компоненты в проекте и вы хотите их отредактировать? Откройте проводник и импортируйте любой компонент React! Наш парсер вставит код в редакторы, чтобы вы могли легко приступить к работе. Просто определите любые реквизиты, на которые опирается ваш компонент, в редакторе тела и обновите представление, чтобы ваш компонент работал в приложении!
Моделирование HTTP-запросов
Если ваш компонент делает http-запрос с помощью fetch, AthenaJS включает интеграцию fetch-motch, чтобы имитировать ответ. По умолчанию наши настройки перехватывают все запросы и отвечают объектом {data: ‘mock data’}, но эти настройки легко настраиваются!
Стили компонентов
AthenaJS включает интеграцию стилизованных компонентов. Стилизованные компоненты позволяют вам писать фактический код CSS для стилизации ваших компонентов, поэтому вы можете быстро и легко приступить к работе! Объявите переменную вашего стилизованного компонента в редакторе тела и напишите CSS или скопируйте код из вашего файла CSS, чтобы быстро стилизовать ваш компонент.
Сохранение и экспорт компонентов
Ваши компоненты будут сохраняться между сеансами, поэтому вы можете легко продолжить с того места, на котором остановились, с помощью функции «Сохранить библиотеку». Визуализируйте любые из ваших компонентов и внесите в них изменения, удалите их из своей библиотеки или экспортируйте их в виде файла jsx, чтобы легко интегрировать разрабатываемые вами компоненты в свои проекты React.
Сравните время рендеринга компонентов
Любопытно, какие компоненты могут стать узким местом в вашем приложении? Каждый раз, когда вы визуализируете новый компонент, время рендеринга фиксируется с помощью API React Profiler. Время рендеринга можно добавить в гистограмму одним нажатием кнопки, чтобы легко сравнивать время рендеринга для разных компонентов.
Интерактивная доска пользовательского интерфейса
После того, как вы создадите библиотеку компонентов, вы сможете легко создавать прототипы пользовательских интерфейсов с помощью интерактивной доски пользовательского интерфейса с помощью перетаскивания. Область доски можно сохранить в виде снимка экрана в папке загрузок, нажав кнопку снимка экрана в верхней правой части экрана. Это отличный инструмент для прототипирования пользовательского интерфейса, который упрощает объединение компонентов для создания целостного пользовательского интерфейса в приложении.
Одним из наших любимых применений этого инструмента является сравнение похожих компонентов. Не знаете, какая панель навигации или кнопка вам больше нравится? Добавьте их на доску и сравните их бок о бок!
Документация
Если вы заинтересованы в использовании AthenaJS для своего проекта React, посетите наш веб-сайт здесь, чтобы начать работу, и прочитайте нашу обширную документацию. Если вам нужны дополнительные разъяснения для конкретных случаев использования или вы нашли ошибку, отправьте сообщение о проблеме через Github.
Открытый исходный код и участие
AthenaJS — это инструмент разработчика с открытым исходным кодом, разработанный в рамках технологического ускорителя OSLabs. Если вы хотите внести свой вклад в AthenaJS, посетите репозиторий Github. Более подробную информацию о взносах можно найти в файле Contributing.md. Если вы хотите поддержать проект, рассмотрите возможность поставить ему звезду на Github, чтобы увеличить видимость, спасибо!
Команда:
Кристофер Лонг | ЛинкедИн | Гитхаб
Дэниел Чанг | ЛинкедИн | Гитхаб
Мэтью Фукудоме | ЛинкедИн | Гитхаб
Райан Мотамен | ЛинкедИн | Гитхаб
