Конвертируйте JSX в HTML
Коротко об инструменте
Обратная задача возникает реже, но регулярно: кусок JSX нужно показать верстальщику, вставить в письмо, в шаблон Django или в статический лендинг, где React нет. Скопированный из компонента фрагмент туда не годится — браузер не понимает className и не применит style={{}}. Вставьте JSX в поле JSX Input, нажмите Convert, и в HTML Output получится обычная разметка с атрибутом class и строковым style. Всё считается локально в браузере. Смотрите также: перевести готовую вёрстку в JSX для React, вырезать теги и оставить чистый текст, раскодировать HTML-сущности в символы.
Нет. Здесь работают текстовые замены, а не сборка React, поэтому {user.name}, {items.map(...)} и тернарные выражения останутся в выводе как есть и сломают разметку. Замените их конкретными значениями до конвертации либо удалите блоки с логикой и оставьте только статическую часть фрагмента.
Они остаются в том же виде, слеш не убирается. Для браузера это не ошибка: в HTML5 запись валидна и обрабатывается как обычный br. Если правила вашего линтера или почтового шаблонизатора требуют строгий вид, уберите слеши поиском и заменой в редакторе.
Конструкция {/* … */} — это способ писать комментарии внутри JSX, в HTML он бессмысленный, поэтому такие вставки вырезаются. Если комментарий нужен верстальщику, добавьте его в готовую разметку в привычном виде после конвертации.
Не всегда. React сам дописывает px к числу, а здесь значение переносится буквально: style={{width: 200}} даст width:200 без единицы, и браузер такое правило проигнорирует. Пишите единицы явно в исходном JSX или дописывайте их в готовой строке стилей.
Направлением и целью. Туда вы идёте, когда вёрстка переезжает в React-проект, а сюда — когда фрагмент React нужно показать вне React: в письме, статической странице или серверном шаблоне. При переносе назад теряется всё динамическое: пропсы, обработчики и любые выражения в скобках.
Нет, все замены делает скрипт на вашей вкладке, содержимое полей никуда не передаётся и не сохраняется между перезагрузками. Именно поэтому конвертер работает и при выключенной сети, если страница уже открыта.
До: Купить
После: Купить
До: {/* черновик */}Условия акции После: Условия акции
Оценка и фидбек помогают понять, что улучшать дальше.