HTML naar JSX converter: gratis, draait in uw browser | We.Inc
Plak HTML en krijg geldige JSX: class naar className, for naar htmlFor, style-strings naar objecten, gesloten void-tags, commentaar, events en een componentwrapper. Er wordt niets geüpload.
HTML naar JSX converter
Plak links HTML en deze converter schrijft rechts JSX terwijl u typt: class wordt className, for wordt htmlFor, inline styles worden objecten in camelCase, void-tags zoals img en input worden zelfsluitend, commentaar gaat tussen accolades en meerdere elementen op het hoogste niveau krijgen een fragment. De conversie draait alleen in uw browser.
Wat er verandert tussen HTML en JSX
HTML
JSX
Waarom
class="box"
className="box"
class is een gereserveerd woord in JavaScript
for="email"
htmlFor="email"
for is ook een gereserveerd woord
style="font-weight: bold"
style={{ fontWeight: 'bold' }}
style neemt een object met keys in camelCase
<img src="a.png">
<img src="a.png" />
Elke tag moet gesloten zijn
onclick="go()"
onClick={go}
Events zijn in camelCase en nemen een functie
data-id="7", aria-label="Close"
data- en aria- behouden hun koppeltekens
Een snippet uit een template, een e-mailbuilder of een iconenset kopiëren naar een React-component loopt meestal stuk op een tiental kleine verschillen. Deze tool past de regels toe die React voor JSX documenteert, legt elke wijziging uit en kan het resultaat in een benoemde component wikkelen, klaar om te plakken.
Plak of typ HTML in het invoervak. De JSX-uitvoer wordt bij elke toetsaanslag bijgewerkt.
Typ eventueel een componentnaam om de uitvoer in een geëxporteerde function component te wikkelen.
Lees de lijst met wijzigingen onder de uitvoer; elke notitie legt één herschrijving van de converter uit.
Kopieer de JSX naar uw componentbestand en vervang lege event handlers door echte functies.
Inline onclick-code kan niet als JSX draaien. De converter bewaart hem als commentaar in een lege handler, zodat u hem naar een functie kunt verplaatsen.
Formuliervelden met value worden defaultValue, zodat ze bewerkbaar blijven. Stap over op value plus onChange als u een controlled input wilt.
SVG-iconen hebben vaak stroke-width en fill-rule; die worden automatisch hernoemd naar strokeWidth en fillRule.
React voegt px toe aan getallen in een style-object, maar deze converter houdt elke waarde als de originele string om exact te blijven.
Veelgestelde vragen
Waarom gebruikt React className in plaats van class?
JSX compileert naar JavaScript, waarin class een gereserveerd woord is. React noemt de prop daarom className. Om dezelfde reden wordt het label-attribuut for omgezet naar htmlFor.
Veranderen data- en aria-attributen in JSX?
Nee. De documentatie van React vermeldt dat aria-* en data-* attributen om historische redenen precies zoals in HTML worden geschreven, met koppeltekens. De meeste andere attributen van meerdere woorden worden camelCase.
Hoe schrijf ik inline styles in JSX?
Geef een object mee aan style met propertynamen in camelCase, bijvoorbeeld style={{ fontWeight: 'bold', marginTop: 8 }}. React voegt voor de meeste properties px toe aan gewone getallen. De buitenste accolades openen een JavaScript-expressie en de binnenste vormen het object.
Waarom krijg ik een fout over meerdere root-elementen?
Een component kan maar één element teruggeven. Wikkel broers en zussen in een parent-element of een leeg fragment, geschreven als <> en </>. De converter doet dit voor u als de HTML meer dan één node op het hoogste niveau heeft.
Wordt mijn HTML ergens naartoe gestuurd?
Nee. De conversie is gewoon JavaScript dat op deze pagina draait. Niets wat u plakt wordt geüpload of opgeslagen.
De drie regels achter elke conversie
De eigen introductie van React tot JSX brengt de verschillen terug tot drie regels: geef één root-element terug, sluit elke tag en schrijf de meeste attribuutnamen in camelCase. Bijna alles wat de converter doet, valt onder een van die drie.
De uitzonderingen zijn gereserveerde woorden en de families met koppeltekens. class en for worden hernoemd omdat JavaScript ze reserveert, terwijl aria- en data-attributen hun HTML-spelling houden.
Wat nog een mens nodig heeft
Inline scripts en strings met event handlers zijn code, geen markup, dus ze moeten als functies in uw component worden herschreven. De converter markeert ze in plaats van te gokken.
Herhaalde blokken zoals lijstitems zijn vaak beter als een array die naar JSX wordt gemapt. Zoek na het converteren naar gekopieerde broers en zussen en maak er data plus een map-aanroep van.
Hernoemingen van attributen die de converter toepast
HTML-attribuut naar JSX-prop
HTML
JSX
className
htmlFor
tabIndex
readOnly
maxLength
colspan / rowspan
colSpan / rowSpan
autoComplete
srcSet
crossOrigin
value op input
defaultValue
checked op input
defaultChecked
strokeWidth
fillRule
viewBox
Inline event handlers zoals onclick zijn omgezet naar lege handlers in camelCase; verplaats de code naar een functie.
value op een formulierveld werd defaultValue, zodat het veld bewerkbaar blijft zonder onChange-handler.
checked werd om dezelfde reden defaultChecked.
selected op een option is verwijderd; stel in plaats daarvan defaultValue in op de select.
Het doctype is verwijderd; JSX heeft geen doctype.
De invoer had meer dan één element op het hoogste niveau, dus die is in een fragment gewikkeld.
Converter
Het voorbeeld hieronder wordt live geconverteerd; vervang het door uw eigen HTML.
Componentnaam (optioneel)
JSX kopiëren
Aangebrachte wijzigingen
Alleen de standaard hernoemingen waren nodig.
De inhoud van <{tag}> is in een template literal gewikkeld, zodat accolades letterlijk blijven.