HTML til JSX-konverterer
Gratis HTML til JSX-konverterer online. Lim inn HTML og få ren React-JSX med en gang: className, htmlFor, camelCase-stiler, selvstengende tagger og trygge kommentarer – alt i nettleseren.
Hva gjør HTML til JSX-konvertereren?
Den gjør vanlig HTML-markup om til JSX som React kan render. Lim inn HTML i inndatafeltet, så vises tilsvarende JSX i utdatafeltet, oppdatert mens du skriver med en kort debounce.
Hvilke attributter får nye navn?
class blir className, for blir htmlFor, tabindex blir tabIndex, og andre bindestrek-attributter som maxlength, colspan eller stroke-width får sine camelCase-navn i React. data-* og aria-* forblir uendret.
Hvordan konverteres style-attributten?
En CSS-streng som style="background-color: red; font-size: 12px" blir et JavaScript-objekt: style={{backgroundColor:'red', fontSize:'12px'}}, der hver CSS-egenskap skrives i camelCase og verdien står i anførselstegn.
Hvordan håndteres void-elementer?
Elementer som ikke kan ha barn — img, br, input, hr, meta, link og resten — normaliseres til selvstengende syntaks: <img> blir <img />, nøyaktig som JSX krever. Tomme div-er og span-n stenges på samme måte.
Hva skjer med HTML-kommentarer?
De blir JSX-kommentarer: <!-- notat --> blir {/* notat */}. Sekvenser som ville avsluttet kommentaren for tidlig nøytraliseres, slik at den genererte koden alltid kompilerer.
Hvordan behandles entiteter og spesialtegn?
Entiteter som & eller © dekodes til ekte tegn, deretter eskapes klammer og vinkler på nytt i JSX-sikker form, så tekst med { } eller < vises riktig uten å ødelegge komponenten.
Hva gjør alternativet funksjonskomponent?
Den pakker den konverterte markupen inn i en ferdig mal: function Component() { return ( ...din JSX... ) } i stedet for rå JSX. Slå den på når du vil lime utdraget rett inn i en React-fil.
Blir HTML-en min lastet opp noe sted?
Nei. Tolkningen skjer helt i nettleseren din med den innebygde DOMParseren. Ingenting sendes til noen server, så privat markup er trygg å konvertere, og verktøyet fungerer også frakoblet.
Slik bruker du HTML til JSX-konverterer
Konverter vanlig HTML til klartilbruk React JSX uten å forlate nettleseren. Alt analyseres lokalt med den innebygde DOMParseren — markeringen din lastes aldri opp.
- Lim inn HTML-en din i venstre editor; JSX-resultatet vises til høyre og oppdateres mens du skriver (300 ms debounce).
- Velg innrykksbredde i "Innrykk" — 2 eller 4 mellomrom per nestenivå.
- Slå på "Funksjonskomponent" for å pakke utdata inn i function Component() { return ( ... ) }, klar til å limes inn i en React-fil.
- Bruk Kopier for å ta resultatet, Eksempel for å laste en prøve, eller Tøm for å starte på nytt.
class, for og tabindex blir className, htmlFor og tabIndex, style-strenger blir camelCase-objekter, og tomme elementer som img eller br skrives ut selvavsluttende — akkurat det JSX forventer.
Relaterte verktøy
- HTML-forskjønnelse Formater og forskjønn HTML-kode umiddelbart. Konverter minifisert HTML til ren, lesbar kode. Gratis onlineverktøy, ingen registrering nødvendig.
- Kode til Bilde Konverter kodebiter til delbare bilder med syntaksutheving, tilpassede temaer og vindusdekorasjoner. 100% personvern, alt i nettleseren din.
- Hash-sjekk Beregn og verifiser MD5, SHA-1, SHA-256, SHA-512 filhasher lokalt
- Chmod-kalkulator Gratis online chmod-kalkulator for å visualisere og beregne Linux-filrettigheter med avmerkingsbokser. Konverter umiddelbart mellom numerisk (755, 644) og symbolsk notasjon (rwxr-xr-x). Støtter spesielle rettigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-tegnkodingsreferanse med desimale, heksadesimale, oktale, binære koder, HTML-enheter og tegnbeskrivelser. Umiddelbar søk og filtrering.
- Hex-viser Vis filinnhold i hex-dump-format med søk, offset-navigering og virtuell rulling
- MIME-type Oppslag Finn MIME-typer umiddelbart etter filutvidelse eller søk utvidelser etter MIME-type. Gratis nettverktøy med over 1000 oppføringer.
- Skjermoppløsningssjekk Oppdager skjermoppløsning, viewport-størrelse, DPI og fargedybde i sanntid.