Конвертер HTML → JSX
Приватность по умолчанию — работает полностью в вашем браузере
Слева вставьте HTML, справа получите готовый для React JSX. Конвертер заменяет class на className, for на htmlFor, строки inline style на объекты camelCase и самозакрывает void-элементы вроде img и input, чтобы JSX мог их разобрать.
Переименование атрибутов и событий
React использует имена DOM-свойств вместо HTML-атрибутов: tabindex становится tabIndex, readonly — readOnly, colspan — colSpan. Инлайновые обработчики переезжают с onclick на onClick, с onmouseover на onMouseOver и так далее для всех стандартных handler-ов. Двумя «HTML-only» переименованиями являются class в className и for в htmlFor, потому что оба слова зарезервированы в JavaScript.
Строки style в camelCase-объекты
JSX требует, чтобы inline style был объектом-литералом, и каждое свойство CSS пришло в camelCase. Строка padding: 1rem; background-color: #fff превращается в style={{ padding: '1rem', backgroundColor: '#fff' }}. Конвертер умеет в kebab-case → camelCase, вендорные префиксы (-webkit-, -moz-, -ms-) и CSS custom properties (--brand-color остаётся как есть, при необходимости ключ берётся в кавычки).
Приватность и пограничные случаи
Преобразование запускается одной JavaScript-функцией в этой вкладке. Ваш HTML не покидает браузер, что важно при переносе разметки с клиентскими данными. 14 void-элементов (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) выводятся самозакрывающимися, чтобы JSX их принял. Атрибуты data- и aria- сохраняются как есть, потому что они уже корректны в JSX.
Часто задаваемые вопросы
- Какие атрибуты переименовываются?
- class в className, for в htmlFor, tabindex в tabIndex, readonly в readOnly, colspan в colSpan, плюс camelCase для всех стандартных свойств DOM и on*-обработчиков.
- Как конвертируется строка style?
- Она режется по точкам с запятой, каждое CSS-свойство приводится к camelCase, итог выводится как JSX-объект с двойными фигурными скобками. Префиксы вендоров и custom properties сохраняются.
- Меняются ли data-* и aria-*?
- Нет. JSX принимает их в kebab-форме, поэтому конвертер их не трогает. К camelCase приводятся только стандартные DOM-атрибуты.
- Преобразуются ли HTML-комментарии?
- Да. <!-- комментарий --> превращается в {/* комментарий */}, чтобы намерение оставалось прежним и не ломалось JSX-парсингом.
- А скрипты и inline-обработчики?
- Конвертер переименовывает onclick в onClick и прочие хендлеры, тело функции при этом остаётся строкой. Обычно перед релизом её переписывают как настоящий React-callback.
- Куда-нибудь отправляется мой HTML?
- Нет. Преобразование полностью живёт в этой вкладке. Toova не видит, что вы вставили — никакой аналитики, никаких логов, ничего.