Softonic

Конвертер HTML в JSX

Шаг 1 / 2

Преобразует: class в className, for в htmlFor, inline-стили в объекты JSX, самозакрывает пустые теги, удаляет HTML-комментарии.

Преобразовать в JSX

JSX похож на HTML, пока не перестаёт им быть: class это className, for это htmlFor, style это объект, а не строка, и каждый пустой тег должен закрываться сам. Вставьте HTML, и этот конвертер выдаст JSX, который компилируется с первой попытки, так что вы перенесёте маркетинговую страницу в компонент React, не тратя десять минут на охоту за ошибками компилятора.

Как преобразовать HTML в JSX

  1. 1

    Вставьте HTML

    Разметка одного компонента или целый фрагмент страницы.

  2. 2

    Преобразуйте

    Инструмент переименовывает атрибуты вроде `class`, `for` и `readonly` в написание JSX и превращает встроенные стили в объекты.

  3. 3

    Проверьте JSX

    Результат готов к вставке в файл `.jsx` или `.tsx`.

  4. 4

    Скопируйте и вставьте

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

Каждое отличие HTML от JSX, которое имеет значение

JSX это не HTML. Это выражение JavaScript, которое компилируется в вызовы React.createElement(), поэтому имена атрибутов следуют соглашениям JavaScript.

Конвертер автоматически выполняет самые частые переименования. Полный список ниже это справочник, который нужен при ручном написании JSX.

Переименования атрибутов

HTML JSX Примечания
class className class зарезервирован в JS
for htmlFor for зарезервирован
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Пространства имён с двоеточием уплощаются
aria-label aria-label ARIA сохраняет дефисы
data-* data-* Атрибуты данных сохраняют дефисы

Атрибут style

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Числовые значения без единиц измерения становятся пикселями; оставляйте строками проценты и значения без единиц, например flex.

Самозакрывающиеся пустые элементы

HTML допускает <br> и <input> без закрывающего тега. JSX требует <br /> и <input />, каждый элемент должен быть явно закрыт.

Комментарии

HTML-комментарии (<!-- -->) недопустимы в теле JSX. Этот конвертер удаляет их; если нужно сохранить заметку, напишите её сами в виде {/* Блок-комментарий JavaScript */}.

Булевы атрибуты

HTML: <input checked> (или <input checked="checked">)

JSX: <input checked={true} /> или просто <input checked />. Никогда не передавайте строку “true”.

Запасные ходы

  • Ненадёжные фрагменты HTML можно отобразить через dangerouslySetInnerHTML={{ __html: ... }}, намеренно некрасивый API, чтобы отпугнуть от использования.
  • Пользовательские атрибуты data-* остаются как есть; нестандартные атрибуты передаются дальше, но могут вызвать предупреждения React в режиме разработки.

Часто задаваемые вопросы

Атрибуты SVG, например stroke-width, должны быть в camelCase (strokeWidth) в JSX, и каждый тег должен закрываться сам. Конвертер самозакрывает пустые теги внутри SVG и переводит имена свойств в строках стилей в camelCase, но не переименовывает атрибуты SVG; замените stroke-width на strokeWidth вручную. Для отдельных иконок чище всего сохранить иконку как файл SVG и импортировать её как компонент через svgr.

Да, и JSX, и TSX используют className. Единственное исключение это dangerouslySetInnerHTML, где исходная HTML-строка сохраняет class, потому что вставляется в DOM как есть.

Нет. На выходе только фрагмент JSX, без обёртки export default function и без аннотаций типов. Вставьте его в свой файл .jsx или .tsx и добавьте props, типы и обёртку сами. class по-прежнему превращается в className, чего и ожидает TSX.

Они передаются без изменений. Конвертер не переименовывает обработчики событий, поэтому замените onclick на onClick, а строку на настоящую функцию, например onClick={() => doThing()}. Функцию doThing нужно определить в области видимости вашего компонента.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Шпаргалка по регулярным выражениям

Поисковый справочник регулярных выражений для JavaScript, PCRE2/PHP, Python re и .NET. Сравнивайте токены, синтаксис движков, якоря, группы, проверки и флаги.

Инструмент доступен на других языках