HTML till JSX-konverterare
Gratis HTML till JSX-konverterare online. Klistra in HTML och få ren React-JSX direkt med className, htmlFor, camelCase-stilar, självstängande taggar och säkra kommentarer – helt i webbläsaren.
Vad gör HTML-till-JSX-konverteraren?
Den omvandlar vanlig HTML-markup till JSX som React kan rendera. Klistra in din HTML i inmatningsfältet så visas motsvarande JSX i utdatafältet, uppdaterad medan du skriver med ett kort debounce.
Vilka attribut byter namn?
class blir className, for blir htmlFor, tabindex blir tabIndex, och andra attribut med bindestreck som maxlength, colspan eller stroke-width får sina camelCase-namn enligt React. data-* och aria-* lämnas orörda.
Hur konverteras style-attributet?
En CSS-sträng som style="background-color: red; font-size: 12px" blir ett JavaScript-objekt: style={{backgroundColor:'red', fontSize:'12px'}}, där varje CSS-egenskap skrivs i camelCase och värdet omges av citattecken.
Hur hanteras void-element?
Element som inte kan ha barn — img, br, input, hr, meta, link med flera — normaliseras till självstängande syntax: <img> blir <img />, precis som JSX kräver. Tomma div:ar och span:n stängs på samma sätt.
Vad händer med HTML-kommentarer?
De blir JSX-kommentarer: <!-- not --> blir {/* not */}. Sekvenser som skulle avsluta kommentaren i förtid oskadgörs, så att den genererade koden alltid kompilerar.
Hur hanteras entiteter och specialtecken?
Entiteter som & eller © avkodas till riktiga tecken, därefter eskapas klamrar och vinklar om i JSX-säker form, så att text med { } eller < renderas korrekt utan att komponenten går sönder.
Vad gör alternativet funktionskomponent?
Den slår in den konverterade markupen i en färdig mall: function Component() { return ( ...din JSX... ) } i stället för ren JSX. Slå på den när du vill klistra in utdraget direkt i en React-fil.
Laddas min HTML upp någonstans?
Nej. Tolkningen sker helt i din webbläsare med den inbyggda DOMParsern. Ingenting skickas till någon server, så privat markup är säker att konvertera, och verktyget fungerar även offline.
Hur man använder HTML till JSX-konverterare
Konvertera vanlig HTML till färdiganvänd React JSX utan att lämna webbläsaren. Allt analyseras lokalt med den inbyggda DOMParsern — din uppmärkning laddas aldrig upp.
- Klistra in din HTML i vänstra editorn; JSX-resultatet visas till höger och uppdateras medan du skriver (300 ms debounce).
- Välj indragsbredd i "Indrag" — 2 eller 4 blanksteg per nästningsnivå.
- Växla "Funktionskomponent" för att slå in utmatningen i function Component() { return ( ... ) }, redo att klistras in i en React-fil.
- Använd Kopiera för att ta resultatet, Exempel för att ladda ett prov, eller Rensa för att börja om.
class, for och tabindex blir className, htmlFor och tabIndex, style-strängar blir camelCase-objekt och tomma element som img eller br skrivs ut självstängande — exakt vad JSX förväntar sig.
Relaterade verktyg
- HTML-förskönare Formatera och försköna HTML-kod direkt. Konvertera minifierad HTML till ren, läsbar kod. Gratis onlineverktyg, ingen registrering krävs.
- Kod till Bild Konvertera kodavsnitt till delbara bilder med syntaxmarkering, anpassade teman och fönsterdekorationer. 100% integritet, allt i din webbläsare.
- Hash-kontroll Beräkna och verifiera MD5, SHA-1, SHA-256, SHA-512 filhashar lokalt
- Chmod-kalkylator Gratis online chmod-kalkylator för att visualisera och beräkna Linux-filrättigheter med kryssrutor. Konvertera omedelbart mellan numerisk (755, 644) och symbolisk notation (rwxr-xr-x). Stöder speciella rättigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-teckenkodningsreferens med decimala, hexadecimala, oktala, binära koder, HTML-entiteter och teckenbeskrivningar. Omedelbar sökning och filtrering.
- Hex-visare Visa filinnehåll i hex-dump-format med sökning, offset-navigering och virtuell scrollning
- MIME-typ Sökning Hitta MIME-typer direkt via filtillägg eller sök tillägg efter MIME-typ. Gratis online-referens med över 1000 poster.
- Skärmupplösningskontroll Detekterar skärmupplösning, viewport-storlek, DPI och färgdjup i realtid.