Конвертер HTML в JSX
Вставьте HTML и получите чистый React JSX — class становится className, атрибуты в camelCase, строки style превращаются в объекты, а теги самозакрываются. Работает полностью в браузере. Бесплатно.
Всё работает в браузере — ваша разметка никогда не покидает устройство.
1
О Конвертер HTML в JSX
Конвертер HTML в JSX превращает обычную HTML-разметку в готовый для React JSX в реальном времени. Он переименовывает class в className, а for в htmlFor, преобразует атрибуты kebab-case и атрибуты SVG в camelCase, конвертирует строки inline-стилей в объекты стилей JSX и самозакрывает пустые элементы вроде img и br — именно те правки, которые вы иначе делали бы вручную.
Вставьте фрагмент, целый раздел страницы или разметку, экспортированную из инструмента дизайна, и панель JSX обновляется по мере ввода с подсветкой синтаксиса. Дополнительная обёртка превращает результат в именованный функциональный компонент, поэтому он сразу встраивается в проект React без дополнительной правки.
Конвертер полностью работает на стороне клиента: ваша разметка преобразуется JavaScript-кодом в вашем браузере и никогда не покидает устройство, что делает его безопасным для использования с проприетарными шаблонами и внутренними страницами.
Как использовать Конвертер HTML в JSX
- Вставьте HTML в левую панель или нажмите «Пример», чтобы загрузить образец.
- Наблюдайте, как панель JSX обновляется мгновенно по мере ввода или редактирования.
- Включите «Обернуть в компонент» и задайте имя компонента, если хотите получить готовый функциональный компонент.
- Нажмите «Копировать», чтобы получить JSX, или «Скачать», чтобы сохранить его как Component.jsx.
- Используйте «Очистить», чтобы сбросить обе панели и преобразовать другой фрагмент.