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

Конвертер HTML в JSX: для чего нужен

Вставьте HTML, и преобразование выполнится сразу: class и for становятся className и htmlFor, атрибуты вроде tabindex, maxlength и autocomplete переходят в camelCase, style становится объектом, булевы атрибуты остаются без значения, пустые теги получают косую черту, а комментарии превращаются в {/* */}. Встроенные события превращаются в функции со старым кодом в комментарии.

Атрибуты data- и aria- остаются как есть, а атрибуты SVG тоже преобразуются. Отметьте «создать компонент», чтобы получить готовую функцию с выбранным именем.

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

1. Вставьте HTML.
2. Отметьте «создать компонент», если нужна готовая функция.
3. Скопируйте JSX в свой проект React.

Когда использовать

• Перенос HTML-шаблонов в проекты React и Next.js.
• Преобразование SVG-значков в компоненты.
• Адаптация фрагментов, скопированных с других сайтов.

Частые вопросы

Что меняется при переходе от HTML к JSX?

class становится className, а for — htmlFor; атрибуты с дефисом и атрибуты событий переходят в camelCase (tabindex становится tabIndex, onclick — onClick); style становится объектом ({{ marginTop: 8 }}); теги без закрытия (img, br, input) получают косую черту; комментарии превращаются в {/* */}.

Меняются ли атрибуты data- и aria-?

Нет. data-* и aria-* в JSX остаются прежними, с дефисом.

А JavaScript внутри onclick?

Содержимое встроенных событий превращается в комментарий, потому что в React событие получает функцию. Перепишите действие как функцию компонента.

Работает ли SVG?

Да. Атрибуты SVG вроде stroke-width, fill-rule и xlink:href становятся strokeWidth, fillRule и xlinkHref.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты