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

Webpack-configuratiegenerator

Maak een webpack.config.js voor webpack 5 vanuit een kort formulier: stel entry, uitvoermap en mode in en zet TypeScript, Babel, een CSS-loader, HtmlWebpackPlugin en een dev-server aan.

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Sneltoetsenoverzicht

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

Tool beschikbaar in andere talen