Конвертер HTML в JSX
Бесплатный онлайн-конвертер HTML в JSX. Вставьте разметку и мгновенно получите чистый React-JSX: className, htmlFor, camelCase-стили, самозакрывающиеся теги и безопасные комментарии — всё в браузере.
Что делает конвертер HTML в JSX?
Он превращает обычную HTML-разметку в JSX, который умеет рендерить React. Вставьте HTML в поле ввода — эквивалентный JSX появится в панели вывода и будет обновляться по мере ввода с небольшой задержкой.
Какие атрибуты переименовываются?
class становится className, for — htmlFor, tabindex — tabIndex, а прочие атрибуты через дефис вроде maxlength, colspan или stroke-width получают camelCase-имена React. Атрибуты data-* и aria-* остаются без изменений.
Как преобразуется атрибут style?
CSS-строка вида style="background-color: red; font-size: 12px" превращается в объект JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}, каждое CSS-свойство переводится в camelCase, а значение берётся в кавычки.
Как обрабатываются пустые элементы?
Элементы, которые не могут иметь детей — img, br, input, hr, meta, link и другие — нормализуются к самозакрывающемуся синтаксису: <img> становится <img />, как того требует JSX. Пустые div и span закрываются так же.
Что происходит с HTML-комментариями?
Они превращаются в комментарии JSX: <!-- note --> становится {/* note */}. Последовательности, способные прервать комментарий раньше времени, нейтрализуются, поэтому сгенерированный код всегда компилируется.
Как обрабатываются сущности и спецсимволы?
Сущности вроде & или © декодируются в реальные символы, затем фигурные и угловые скобки заново экранируются в безопасном для JSX виде, поэтому текст с { } или < отображается корректно и не ломает компонент.
Зачем нужна опция функционального компонента?
Она оборачивает разметку в готовый шаблон: function Component() { return ( ...ваш JSX... ) } вместо «голого» JSX. Включите её, чтобы вставить фрагмент сразу в файл React.
Мой HTML куда-то отправляется?
Нет. Разбор выполняется полностью в браузере встроенным DOMParser. На сервер не уходит ничего, приватную разметку конвертировать безопасно, инструмент работает и офлайн.
Как использовать Конвертер HTML в JSX
Преобразуйте обычный HTML в готовый к использованию React JSX, не покидая браузер. Всё разбирается локально встроенным DOMParser — ваша разметка никогда не отправляется.
- Вставьте HTML в левый редактор; результат JSX появляется справа и обновляется по мере набора (debounce 300 мс).
- Выберите ширину отступа в "Отступ" — 2 или 4 пробела на уровень вложенности.
- Включите «Функциональный компонент», чтобы обернуть вывод в function Component() { return ( ... ) }, готовый к вставке в файл React.
- Используйте «Копировать» для результата, «Пример» для загрузки образца или «Очистить», чтобы начать заново.
class, for и tabindex превращаются в className, htmlFor и tabIndex, строки style становятся объектами в camelCase, а пустые элементы вроде img или br выводятся самозакрывающимися — ровно то, что ожидает JSX.
Похожие инструменты
- Форматировщик HTML Мгновенно форматируйте и美化йте HTML-код. Превратите минифицированный HTML в чистый, читаемый код. Бесплатный онлайн-инструмент, без регистрации.
- Код в изображение Преобразуйте фрагменты кода в красивые изображения с подсветкой синтаксиса, темами и декорациями окна. 100% конфиденциальность, всё в вашем браузере.
- Проверка хеша Вычисляйте и проверяйте хеши MD5, SHA-1, SHA-256, SHA-512 локально
- Калькулятор Chmod Бесплатный онлайн-калькулятор chmod для визуализации и вычисления прав доступа Linux с помощью флажков. Мгновенное преобразование между числовой (755, 644) и символической нотацией (rwxr-xr-x). Поддержка специальных прав: setuid, setgid, sticky bit.
- Таблица ASCII Полная справочная таблица кодировки ASCII с десятичными, шестнадцатеричными, восьмеричными, двоичными кодами, HTML-сущностями и описаниями символов. Мгновенный поиск и фильтрация.
- Hex-просмотрщик Просмотр содержимого файлов в шестнадцатеричном формате с поиском, навигацией по смещению и виртуальной прокруткой
- Поиск MIME-типов Мгновенно находите MIME-типы по расширению файла или ищите расширения по MIME-типу. Бесплатный онлайн-справочник с более чем 1000 записями.
- Проверка разрешения экрана Определяет разрешение экрана, размер viewport, DPI и глубину цвета в реальном времени.