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 нужно определить в области видимости вашего компонента.

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

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 под чистый JavaScript, React или Vue: TypeScript, Babel, CSS или Sass, изображения, HtmlWebpackPlugin, dev-сервер и команда npm install.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Валидатор XSD

Проверьте XML-документ в соответствии с схемой XSD и выявите несоответствия между элементами и их типами, указав точные номера строк.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Конвертер размера файлов

Преобразуйте значения между байтами, КБ, МБ, ГБ, ТБ и двоичными единицами IEC (KiB, MiB, GiB, TiB), свободно сочетая десятичные и двоичные единицы.

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