Převod HTML na JSX

Převod HTML na JSX pro React: className, style objekty, SVG atributy a komponenta. Anglicky HTML to JSX converter.

Vše se počítá přímo v tomto prohlížeči — žádná data nikam neodcházejí.

Odsazení

Obalit do React komponenty

HTML

JSX

Vloží-li se celý dokument, zůstane jen obsah <body>. Inline obsluhy událostí (onclick="…") se převedou na funkce, class na className, style na objekt a SVG atributy na camelCase. Výsledek je vždy dobré zkontrolovat.

Jak použít: Převod HTML na JSX

JSX v Reactu vypadá jako HTML, ale liší se v detailech: class se píše jako className, atribut style je objekt a SVG atributy mají zápis camelCase. Nástroj HTML převede tak, aby šlo rovnou vložit do komponenty.

Vlož HTML do pole HTML.
Volitelně zapni Obalit do React komponenty a zadej její Jméno.
Zkopíruj JSX z výstupu.

Časté chyby a tipy

Uzavírání prvků: V JSX musí být uzavřené i prázdné prvky: <br />, <img />, <input />. Převod to zajistí.
Obsluha událostí: Atributy jako onclick="…" se převedou na onClick, ale kód v nich zůstane řetězcem. Nahraď ho funkcí v komponentě.
Komentáře: HTML komentáře se v JSX zapisují jako {/* … */}.

Nástroj je zdarma a běží celý v tvém prohlížeči — vložená data se nikam neodesílají ani neukládají.

HTML formátovač a minifikace →

Další nástroje v kategorii Konvertory

Převod YAML ↔ JSON Převod mezi YAML a JSON s podporou kotev, sloučení klíčů a více dokumentů.
Převod PHP pole ↔ JSON Převod PHP polí (krátká i dlouhá syntaxe) na JSON a zpět, bez spouštění PHP.
PHP serialize a unserialize Převod formátu PHP serialize() na JSON a zpět, včetně objektů a UTF-8 délek řetězců.
Převod SVG na CSS (data URI) SVG jako optimalizovaný data URI pro CSS background-image a mask-image.
Převod curl na kód Převod příkazu curl na kód v JavaScriptu, Pythonu, PHP, Go, Javě a dalších jazycích.
Generování typů z JSON Generování typů a tříd z JSON pro TypeScript, Go, Python, C#, Javu a další jazyky.
Převod JSON ↔ CSV Převod pole JSON objektů na CSV a zpět.
Převod JSON ↔ YAML (základní) Převod JSON na YAML a zpět pro běžná strukturovaná data.
Převod XML na JSON, CSV a YAML Převod XML na JSON, CSV, TSV, YAML, TOML, Properties, INI, PHP pole a SQL INSERT a většiny z nich zpět.
Zploštění JSON Zploštění vnořeného JSON na klíče jako cesty a složení zpět.
Gzip, Zlib a Deflate komprese Komprese textu do Gzip, Zlib nebo raw Deflate (Base64/Hex) a rozbalení zpět.
Převod MessagePack ↔ JSON Převod JSON na binární MessagePack (Hex/Base64) a zpět, včetně binárních dat a velkých čísel.
Převod CBOR ↔ JSON Převod JSON na binární CBOR (RFC 8949) a zpět, včetně bajtových řetězců, tagů a neřetězcových klíčů.
Dekodér Protobuf zpráv Dekódování zprávy Protocol Buffers bez schématu .proto: čísla polí, vnořené zprávy, texty a čísla.