ReacType — это настольный инструмент прототипирования для создания кода приложения в интерфейсе перетаскивания. Он автоматически создает код в JS, Next JS или Gatsby на основе того, что вы создали в песочнице. Этот код в выбранном вами формате можно экспортировать и вставить прямо в ваш любимый редактор кода. Затем вы добавляете детали. Это так просто, что позволяет разработчику создавать прототипы приложений и не тратить время на воссоздание базы кода с нуля. ReacType.io
React продолжает оставаться одной из самых популярных интерфейсных технологий. Для многих full-stack разработчиков опыт работы с React обязателен. Понятно, что существует множество инструментов, помогающих младшим разработчикам начать создавать приложения React, но как насчет более опытных разработчиков, которым нужен инструмент, чтобы пройти стадию прототипирования и перейти к тому, что они любят больше всего — кодированию?!
Инструменты прототипирования должны учитывать свою аудиторию помимо основного набора функций и учитывать целостный опыт разработчиков. Эта философия была основной движущей силой нашей команды при создании ReacType v14. Мы хотели более интуитивно понятное, чистое рабочее пространство для пользователей ReacType, оснащенное функциями, соответствующими их конкретным потребностям.
В версии 14 мы улучшили и оптимизировали пользовательский интерфейс с учетом лучших практик UX-дизайна. Пользовательский интерфейс был переработан, чтобы разработчики впервые столкнулись с просторной, не загроможденной средой — вспомните Мари Кондо для прототипирования. Но где особенности? Соответствующие окна инструментов реагируют на действия пользователя — сразу же становятся доступными, когда они вам нужны, и аккуратно спрятанными, когда вы закончите. Компоненты React рендерятся в компактном пакете в песочнице. Форматирование было стандартизировано, поэтому, когда пользователь вкладывает компоненты друг в друга, иерархия становится ясной. Все это с улучшенной маркировкой, улучшенной общей читабельностью и навигацией.
Это здорово, но у нас есть еще что рассказать, поэтому давайте углубимся в то, что еще включено в эту последнюю версию.
Как упоминалось ранее, наша команда внесла некоторые изменения в исходную среду сборки ReacType, с которой столкнулись пользователи. Чистое открытое пространство дает вам ясность для мозгового штурма вашего следующего приложения, не перегружая ваше поле зрения. Когда вы будете готовы, эти инструменты быстро появятся в поле зрения благодаря интерактивному стилю. Слева находится индикатор вкладки — наведите на него курсор, чтобы получить доступ к перетаскиваемым тегам элемента HTML. Перетащите их с левой панели и поместите в песочницу, чтобы начать работу, реализованную с помощью библиотеки React DnD. Мы обновили масштаб, форматирование и стиль тегов и компонентов этих элементов в тестовой среде для большей удобочитаемости. Когда вы будете готовы, перейдите на нижнюю панель инструментов для дополнительных параметров настройки и создания.
Там можно найти все, что вы хотите изменить в своем прототипе — от создания собственных компонентов до назначения контекста состояния.
Мы особенно рады новой возможности назначать слушателей событий!
Здесь вы можете выбрать из списка общих событий, назначить их элементу и даже указать имя функции, которая будет вызываться при возникновении события. Не умеете называть? Не беспокойся! Просто оставьте его, и ReacType автоматически применит стандартное имя. Все эти изменения мгновенно отражаются с правильным синтаксисом в окне предварительного просмотра кода внизу, если вы хотите поближе взглянуть на свой прогресс. Передумать? Нет проблем — просто нажмите на соответствующий элемент, а затем выберите «удалить прослушиватель» в окне настройки. Здесь у вас есть свобода делать ошибки и играть, не повторяя свои шаги и не изменяя жесткий код.
Кроме того, мы изменили некоторые кнопки быстрого доступа, чтобы обеспечить большую скорость прототипирования для разработчиков, которые спешат. Теперь вы можете немедленно принять изменение, которое будет немедленно отражено в среде песочницы с помощью кнопки удаления, встроенной в каждый компонент и элемент. Выделите цель, нажмите «x», и она исчезнет.
С этими новыми изменениями и настройками также важно отметить, что мы обновили наши окна предварительного просмотра, чтобы они обновлялись в режиме реального времени. Так что независимо от того, смотрите ли вы предварительный просмотр в браузере, дерево иерархии компонентов или предварительный просмотр кода, будьте уверены, вы увидите текущее состояние вашего приложения с почти нулевой задержкой.
Хотя ReacType v14 направлен на удовлетворение потребностей опытных разработчиков, мы понимаем, что каждый должен с чего-то начинать. Если вы только начинаете свое путешествие по React, мы включили всплывающее окно с учебным пособием, чтобы вы могли ссылаться на нашу документацию при создании своего приложения. Просто разместите его там, где хотите, и продолжайте строить!
Это всего лишь несколько основных моментов из нашей последней версии. Мы приглашаем вас посмотреть своими глазами, что еще доступно для удовлетворения ваших потребностей в прототипировании — просто перейдите по ссылке ниже и попробуйте!
Мы хотим, чтобы каждый имел то, что ему нужно, когда ему это нужно. Вот что такое ReacType v14!
Удачного кодирования!
Соавторы и соавторы ReacType 14.0
