HTML til JSX-konverter
HTML → JSX// JSX output appears here
Hvorfor konvertere HTML til JSX?
Når du migrerer eksisterende HTML-maler til React, må du manuelt konvertere class til className, for til htmlFor og inline-stiler fra strenger til JavaScript-objekter. Verktøyet automatiserer disse konverteringene øyeblikkelig og lar deg fokusere på komponentlogikk.
Attributtkonvertering
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength og mer
Inline-stil-objekt
Konverterer style="color:red;" til style={{color:'red'}} — Reacts JS-objektnotasjon
Self-closing-tagger
Legger til avsluttende skråstrek til tomme elementer: <br> → <br />, <input> → <input />
Konverter HTML til JSX i 3 trinn
Lim inn HTML
Lim inn HTML-mal, Figma-eksport eller HTML-kodesnipp i venstre panel
Automatisk konvertering
Konvertereren transformerer alle attributter, stiler og tomme elementer til JSX-syntaks øyeblikkelig
Kopier JSX
Kopier den konverterte JSX-en og lim den inn i React-komponentens render/return-blokk
Brukstilfeller for HTML til JSX-konverteren
Migrering til React
Migrer eksisterende HTML-sider eller -maler til React-komponenter uten manuell attributtkonvertering
Bootstrap i React
Konverter Bootstrap HTML-komponenter til JSX for bruk med react-bootstrap
E-postmaler
Konverter HTML-e-postmaler til JSX for rendering med React Email
Fra CMS til React
Konverter WordPress eller tradisjonelle CMS HTML-maler til React-komponentstruktur
Tips for HTML til JSX-konvertering
✓ class → className er viktig
class er et reservert JavaScript-nøkkelord. I React må className brukes for CSS-klasser.
✓ label for → htmlFor
Attributten for på <label> blir htmlFor i JSX. Å glemme dette bryter tilgjengelighet.
✓ Oppdater hendelsesbehandlere etter konvertering
HTML-attributten onclick='...' konverteres ikke automatisk i JSX. Erstatt inline-hendelsesbehandlere manuelt med Reacts onClick={handler}-mønster.
✓ HTML-kommentarer blir JSX-kommentarer
<!-- kommentar --> konverteres til {/* kommentar */} i JSX.
❓ Ofte stilte spørsmål
Hvorfor bruker React className i stedet for class?
class er et reservert JavaScript-nøkkelord (brukes til ES6-klasser). Siden JSX er JavaScript, skaper class en syntakskonflikt. React valgte className for å unngå tvetydighet.
Håndterer dette verktøyet React-hendelsesbehandlere?
Nei — HTML-hendelsesbehandlere onclick, onsubmit osv. konverteres ikke automatisk til Reacts onClick, onSubmit. Manuell oppdatering er nødvendig.
Hva er forskjellen mellom HTML og JSX?
JSX er en JavaScript-syntaksutvidelse som ligner HTML og kompileres til React.createElement()-kall. Viktige forskjeller: alle attributter i camelCase, class→className, for→htmlFor, tomme elementer krever self-closing, uttrykk bruker {} i stedet for strenger.
Hvorfor krever tomme elementer self-closing i JSX?
JSX parses av Babel som XML-lignende syntaks og krever korrekt lukking av alle elementer. Tomme elementer som <br>, <img>, <input> har ingen barn og krever /> self-closing.