Po co konwertować HTML na JSX?
JSX to dialekt HTML w React - prawie taki sam, ale z kilkoma różnicami które łatwo przeoczyć. `class` musi być `className` (bo `class` to słowo kluczowe JavaScriptu). `for` w `<label for="x">` to `htmlFor`. Komentarze `<!-- ... -->` nie działają, trzeba `{/* ... */}`. Inline style musi być obiektem JavaScript: `style={{ color: 'red' }}` z kluczami w camelCase.
Tu wklejasz gotowy HTML (np. od projektanta z Figmy, z biblioteki ikon, z fragmentu strony) i dostajesz gotowy JSX do wklejenia w komponent React. Konwerter ogarnia atrybuty SVG (`stroke-width` na `strokeWidth`), self-closing dla `<br>` / `<img>` / `<input>`, atrybuty boolean i encje HTML.
Wszystko w przeglądarce, bez wysyłania kodu na serwer.
Jak korzystać
- Wklej HTML w lewy panel (np. fragment z Figmy, ikona SVG, kawałek strony do refaktoryzacji).
- Po prawej zobaczysz JSX - z poprawionymi atrybutami i stylami.
- Włącz "Zawiń w komponent", żeby dostać gotową funkcję `export default function Component() { return (...) }`.
- Tryb TypeScript dodaje typowanie zwracanej wartości.
- Kliknij "Kopiuj" i wklej do swojego pliku `.tsx`.
Do czego się przydaje
Praktyczne sytuacje gdy ten konwerter ratuje czas:
- Migracja starego HTML na React. Masz stary projekt z plikami `.html` albo szablon Bootstrapa, chcesz przepisać na React/Next.js - wklejasz każdą sekcję i dostajesz gotowy komponent.
- Ikony z Figmy / Iconify. Designer eksportuje ikonę jako SVG, ty wklejasz i masz gotowy komponent React.
- Fragmenty z CodePen / StackOverflow. Ktoś podał rozwiązanie w "vanilla HTML" - wklejasz, dostajesz JSX.
- Materiały marketingowe. Wklejasz hero section albo CTA box i konwertujesz do komponentu.
- Email templates. HTML maila z literal `style="..."` na `style={{...}}` - bo czasem trzymasz preview w React.
- Refaktoryzacja. Twój zespół przeszedł na React i ma 100 starych kart produktów w HTML do zmigrowania.
- Edukacja. Uczysz się React i chcesz szybko zobaczyć "jak by to wyglądało w JSX".
Aby przekonwertować SVG na komponent React (bardziej zaawansowane, z propsami size/color), zobacz SVG na komponent. Dla gradientów CSS, generator gradientów.