IT Market
Инструменты/Код/Документы/JSX в HTML онлайн — вернуть React в вёрстку
JSX → HTML

Конвертируйте JSX в HTML

Коротко об инструменте

JSX в HTML онлайн — вернуть React в вёрстку

Обратная задача возникает реже, но регулярно: кусок JSX нужно показать верстальщику, вставить в письмо, в шаблон Django или в статический лендинг, где React нет. Скопированный из компонента фрагмент туда не годится — браузер не понимает className и не применит style={{}}. Вставьте JSX в поле JSX Input, нажмите Convert, и в HTML Output получится обычная разметка с атрибутом class и строковым style. Всё считается локально в браузере. Смотрите также: перевести готовую вёрстку в JSX для React, вырезать теги и оставить чистый текст, раскодировать HTML-сущности в символы.

Как пользоваться

  1. Скопируйте фрагмент из return вашего компонента и вставьте его в поле JSX Input.
  2. Уберите фигурные вставки с переменными вроде {user.name}: конвертер их не вычисляет и оставит как текст.
  3. Нажмите Convert — className и htmlFor вернутся к class и for, а style={{}} свернётся в строку стилей.
  4. Проверьте HTML Output: свойства вида backgroundColor снова становятся background-color через дефис.
  5. Нажмите Copy и вставьте разметку в шаблон, письмо или статическую страницу.

Вопросы и ответы

Подставит ли конвертер значения переменных из фигурных скобок?

Нет. Здесь работают текстовые замены, а не сборка React, поэтому {user.name}, {items.map(...)} и тернарные выражения останутся в выводе как есть и сломают разметку. Замените их конкретными значениями до конвертации либо удалите блоки с логикой и оставьте только статическую часть фрагмента.

Что происходит с самозакрытыми тегами и ?

Они остаются в том же виде, слеш не убирается. Для браузера это не ошибка: в HTML5 запись валидна и обрабатывается как обычный br. Если правила вашего линтера или почтового шаблонизатора требуют строгий вид, уберите слеши поиском и заменой в редакторе.

Почему из результата пропал комментарий?

Конструкция {/* … */} — это способ писать комментарии внутри JSX, в HTML он бессмысленный, поэтому такие вставки вырезаются. Если комментарий нужен верстальщику, добавьте его в готовую разметку в привычном виде после конвертации.

Корректно ли переносятся стили с числами без единиц?

Не всегда. React сам дописывает px к числу, а здесь значение переносится буквально: style={{width: 200}} даст width:200 без единицы, и браузер такое правило проигнорирует. Пишите единицы явно в исходном JSX или дописывайте их в готовой строке стилей.

Чем это отличается от страницы HTML в JSX?

Направлением и целью. Туда вы идёте, когда вёрстка переезжает в React-проект, а сюда — когда фрагмент React нужно показать вне React: в письме, статической странице или серверном шаблоне. При переносе назад теряется всё динамическое: пропсы, обработчики и любые выражения в скобках.

Обрабатывается ли код на сервере?

Нет, все замены делает скрипт на вашей вкладке, содержимое полей никуда не передаётся и не сохраняется между перезагрузками. Именно поэтому конвертер работает и при выключенной сети, если страница уже открыта.

Примеры

Кнопка из компонента едет в письмо
До: Купить
После: Купить
Комментарий JSX убирается из вывода
До: {/* черновик */}Условия акции
После: Условия акции