Конвертировать HTML в JSX React Онлайн

Трансформируйте HTML в валидный JSX для React и Next.js. Бесплатно, в браузере, без загрузки файлов.

HTML

JSX

<div className="container">
  <label htmlFor="name">Name:</label>
  <input type="text" className="form-control" maxLength="50" readOnly / />
  <img src="photo.jpg" alt="Photo" />
  <br />
  {/* A comment */}
  <p style={{color: "red", fontSize: "14px", backgroundColor: "#f0f0f0"}}>Text</p>
</div>

Processed in your browser

Зачем использовать этот конвертер

HTML в JSX без синтаксических ошибок

Полная приватность

Конвертация происходит полностью в вашем браузере на чистом JavaScript. Ваш код не покидает устройство.

Полные трансформации

Применяем все необходимые конвертации: атрибуты, стили, события, void-теги и комментарии. Никаких ручных шагов.

Совместим с React и Next.js

Итоговый JSX валиден для React 16+, Next.js 12+ и любого фреймворка на основе React: Gatsby или Remix.

Мгновенно

Конвертация за миллисекунды без серверных вызовов. Вставьте и скопируйте — никакого ожидания.

Как это работает

Три шага — никаких сложностей

Вставьте ваш HTML

Вставьте HTML-код, который нужно конвертировать, в поле ввода. Это может быть полный HTML-документ или фрагмент.

Автоматическая конвертация

Конвертер применяет все необходимые трансформации: class→className, for→htmlFor, инлайновые стили в JS-объект и самозакрывающиеся void-теги.

Скопируйте итоговый JSX

Скопируйте готовый JSX прямо в ваши компоненты React или Next.js.

FAQ

Остались вопросы?

Какие изменения применяются при конвертации HTML в JSX?

Основные трансформации: class→className (class — зарезервированное слово в JS), for→htmlFor (for также зарезервировано), инлайновые стили конвертируются из CSS-строки в JavaScript-объект с camelCase-свойствами, void-теги самозакрываются (<br>→<br />, <img>→<img />), HTML-комментарии конвертируются в JSX-комментарии {/* */}.

Почему React использует JSX вместо HTML?

React/Next.js требует JSX, поскольку компоненты написаны на JavaScript. JSX — синтаксический сахар поверх React.createElement(). При компиляции Babel или компилятором Next.js каждый JSX-тег преобразуется в вызов JavaScript-функции, что делает невозможным использование зарезервированных слов JS, таких как class или for, в качестве атрибутов.

Как конвертируются инлайновые стили?

В HTML: style="color: red; font-size: 16px". В JSX: style={{ color: 'red', fontSize: '16px' }}. CSS-свойства в kebab-case конвертируются в camelCase (font-size→fontSize, background-color→backgroundColor), значения — в JavaScript-строки или числа.

Что происходит с обработчиками событий?

Обработчики событий в HTML используют нижний регистр (onclick, onchange, onsubmit). В JSX они конвертируются в camelCase: onclick→onClick, onchange→onChange, onsubmit→onSubmit, onmouseover→onMouseOver. Значение меняется со строки JS-кода на ссылку на функцию: onclick="myFunction()"→onClick={myFunction}.

Что такое void-элементы и почему они должны самозакрываться?

Void-элементы в HTML — теги без содержимого и закрывающего тега: <br>, <img>, <input>, <hr>, <meta>, <link>. В JSX XML требует явного закрытия всех элементов, поэтому они должны быть записаны как <br />, <img /> и т.д. Без самозакрытия компилятор JSX выдаст синтаксическую ошибку.