Конвертер HTML в JSX
HTML → JSX// JSX output appears here
Зачем конвертировать HTML в JSX?
При миграции существующих HTML-шаблонов в React или копировании макетов в компоненты нужно вручную конвертировать class в className, for в htmlFor и инлайн-стили из строк в объекты JavaScript. Наш конвертер автоматизирует все эти трансформации мгновенно, обрабатывая всё сопоставление атрибутов HTML→JSX, позволяя сосредоточиться на логике компонента, а не на конвертации синтаксиса.
Конвертация атрибутов
Конвертирует class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength и многое другое
Инлайн-объекты стилей
Преобразует style="color: red;" в style={{color: 'red'}} — правильная JS-нотация объектов для React
Самозакрывающие теги
Добавляет закрывающий слэш к void-элементам: <br> становится <br />, <input> становится <input />
Как конвертировать HTML в JSX
Вставьте HTML
Вставьте HTML-шаблон, экспорт из Figma или любой HTML-фрагмент в левую панель
Автоматическая конвертация
Конвертер мгновенно трансформирует все атрибуты, стили и void-элементы в синтаксис JSX
Скопируйте JSX
Скопируйте конвертированный JSX и вставьте его в блок render/return вашего React-компонента
Случаи использования конвертера HTML в JSX
Миграция на React
Мигрируйте существующие HTML-страницы или шаблоны в React-компоненты без ручной конвертации атрибутов
Bootstrap в React
Конвертируйте Bootstrap HTML-компоненты в JSX для использования с react-bootstrap или styled components
Email-шаблоны
Конвертируйте HTML email-шаблоны в JSX для рендеринга с React Email или подобными библиотеками
CMS в React
Конвертируйте HTML-шаблоны WordPress или традиционных CMS в структуру React-компонентов
Советы по HTML в JSX
✓ class → className критически важно
class — зарезервированное ключевое слово JavaScript. React требует className для CSS-классов. Забывание об этом вызывает предупреждения React и может привести к неожиданному поведению.
✓ for → htmlFor на label-элементах
Атрибут for на <label> становится htmlFor в JSX. Забывание об этом ломает доступность — программы чтения с экрана полагаются на ассоциацию метка-поле.
✓ Обновляйте обработчики событий после конвертации
Атрибут HTML onclick='...' не конвертируется автоматически в JSX. Вручную замените инлайн-обработчики событий паттерном React onClick={handler} после конвертации.
✓ HTML-комментарии становятся JSX-комментариями
<!-- комментарий --> конвертируется в {/* комментарий */} в JSX. JSX не поддерживает синтаксис HTML-комментариев внутри JSX-тегов.
❓ Часто задаваемые вопросы
Почему React использует className вместо class?
class — зарезервированное ключевое слово в JavaScript (используется для ES6-классов). Поскольку JSX — это JavaScript, использование class создало бы конфликт синтаксиса. React выбрал className, чтобы избежать неоднозначности с ключевым словом class JavaScript.
Обрабатывает ли этот инструмент обработчики событий React?
Нет — HTML-обработчики событий типа onclick и onsubmit не конвертируются автоматически в React's onClick и onSubmit, потому что их значения (строки JavaScript в HTML) должны ссылаться на функции/состояние React-компонентов. Они должны обновляться вручную.
В чём разница между HTML и JSX?
JSX — расширение синтаксиса JavaScript, похожее на HTML, но компилируемое в вызовы React.createElement(). Ключевые отличия: все атрибуты в camelCase, class — это className, for — это htmlFor, void-элементы должны быть самозакрывающими, а выражения используют {} вместо строк.
Почему void-элементы должны быть самозакрывающими в JSX?
JSX парсится Babel как XML-подобный синтаксис, требующий правильного закрытия всех элементов. Void-элементы типа <br>, <img>, <input> не имеют детей, поэтому должны быть самозакрывающими /> вместо незакрытого тега.