With a subscription — no extra charge. Paid Site Control from 990 ₽/mo includes local tools with unlimited manual runs. The volume limit for each run is shown on the tool page. Paid AI features and API integrations are charged separately.

Конвертер

HTML → React

Q: Как конвертер обрабатывает inline-стили?

Строковые значения style="color: red; margin: 10px" преобразуются в объект { color: "red", margin: "10px" }. Числовые значения для px-свойств (width, height, margin, padding) могут быть переданы как числа — React добавит px автоматически.

Q: Что происходит с event-атрибутами onclick и т.п.?

onclick преобразуется в onClick, onchange в onChange — по правилам camelCase для обработчиков в React. Строковые значения вроде onclick="doSomething()" станут onClick={...}, но функцию нужно будет определить отдельно в компоненте.

Q: Поддерживается ли конвертация SVG?

Да. SVG-разметка конвертируется в JSX. Важно: атрибуты вроде xml:lang, xlink:href в React записываются как xmlLang, xlinkHref. Конвертер пытается обработать типичные SVG-атрибуты, для сложных случаев может потребоваться ручная правка.

Конвертируйте HTML в React JSX компоненты

HTML

React JSX

React JSXJSX

<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>&copy; 2024 Company</p>
  </footer>
</div>

Что конвертируется

class → className

HTML класс в JSX атрибут

for → htmlFor

Атрибут label

style="..." → style={...}

Инлайн стили в объект

onclick → onClick

События в camelCase

Самозакрывающиеся теги

disabled → disabled={true}

Boolean атрибуты

About HTML to React конвертер

Конвертер преобразует HTML-разметку в JSX, совместимый с React. Автоматически заменяет class на className, for на htmlFor, обрабатывает style-объекты и экранирует спецсимволы.

Конвертация HTML в JSX

Корректная обработка class, for, style

Экранирование спецсимволов

Экспорт как React-компонент

Frequently asked questions

Почему class нужно заменять на className?

В JavaScript class — зарезервированное слово. React и JSX используют className для соответствия DOM-атрибуту class. Конвертер автоматически выполняет эту замену, чтобы разметка была валидной в React.

Как конвертер обрабатывает inline-стили?

Можно ли конвертировать HTML с Vue или Angular-директивами?

Базовые HTML-атрибуты и структура конвертируются. Специфичные директивы (v-if, ngFor и т.п.) останутся как есть и потребуют ручной замены на React-эквиваленты (условный рендер, map для списков). Конвертер ориентирован на чистый HTML/JSX.

Что происходит с event-атрибутами onclick и т.п.?

Поддерживается ли конвертация SVG?

Useful articles

Guides and tips for this topic

All articles

HTML в JSX

Read article

Загрузка...

reChecker Support

Found a bug, outage, or unexpected behavior in reChecker? Send us a message and we will check and fix it.

This form is for reChecker feedback only. If you need development or support for your own website, send a separate request:

<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 → React

HTML

React JSX

Что конвертируется

About HTML to React конвертер

Почему class нужно заменять на className?

Как конвертер обрабатывает inline-стили?

Можно ли конвертировать HTML с Vue или Angular-директивами?

Что происходит с event-атрибутами onclick и т.п.?

Поддерживается ли конвертация SVG?

HTML в JSX

CSS to Tailwind

Code Minifier

JSON Formatter

reChecker Support

HTML → React

HTML

React JSX

Что конвертируется

About HTML to React конвертер

Почему class нужно заменять на className?

Как конвертер обрабатывает inline-стили?

Можно ли конвертировать HTML с Vue или Angular-директивами?

Что происходит с event-атрибутами onclick и т.п.?

Поддерживается ли конвертация SVG?

HTML в JSX

CSS to Tailwind

Code Minifier

JSON Formatter