Converti HTML in JSX

Converti HTML in JSX: a cosa serve

Incolla l’HTML e la conversione avviene subito: class e for diventano className e htmlFor, attributi come tabindex, maxlength e autocomplete passano in camelCase, style diventa un oggetto, gli attributi booleani restano senza valore, i tag vuoti ricevono la barra e i commenti diventano {/* */}. Gli eventi inline diventano funzioni con il vecchio codice in commento.

Gli attributi data- e aria- restano come sono, e vengono convertiti anche gli attributi SVG. Spunta genera componente per ricevere la funzione pronta con il nome che scegli.

Come si usa

1. Incolla l’HTML.
2. Spunta genera componente se vuoi la funzione pronta.
3. Copia il JSX nel tuo progetto React.

Quando usarlo

• Portare template HTML in progetti React e Next.js.
• Convertire icone SVG in componenti.
• Adattare frammenti copiati da altri siti.

Domande frequenti

Cosa cambia da HTML a JSX?

class diventa className e for diventa htmlFor; gli attributi con trattino o degli eventi vanno in camelCase (tabindex diventa tabIndex, onclick diventa onClick); style diventa un oggetto ({{ marginTop: 8 }}); i tag senza chiusura (img, br, input) ricevono la barra; i commenti diventano {/* */}.

Gli attributi data- e aria- cambiano?

No. data-* e aria-* restano uguali in JSX, con il trattino.

E il JavaScript dentro onclick?

Il contenuto degli eventi inline viene convertito in commento, perché in React l’evento riceve una funzione. Riscrivi l’azione come funzione del componente.

Funziona con gli SVG?

Sì. Gli attributi SVG come stroke-width, fill-rule e xlink:href diventano strokeWidth, fillRule e xlinkHref.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili