HTML → React
Конвертируйте HTML в React JSX компоненты
HTML
React JSX
<div className="container">
<header className="header">
<nav className="nav">
<a href="/" className="logo">Logo</a>
<ul className="menu">
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main className="main">
<article className="card" style={{ padding: '20px', backgroundColor: 'white', borderRadius: '8px' }}>
<h1 className="title">Welcome</h1>
<p className="description">This is a sample HTML that will be converted to React JSX.</p>
<img src="/image.jpg" alt="Sample image" className="image" />
<input type="text" placeholder="Enter text" disabled={true} />
<button onClick="handleClick()">Click me</button>
</article>
</main>
<footer className="footer">
<p>© 2024 Company</p>
</footer>
</div>Что конвертируется
О сервисе HTML to React конвертер
Конвертер преобразует HTML-разметку в JSX, совместимый с React. Автоматически заменяет class на className, for на htmlFor, обрабатывает style-объекты и экранирует спецсимволы.
Часто задаваемые вопросы
В JavaScript class — зарезервированное слово. React и JSX используют className для соответствия DOM-атрибуту class. Конвертер автоматически выполняет эту замену, чтобы разметка была валидной в React.
Строковые значения style="color: red; margin: 10px" преобразуются в объект { color: "red", margin: "10px" }. Числовые значения для px-свойств (width, height, margin, padding) могут быть переданы как числа — React добавит px автоматически.
Базовые HTML-атрибуты и структура конвертируются. Специфичные директивы (v-if, ngFor и т.п.) останутся как есть и потребуют ручной замены на React-эквиваленты (условный рендер, map для списков). Конвертер ориентирован на чистый HTML/JSX.
onclick преобразуется в onClick, onchange в onChange — по правилам camelCase для обработчиков в React. Строковые значения вроде onclick="doSomething()" станут onClick={...}, но функцию нужно будет определить отдельно в компоненте.
Да. SVG-разметка конвертируется в JSX. Важно: атрибуты вроде xml:lang, xlink:href в React записываются как xmlLang, xlinkHref. Конвертер пытается обработать типичные SVG-атрибуты, для сложных случаев может потребоваться ручная правка.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker