Загрузка...
Загрузка...
Нашли ошибку в reChecker? Опишите, что произошло, и укажите адрес страницы. Оставьте email или телефон — ответим после проверки.
По подписке — без доплат. Оплаченная подписка «Контроль сайта» от 990 ₽/мес включает локальные инструменты без ограничений по числу ручных запусков. Объём одного запуска указан на странице инструмента. Платные AI-функции и API-интеграции оплачиваются отдельно.
Посмотреть подпискуКонвертируйте 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-разметку в JSX, совместимый с React. Автоматически заменяет class на className, for на htmlFor, обрабатывает style-объекты и экранирует спецсимволы.
Конвертация HTML в JSX
Корректная обработка class, for, style
Экранирование спецсимволов
Экспорт как React-компонент
В JavaScript class — зарезервированное слово. React и JSX используют className для соответствия DOM-атрибуту class. Конвертер автоматически выполняет эту замену, чтобы разметка была валидной в React.
Руководства и советы по теме