Softonic

HTML naar JSX converter

Stap 1 / 2

Converts: class naar className, for naar htmlFor, inline styles naar JSX objects, self-closes void tags, removes HTML comments.

converteren naar JSX

JSX ziet eruit als HTML totdat het dat niet meer is: class is className, for is htmlFor, style is een object en geen string, en elke void-tag moet zichzelf sluiten. Plak HTML en deze converter levert JSX op dat bij de eerste poging compileert, zodat je een marketingpagina in een React-component kunt tillen zonder de komende tien minuten achter compilerfouten aan te jagen.

HTML naar JSX converteren

  1. 1

    Plak HTML

    De markup van een component, of een volledig paginagedeelte.

  2. 2

    Converteren

    De tool hernoemt attributen zoals `class`, `for` en `readonly` naar hun JSX-schrijfwijze en zet inline styles om naar objecten.

  3. 3

    Bekijk de JSX

    De uitvoer is klaar om in een `.jsx`- of `.tsx`-bestand te plakken.

  4. 4

    Kopieer en plak

    De code gebruikt uitdrukkingen op één regel, dus hij past goed binnen een bestaande component.

Elk HTML-naar-JSX-verschil dat ertoe doet

JSX is geen HTML. Het is een JavaScript-expressie die compileert naar React.createElement()-aanroepen, dus attribuutnamen volgen de JavaScript-conventies.

De converter voert de meest voorkomende hernoemingen automatisch uit. De volledige lijst hieronder is de referentie die je nodig hebt als je zelf JSX schrijft.

Hernoemingen van attributen

HTML JSX Opmerkingen
class className class is gereserveerd in JS
for htmlFor for is gereserveerd
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Namespaces met dubbele punt afgevlakt
aria-label aria-label ARIA behoudt de streepjes
data-* data-* Data-attributen behouden de streepjes

Het style-attribuut

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Numerieke waarden zonder eenheid worden pixels; houd strings voor percentages en eenheidloze waarden zoals flex.

Zelfsluitende void-elementen

HTML tolereert <br> en <input> zonder sluittag. JSX vereist <br /> en <input />, elk element moet expliciet worden gesloten.

Opmerkingen

HTML-commentaar (<!-- -->) is niet geldig in JSX-lichamen. Deze converter verwijdert het; als je een notitie wilt bewaren, schrijf die dan zelf als {/* JavaScript-blokcommentaar */}.

Booleaanse attributen

HTML: <input checked> (of <input checked="checked">)

JSX: <input checked={true} /> of gewoon <input checked />. Geef nooit de string “true” door.

Ontsnappingsluiken

  • Onbetrouwbare HTML-fragmenten kunnen worden weergegeven met dangerouslySetInnerHTML={{ __html: ... }}, opzettelijk lelijk om gebruik te ontmoedigen.
  • Aangepaste data-*-attributen blijven zoals ze zijn; niet-standaard attributen worden doorgegeven, maar kunnen React-waarschuwingen in de ontwikkelmodus veroorzaken.

Veelgestelde vragen

SVG-attributen zoals stroke-width moeten in JSX in camelCase (strokeWidth) worden geschreven en elke tag moet zichzelf sluiten. De converter sluit void-tags binnen SVG zelf af en zet eigenschapsnamen in stijlstrings om naar camelCase, maar hernoemt geen SVG-attributen; verander stroke-width handmatig in strokeWidth. Voor losse iconen is de schoonste aanpak om het icoon als SVG-bestand op te slaan en het via svgr als component te importeren.

Ja, zowel JSX als TSX gebruiken className. De enige uitzondering is binnen dangerouslySetInnerHTML, waar de ruwe HTML-string class behoudt omdat deze ongewijzigd in de DOM wordt geplaatst.

Nee. De uitvoer is alleen het JSX-fragment, zonder export default function-wrapper en zonder typeannotaties. Plak het in je .jsx- of .tsx-bestand en voeg zelf props, types en de wrapper toe. class wordt nog steeds omgezet naar className, precies wat TSX verwacht.

Ze worden ongewijzigd doorgegeven. De converter hernoemt geen event handlers, dus verander onclick in onClick en vervang de stringwaarde door een echte functie, bijvoorbeeld onClick={() => doThing()}. Je moet doThing definiëren in de scope van je component.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

HTML-opmaker

Formatteer HTML lokaal in de browser met twee of vier spaties inspringing. HTML wordt niet geüpload of gevalideerd.

Tool beschikbaar in andere talen