Convertitore da HTML a JSX: gratis, gira nel tuo browser | We.Inc
Incolla HTML e ottieni JSX valido: class in className, for in htmlFor, stringhe di stile in oggetti, tag void chiusi, commenti, eventi e un componente che li racchiude. Niente viene caricato.
Convertitore da HTML a JSX
Incolla HTML a sinistra e questo convertitore scrive JSX a destra mentre digiti: class diventa className, for diventa htmlFor, gli stili inline diventano oggetti in camelCase, i tag void come img e input vengono autochiusi, i commenti finiscono tra parentesi graffe e più elementi di primo livello vengono racchiusi in un fragment. La conversione avviene solo nel tuo browser.
Cosa cambia tra HTML e JSX
HTML
JSX
Perché
class="box"
className="box"
class è una parola riservata in JavaScript
for="email"
htmlFor="email"
Anche for è una parola riservata
style="font-weight: bold"
style={{ fontWeight: 'bold' }}
style accetta un oggetto con chiavi in camelCase
<img src="a.png">
<img src="a.png" />
Ogni tag deve essere chiuso
onclick="go()"
onClick={go}
Gli eventi sono in camelCase e accettano una funzione
data-id="7", aria-label="Close"
data- e aria- mantengono i trattini
Copiare uno snippet da un template, da un editor di email o da un set di icone dentro un componente React di solito si rompe su una dozzina di piccole differenze. Questo strumento applica le regole che React documenta per JSX, spiega ogni modifica fatta e può racchiudere il risultato in un componente con nome pronto da incollare.
Incolla o scrivi HTML nella casella di input. L'output JSX si aggiorna a ogni tasto premuto.
Se vuoi, scrivi un nome di componente per racchiudere l'output in un function component esportato.
Leggi l'elenco delle modifiche sotto l'output; ogni nota spiega una riscrittura fatta dal convertitore.
Copia il JSX nel file del tuo componente e sostituisci eventuali gestori di eventi vuoti con funzioni reali.
Il codice inline di onclick non può essere eseguito come JSX. Il convertitore lo conserva come commento dentro un gestore vuoto così puoi spostarlo in una funzione.
I campi dei moduli con value diventano defaultValue, che li mantiene modificabili. Passa a value più onChange se vuoi un input controllato.
Le icone SVG hanno spesso stroke-width e fill-rule; vengono rinominati automaticamente in strokeWidth e fillRule.
Ai numeri in un oggetto style React aggiunge px, ma questo convertitore mantiene ogni valore come stringa originale per restare esatto.
Domande frequenti
Perché React usa className invece di class?
JSX viene compilato in JavaScript, dove class è una parola riservata. Per questo React chiama la prop className. Lo stesso ragionamento trasforma l'attributo for delle label in htmlFor.
Gli attributi data- e aria- cambiano in JSX?
No. La documentazione di React osserva che, per ragioni storiche, gli attributi aria-* e data-* si scrivono esattamente come in HTML, con i trattini. La maggior parte degli altri attributi composti da più parole diventa camelCase.
Come scrivo gli stili inline in JSX?
Passa a style un oggetto con nomi di proprietà in camelCase, per esempio style={{ fontWeight: 'bold', marginTop: 8 }}. React aggiunge px ai numeri semplici per la maggior parte delle proprietà. Le graffe esterne aprono un'espressione JavaScript e quelle interne sono l'oggetto.
Perché ricevo un errore su più elementi radice?
Un componente può restituire un solo elemento. Racchiudi gli elementi fratelli in un elemento genitore o in un fragment vuoto, scritto <> e </>. Il convertitore lo fa per te quando l'HTML ha più di un nodo di primo livello.
Il mio HTML viene inviato da qualche parte?
No. La conversione è JavaScript puro che gira in questa pagina. Niente di ciò che incolli viene caricato o salvato.
Le tre regole dietro ogni conversione
L'introduzione a JSX di React riduce le differenze a tre regole: restituire un solo elemento radice, chiudere ogni tag e scrivere la maggior parte dei nomi degli attributi in camelCase. Quasi tutto ciò che fa il convertitore rientra in una di queste tre.
Le eccezioni sono le parole riservate e le famiglie con trattino. class e for vengono rinominati perché JavaScript li riserva, mentre gli attributi aria- e data- mantengono la grafia HTML.
Cosa richiede ancora una persona
Gli script inline e le stringhe dei gestori di eventi sono codice, non markup, quindi vanno riscritti come funzioni nel tuo componente. Il convertitore li segnala invece di tirare a indovinare.
I blocchi ripetuti come gli elementi di una lista spesso stanno meglio come array mappato in JSX. Dopo la conversione, cerca elementi fratelli copiati e incollati e trasformali in dati più una chiamata a map.
Attributi rinominati dal convertitore
Da attributo HTML a prop JSX
HTML
JSX
className
htmlFor
tabIndex
readOnly
maxLength
colspan / rowspan
colSpan / rowSpan
autoComplete
srcSet
crossOrigin
value su input
defaultValue
checked su input
defaultChecked
strokeWidth
fillRule
viewBox
I gestori di eventi inline come onclick sono stati trasformati in gestori vuoti in camelCase; sposta il codice in una funzione.
value su un campo del modulo è diventato defaultValue, così il campo resta modificabile senza un gestore onChange.
checked è diventato defaultChecked per lo stesso motivo.
selected su un option è stato rimosso; imposta invece defaultValue sul select.
Il doctype è stato rimosso; JSX non ha doctype.
L'input aveva più di un elemento di primo livello, quindi è stato racchiuso in un fragment.
Convertitore
L'esempio qui sotto viene convertito dal vivo; sostituiscilo con il tuo HTML.
Nome del componente (facoltativo)
Copia JSX
Modifiche apportate
Sono servite solo le rinominazioni standard.
Il contenuto di <{tag}> è stato racchiuso in un template literal così le graffe restano letterali.