Převodník HTML na JSX
Bezplatný převodník HTML na JSX online. Vložte HTML a okamžitě získejte čistý JSX pro React: className, htmlFor, styly v camelCase, samouzavírací značky a bezpečné komentáře, vše v prohlížeči.
Co dělá převodník HTML na JSX?
Přeměňuje obyčejné HTML na JSX, které umí React vykreslit. Vložte HTML do vstupního pole a ekvivalentní JSX se objeví ve výstupním panelu, průběžně aktualizovaný při psaní s krátkou prodlevou.
Které atributy se přejmenovávají?
class se mění na className, for na htmlFor, tabindex na tabIndex a další atributy s pomlčkou jako maxlength, colspan nebo stroke-width dostávají camelCase názvy Reactu. Atributy data-* a aria-* zůstávají beze změny.
Jak se převádí atribut style?
Řetězec CSS jako style="background-color: red; font-size: 12px" se mění na JavaScript objekt: style={{backgroundColor:'red', fontSize:'12px'}}, kde je každá vlastnost CSS zapsána v camelCase a hodnota v uvozovkách.
Jak se zpracovávají prázdné značky?
Značky, které nemohou mít potomky — img, br, input, hr, meta, link a další — se normalizují na samouzavírací syntaxi: <img> se změní na <img />, přesně jak vyžaduje JSX. Prázdné div a span se zavírají stejně.
Co se děje s komentáři HTML?
Mění se na komentáře JSX: <!-- poznámka --> se stává {/* poznámka */}. Sekvence, které by komentář předčasně ukončily, se neutralizují, takže vygenerovaný kód se vždy zkompiluje.
Jak se zpracovávají entity a speciální znaky?
Entity jako & nebo © se dekódují na skutečné znaky a poté se složené a ostré závorky znovu escapují v bezpečné podobě pro JSX, takže text s { } nebo < se vykreslí správně, aniž by rozbil komponentu.
K čemu slouží volba funkční komponenty?
Zabalí převedený kód do hotové šablony: function Component() { return ( ...váš JSX... ) } místo holého JSX. Zapněte ji, chcete-li úryvek vložit přímo do souboru Reactu.
Odesílá se můj HTML nějakým serverům?
Ne. Parsování probíhá zcela ve vašem prohlížeči pomocí vestavěného DOMParseru. Na server se neposílá nic, takže soukromý kód můžete převádět bez obav a nástroj funguje i offline.
Jak používat Převodník HTML na JSX
Převeďte obyčejné HTML na okamžitě použitelný React JSX, aniž byste opustili prohlížeč. Vše se parsuje lokálně vestavěným DOMParserem — vaše značky se nikdy nenahrávají.
- Vložte své HTML do levého editoru; výsledek JSX se objeví vpravo a obnovuje se při psaní (debounce 300 ms).
- Zvolte šířku odsazení v „Odsazení“ — 2 nebo 4 mezery na úroveň zanoření.
- Přepněte „Funkční komponenta“, aby byl výstup zabalen do function Component() { return ( ... ) }, připravený k vložení do React souboru.
- Použijte Kopírovat pro výsledek, Ukázka pro načtení vzorku, nebo Vymazat pro nový začátek.
class, for a tabindex se mění na className, htmlFor a tabIndex, řetězce style se mění na camelCase objekty a prázdné elementy jako img nebo br se vypisují samouzavírané — přesně to, co JSX očekává.
Související nástroje
- HTML zkrášlovač Formátujte a zkrášlujte HTML kód okamžitě. Převeďte minifikovaný HTML na čistý, čitelný kód. Bezplatný online nástroj, bez registrace.
- Kód na Obrázek Převeďte úryvky kódu na sdílené obrázky se zvýrazněním syntaxe, vlastními motivy a dekoracemi okna. 100% soukromí, vše ve vašem prohlížeči.
- Kontrola Hash Počítejte a ověřujte hashe MD5, SHA-1, SHA-256, SHA-512 lokálně
- Kalkulačka Chmod Bezplatný online kalkulačka chmod pro vizualizaci a výpočet oprávnění souborů Linux pomocí zaškrtávacích polí. Okamžitá konverze mezi číselnou (755, 644) a symbolickou notací (rwxr-xr-x). Podporuje speciální oprávnění jako setuid, setgid, sticky bit.
- ASCII Tabulka Kompletní reference kódování znaků ASCII s desítkovými, hexadecimálními, osmičkovými, binárními kódy, HTML entitami a popisy znaků. Okamžité vyhledávání a filtrování.
- Hex prohlížeč Zobrazte obsah souborů v hex dump formátu s vyhledáváním, navigací po offsetu a virtuálním posouváním
- Vyhledávač MIME Typů Okamžitě najděte MIME typy podle přípony souboru nebo hledejte přípony podle MIME typu. Bezplatná online reference s více než 1000 záznamy.
- Kontrola rozlišení obrazovky Detekuje rozlišení obrazovky, velikost viewportu, DPI a barevnou hloubku v reálném čase.