Как пользоваться: HTML в JSX
- Вставьте свою разметку HTML или SVG.
- Посмотрите на JSX, который получился при конвертации: атрибуты, стили и комментарии переписаны для React.
- При необходимости оберните результат в именованный компонент и скопируйте его в свой проект.
Что меняется при переходе от HTML к JSX
classстановитсяclassName, аfor—htmlFor.- Инлайн-стили превращаются в объекты:
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Пустые (void) элементы закрываются самостоятельно:
<img>→<img />,<br>→<br />. - Обработчики событий и другие атрибуты пишутся в camelCase:
onclick→onClick,tabindex→tabIndex. - Атрибуты SVG переводятся в camelCase:
stroke-width→strokeWidth,xlink:href→xlinkHref. - HTML-комментарии превращаются в
{/* … */}, а фигурные скобки в тексте экранируются.
Обработчики событий
Инлайн-обработчики вроде onclick="doThing()" в HTML являются строками, а в React — функциями, поэтому они преобразуются в заглушку с комментарием. Её можно заменить на ссылку на настоящую функцию.
Несколько корневых элементов
Компонент должен возвращать один элемент. Если в HTML несколько элементов верхнего уровня, конвертер оборачивает их во фрагмент <>…</>.
Приватность по умолчанию
Конвертация выполняется полностью в вашем браузере — код никуда не отправляется, поэтому инструмент безопасен для закрытых проектов.
Также ищут как: html в react, онлайн конвертер jsx, svg в jsx, class в classname, html в react компонент.
Инструменты, которые хорошо сочетаются с HTML в JSX
- SVG в JSX — Вставьте SVG из Figma, Illustrator или набора иконок и получите готовый React-компонент (JSX или TSX) с безопасным предпросмотром иконки.
- HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
- Конвертер CSS в Tailwind — Вставьте правила или объявления CSS и получите эквивалентные утилитарные классы Tailwind для каждого селектора, включая состояния hover: и произвольные значения, например p-[13px].
- HTML и CSS в Webflow — Вставьте HTML и его CSS, нажмите Скопировать в Webflow и вставьте результат в Designer.
Часто задаваемые вопросы
Почему React требует className вместо class?
«class» — зарезервированное слово в JavaScript, а JSX компилируется в JavaScript, поэтому React использует имя DOM-свойства className.
Можно ли конвертировать SVG-иконки в компоненты React?
Да. Вставьте SVG — атрибуты вроде stroke-width и fill-rule будут переписаны в camelCase. Для специализированной работы с SVG и пропсами используйте SVG в JSX.
Что происходит с инлайн-обработчиками onclick?
Они становятся onClick с заглушкой и комментарием, потому что React ожидает функцию, а не строку с кодом.
Можно ли установить HTML в JSX как веб-приложение и пользоваться им офлайн?
Да. HTML в JSX — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.