Про цей інструмент
Конвертер HTML у JSX / React розбирає фрагмент HTML за допомогою нативного DOMParser браузера і повторно серіалізує його як коректний JSX, виправляючи все, що потрібно React. Він працює повністю на боці клієнта, тож розмітка, яку ви вставляєте, лишається на вашій машині. Вставте будь-який HTML — експорт дизайну, шаблон email, ескіз компонента — і отримайте JSX, який можна одразу додати у файл React.
Перезапис перейменовує зарезервовані атрибути (class стає className, for стає htmlFor), перетворює решту на camelCase — tabindex на tabIndex, maxlength на maxLength, stroke-width на strokeWidth — лишаючи атрибути data-* і aria-* недоторканими. Порожні елементи на кшталт img, br, input і hr робляться самозакривними (<img />), HTML-коментарі стають {/* ... */}, літеральні фігурні дужки в тексті екрануються як {'{'}, а рядок інлайн style="a:b;c:d" перетворюється на об'єкт style={{ a: 'b', c: 'd' }} з ключами CSS у camelCase. Булеві атрибути на кшталт disabled можна видавати голими або як ={true} за допомогою перемикача.
Оберіть вивід фрагмента — кілька кореневих вузлів автоматично обгортаються у фрагмент <>...</> — або вивід повного компонента, який обгортає JSX у export default function з обраною вами назвою та відступом (2 пробіли, 4 пробіли чи табуляція). Результат готовий до вставлення; оскільки розбір використовує справжній DOM, некоректна вкладеність нормалізується так само, як це зробив би браузер.