Konwertuj HTML na JSX React Online

Przekształcaj HTML w prawidłowy JSX dla React i Next.js. Bezpłatnie, w Twojej przeglądarce, bez przesyłania plików.

HTML

JSX

<div className="container">
  <label htmlFor="name">Name:</label>
  <input type="text" className="form-control" maxLength="50" readOnly / />
  <img src="photo.jpg" alt="Photo" />
  <br />
  {/* A comment */}
  <p style={{color: "red", fontSize: "14px", backgroundColor: "#f0f0f0"}}>Text</p>
</div>

Processed in your browser

Dlaczego warto użyć tego konwertera

HTML do JSX bez błędów składniowych

Pełna prywatność

Konwersja odbywa się całkowicie w Twojej przeglądarce przy użyciu czystego JavaScript. Twój kod nigdy nie opuszcza Twojego urządzenia.

Kompletne przekształcenia

Stosujemy wszystkie niezbędne konwersje: atrybuty, style, zdarzenia, tagi void i komentarze. Bez ręcznych kroków.

Kompatybilny z React i Next.js

Wynikowy JSX jest prawidłowy dla React 16+, Next.js 12+ i każdego frameworka opartego na React, jak Gatsby lub Remix.

Natychmiastowy

Konwersja odbywa się w milisekundach bez wywołań serwera. Wklej i skopiuj, bez czekania.

Jak to działa

Trzy kroki, żadnych komplikacji

Wklej swój HTML

Wklej kod HTML, który chcesz przekonwertować, w pole wejściowe. Może to być pełny dokument HTML lub fragmenty.

Automatyczna konwersja

Konwerter stosuje wszystkie niezbędne przekształcenia: class→className, for→htmlFor, style inline do obiektu JS i samozamykające tagi void.

Skopiuj wynikowy JSX

Skopiuj gotowy JSX bezpośrednio do swoich komponentów React lub Next.js.

FAQ

Masz pytania?

Jakie zmiany są stosowane przy konwersji HTML do JSX?

Główne przekształcenia to: class→className (class jest słowem zarezerwowanym w JS), for→htmlFor (for też jest zarezerwowane), style inline konwertowany z ciągu znaków CSS do obiektu JavaScript z właściwościami w camelCase, tagi void samozamykające (<br>→<br />, <img>→<img />, <input>→<input />) i komentarze HTML konwertowane do komentarzy JSX {/* */}.

Dlaczego React używa JSX zamiast HTML?

React i Next.js wymagają JSX, ponieważ komponenty są pisane w JavaScript. JSX to lukier syntaktyczny nad React.createElement(). Po skompilowaniu przez Babel lub kompilator Next.js każdy tag JSX jest konwertowany do wywołań funkcji JavaScript, co uniemożliwia użycie zarezerwowanych słów JS jak class lub for jako atrybutów.

Jak są konwertowane style inline?

W HTML: style="color: red; font-size: 16px". W JSX: style={{ color: 'red', fontSize: '16px' }}. Właściwości CSS w notacji kebab-case są konwertowane do camelCase (font-size→fontSize, background-color→backgroundColor), a wartości są konwertowane do ciągów znaków lub liczb JavaScript.

Co dzieje się z obsługą zdarzeń?

Handlery zdarzeń w HTML używają małych liter (onclick, onchange, onsubmit). W JSX są konwertowane do camelCase: onclick→onClick, onchange→onChange, onsubmit→onSubmit, onmouseover→onMouseOver. Wartość zmienia się z ciągu kodu JS na referencję do funkcji: onclick="myFunction()"→onClick={myFunction}.

Czym są elementy void i dlaczego muszą się samozamykać?

Elementy void w HTML to tagi bez zawartości ani tagu zamykającego: <br>, <img>, <input>, <hr>, <meta>, <link>. W JSX XML wymaga, aby wszystkie elementy były jawnie zamknięte, dlatego muszą być zapisywane jako <br />, <img /> itd. Bez samozamknięcia kompilator JSX zgłosi błąd składniowy.