HTML till JSX-konverterare
HTML → JSX// JSX output appears here
Varför konvertera HTML till JSX?
När du migrerar befintliga HTML-mallar till React måste du manuellt konvertera class till className, for till htmlFor och inline-stilar från strängar till JavaScript-objekt. Vårt verktyg automatiserar dessa konverteringar omedelbart och låter dig fokusera på komponentlogik.
Attributkonvertering
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength och mer
Inline-stilsobjekt
Konverterar style="color:red;" till style={{color:'red'}} — Reacts JS-objektnotation
Self-closing-taggar
Lägger till stängande snedstreck i tomma element: <br> → <br />, <input> → <input />
Konvertera HTML till JSX i 3 steg
Klistra in HTML
Klistra in HTML-mall, Figma-export eller HTML-kodsnutt i den vänstra panelen
Automatisk konvertering
Konverteraren omvandlar alla attribut, stilar och tomma element till JSX-syntax omedelbart
Kopiera JSX
Kopiera den konverterade JSX:en och klistra in den i din React-komponents render/return-block
Användningsfall för HTML till JSX-konverteraren
Migration till React
Migrera befintliga HTML-sidor eller mallar till React-komponenter utan manuell attributkonvertering
Bootstrap i React
Konvertera Bootstrap HTML-komponenter till JSX för användning med react-bootstrap
E-postmallar
Konvertera HTML-e-postmallar till JSX för rendering med React Email
Från CMS till React
Konvertera WordPress eller traditionella CMS-HTML-mallar till React-komponentstruktur
Tips för HTML till JSX-konvertering
✓ class → className är viktigt
class är ett reserverat JavaScript-nyckelord. I React måste className användas för CSS-klasser.
✓ label:s for → htmlFor
Attributet for på <label> blir htmlFor i JSX. Att glömma detta bryter tillgängligheten.
✓ Uppdatera händelsehanterare efter konvertering
HTML-attribut onclick='...' konverteras inte automatiskt i JSX. Ersätt inline-händelsehanterare manuellt med Reacts onClick={handler}-mönster.
✓ HTML-kommentarer blir JSX-kommentarer
<!-- kommentar --> konverteras till {/* kommentar */} i JSX.
❓ Vanliga frågor
Varför använder React className istället för class?
class är ett reserverat JavaScript-nyckelord (används för ES6-klasser). Eftersom JSX är JavaScript skapar class en syntaxkonflikt. React valde className för att undvika tvetydighet med JavaScript:s class-reserverade ord.
Hanterar verktyget React-händelsehanterare?
Nej — HTML-händelsehanterare onclick, onsubmit etc. konverteras inte automatiskt till Reacts onClick, onSubmit. Deras värden (JavaScript-strängar i HTML) behöver referera till funktioner/tillstånd i React-komponenten. Manuell uppdatering krävs.
Vad är skillnaden mellan HTML och JSX?
JSX är en JavaScript-syntaxtillägg som liknar HTML och kompileras till React.createElement()-anrop. Viktiga skillnader: alla attribut i camelCase, class→className, for→htmlFor, tomma element kräver self-closing, uttryck använder {} istället för strängar.
Varför kräver tomma element self-closing i JSX?
JSX parsas av Babel som XML-liknande syntax och kräver korrekt stängning av alla element. Tomma element som <br>, <img>, <input> har inga barn och kräver /> self-closing.