HTML naar JSX Converter
HTML → JSX// JSX output appears here
Waarom HTML naar JSX converteren?
Bij het migreren van bestaande HTML-sjablonen naar React, of bij het kopiëren van mockups naar componenten, moet je handmatig class naar className, for naar htmlFor en inline stijlen van strings naar JavaScript-objecten converteren. Onze converter automatiseert al deze transformaties direct, waarbij alle HTML→JSX-attribuutmapping wordt verwerkt zodat je je kunt concentreren op componentlogica in plaats van syntaxisconversie.
Attribuutconversie
Converteert class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength en meer
Inline stijlobjecten
Transformeert style="color: red;" naar style={{color: 'red'}} — geldige JS-objectnotatie voor React
Zelfsluitende tags
Voegt de sluitende slash toe aan void-elementen: <br> wordt <br />, <input> wordt <input />
HTML naar JSX converteren
Plak de HTML
Plak je HTML-sjabloon, Figma-export of elk HTML-fragment in het linker paneel
Automatische conversie
De converter transformeert direct alle attributen, stijlen en void-elementen naar JSX-syntaxis
JSX kopiëren
Kopieer de geconverteerde JSX en plak het in het render/return-blok van je React-component
Gebruiksscenario's voor HTML naar JSX converter
Migratie naar React
Migreer bestaande HTML-pagina's of sjablonen naar React-componenten zonder handmatige attribuutconversie
Bootstrap naar React
Converteer Bootstrap HTML-componenten naar JSX voor gebruik met react-bootstrap of gestileerde componenten
E-mailsjablonen
Converteer HTML-e-mailsjablonen naar JSX voor rendering met React Email of vergelijkbare bibliotheken
CMS naar React
Converteer WordPress of traditionele CMS HTML-sjablonen naar React-componentstructuur
HTML naar JSX tips
✓ class → className is essentieel
class is een gereserveerd sleutelwoord in JavaScript. React vereist className voor CSS-klassen. Dit vergeten veroorzaakt React-waarschuwingen en kan onverwacht gedrag veroorzaken.
✓ for → htmlFor op labels
Het for-attribuut op <label> wordt htmlFor in JSX. Dit vergeten breekt toegankelijkheid — schermlezers vertrouwen op de label-veldassociatie.
✓ Werk eventhandlers bij na conversie
HTML onclick='...' wordt niet automatisch geconverteerd naar JSX. Vervang inline eventhandlers handmatig met het React-patroon onClick={handler} na conversie.
✓ HTML-opmerkingen worden JSX-opmerkingen
<!-- opmerking --> wordt {/* opmerking */} in JSX. JSX ondersteunt geen HTML-opmerkingssyntaxis binnen JSX-opmaak.
❓ Veelgestelde vragen
Waarom gebruikt React className in plaats van class?
class is een gereserveerd sleutelwoord in JavaScript (gebruikt voor ES6-klassen). Omdat JSX JavaScript is, zou het gebruiken van class een syntaxisconflict veroorzaken. React koos className om ambiguïteit met het JavaScript-sleutelwoord class te vermijden.
Verwerkt deze tool React-eventhandlers?
Nee — HTML-eventhandlers zoals onclick en onsubmit worden niet automatisch geconverteerd naar React's onClick en onSubmit omdat hun waarden (JavaScript-strings in HTML) moeten verwijzen naar React-componentfuncties/-toestand. Deze moeten handmatig worden bijgewerkt.
Wat is het verschil tussen HTML en JSX?
JSX is een JavaScript-syntaxisextensie die op HTML lijkt maar compileert naar React.createElement()-aanroepen. Belangrijke verschillen: alle attributen in camelCase, class is className, for is htmlFor, void-elementen moeten zelfsluitend zijn en expressies gebruiken {} in plaats van strings.
Waarom moeten void-elementen zelfsluitend zijn in JSX?
JSX wordt door Babel geparseerd als XML-achtige syntaxis, die vereist dat alle elementen correct worden gesloten. Void-elementen zoals <br>, <img>, <input> hebben geen kinderen, dus ze moeten worden zelfgesloten met /> in plaats van een niet-gesloten tag te laten.