HTML naar JSX-converter
Gratis online HTML naar JSX-converter. Plak je markup en krijg direct schone React-JSX met className, htmlFor, camelCase-styles, self-closing tags en veilige comments, volledig in je browser.
Wat doet de HTML naar JSX-converter?
Hij zet gewone HTML-markup om in JSX die React kan renderen. Plak je HTML in het invoerveld en de equivalente JSX verschijnt in het uitvoerpaneel, live bijgewerkt terwijl je typt met een korte debounce.
Welke attributen worden hernoemd?
class wordt className, for wordt htmlFor, tabindex wordt tabIndex, en andere attributen met streepjes zoals maxlength, colspan of stroke-width krijgen hun camelCase-naam van React. data-* en aria-* blijven ongewijzigd.
Hoe wordt het style-attribuut geconverteerd?
Een CSS-string zoals style="background-color: red; font-size: 12px" wordt een JavaScript-object: style={{backgroundColor:'red', fontSize:'12px'}}, waarbij elke CSS-eigenschap camelCase wordt en de waarde tussen aanhalingstekens staat.
Hoe worden void-elementen behandeld?
Elementen zonder kinderen — img, br, input, hr, meta, link en meer — worden genormaliseerd naar self-closing syntaxis: <img> wordt <img />, precies zoals JSX vereist. Ook lege divs en spans worden zo gesloten.
Wat gebeurt er met HTML-comments?
Ze worden JSX-comments: <!-- notitie --> wordt {/* notitie */}. Elke reeks die het commentaar voortijdig zou afsluiten wordt onschadelijk gemaakt, zodat de gegenereerde code altijd compileert.
Hoe worden entities en speciale tekens behandeld?
Entities zoals & of © worden gedecodeerd naar echte tekens, waarna accolades en hoekjes JSX-veilig opnieuw worden ge-escaped, zodat tekst met { } of < correct rendert zonder de component te breken.
Wat doet de functiecomponent-optie?
Ze wikkelt de omgezette markup in een kant-en-klaar sjabloon: function Component() { return ( ...jouw JSX... ) } in plaats van kale JSX. Zet hem aan als je het fragment direct in een React-bestand wilt plakken.
Wordt mijn HTML ergens geüpload?
Nee. Het parsen gebeurt volledig in je browser met de ingebouwde DOMParser. Er wordt niets naar een server gestuurd, dus privé-markup is veilig, en de tool werkt ook offline.
Hoe HTML naar JSX-converter te gebruiken
Converteer gewone HTML naar kant-en-klare React JSX zonder de browser te verlaten. Alles wordt lokaal geparsed met de ingebouwde DOMParser — uw opmaak wordt nooit geüpload.
- Plak uw HTML in de linker editor; het JSX-resultaat verschijnt rechts en ververst terwijl u typt (300 ms debounce).
- Kies de inspringbreedte in "Inspringing" — 2 of 4 spaties per nestniveau.
- Schakel "Functiecomponent" in om de uitvoer te verpakken in function Component() { return ( ... ) }, klaar om in een React-bestand te plakken.
- Gebruik Kopiëren om het resultaat mee te nemen, Voorbeeld om een monster te laden, of Wissen om opnieuw te beginnen.
class, for en tabindex worden className, htmlFor en tabIndex, style-strings worden camelCase-objecten en void-elementen zoals img of br worden zelfsluitend uitgevoerd — precies wat JSX verwacht.
Gerelateerde tools
- HTML-verfraaier Formatteer en verfraai HTML-code direct. Converteer gecomprimeerde HTML naar schone, leesbare code. Gratis online tool, geen registratie nodig.
- Code naar Afbeelding Converteer codefragmenten naar deelbare afbeeldingen met syntaxismarkering, aangepaste thema's en vensterdecoraties. 100% privacy, alles in je browser.
- Hash-controle MD5, SHA-1, SHA-256, SHA-512 bestand-hashes lokaal berekenen en verifiëren
- Chmod-calculator Gratis online chmod-calculator om Linux-bestandsrechten te visualiseren en berekenen met selectievakjes. Converteer direct tussen numerieke (755, 644) en symbolische notatie (rwxr-xr-x). Ondersteunt speciale rechten zoals setuid, setgid, sticky bit.
- ASCII-tabel Volledige ASCII-tekencoderingreferentie met decimale, hexadecimale, octale, binaire codes, HTML-entiteiten en karakterbeschrijvingen. Direct zoeken en filteren.
- Hex-viewer Bekijk bestandsinhoud in hex-dump formaat met zoekfunctie, offset-navigatie en virtueel scrollen
- MIME-type Opzoeken Vind direct MIME-typen op bestandsextensie of zoek extensies op MIME-type. Gratis online referentie met meer dan 1000 vermeldingen.
- Schermresolutie controle Detecteert schermresolutie, viewport-grootte, DPI en kleurdiepte in realtime.