Convertitore HTML in JSX

Converti HTML in React JSX: className, htmlFor, tag auto-chiudenti e oggetti di stile

Che cos'è e come funziona?

Un convertitore da HTML a JSX riscrive HTML semplice nella sintassi JSX che usano i componenti React, correggendo le differenze che altrimenti renderebbero il markup non valido in un file React. JSX sembra quasi identico all'HTML, ma una manciata di attributi e regole sono diversi perché JSX è in realtà JavaScript: class diventa className, for diventa htmlFor, ogni tag deve essere chiuso esplicitamente, e gli stili inline si scrivono come un oggetto JavaScript invece di una stringa. Incollare HTML reale e ottenere JSX valido fa risparmiare il noioso e soggetto a errori lavoro di convertirlo a mano.

È proprio il compito che ricorre di continuo quando si porta un design, un template di email o uno snippet da qualsiasi parte del web in un progetto React. A mano significa scovare ogni attributo class, autochiudere ogni <img> e <br>, e rimodellare style="color:red" in style={{ color: 'red' }} — facile da perdere in un blocco grande e frustrante da debuggare quando il build fallisce. Questo strumento applica tutte queste trasformazioni nel browser, così ottieni JSX pronto da incollare senza inviare il tuo markup da nessuna parte.

Casi d'uso

• Portare un design in React: incolla HTML da un mockup o template e ottieni JSX da inserire direttamente in un componente.
• Riutilizzare uno snippet: converti HTML copiato dal web così funziona dentro un file React senza correzioni manuali.
• Migrare markup: trasforma l'HTML di una pagina statica esistente in JSX come parte dello spostamento in un'app React.

Domande frequenti

Perché class diventa className in JSX?

Perché JSX si compila in JavaScript, e class è una parola riservata in JavaScript. React usa className al suo posto per impostare la classe dell'elemento. Allo stesso modo, for (riservata negli elementi label) diventa htmlFor. Il convertitore li rinomina automaticamente così il JSX è valido.

Come vengono gestiti gli stili inline?

In HTML uno stile è una stringa come "color: red; font-size: 14px". In JSX deve essere un oggetto JavaScript con proprietà in camelCase: style={{ color: 'red', fontSize: '14px' }}. Il convertitore rimodella la stringa in questa forma a oggetto, inclusa la conversione dei nomi di proprietà con trattino.

Perché ogni tag deve essere chiuso in JSX?

JSX richiede che ogni elemento sia chiuso esplicitamente, quindi gli elementi vuoti come <img>, <br> e <input> diventano autochiudenti (<img />). L'HTML è tollerante su questo, ma JSX altrimenti non compila, ecco perché il convertitore aggiunge le barre di chiusura.

Gestisce i commenti HTML e altre stranezze?

I commenti JSX usano una sintassi diversa ({/* ... */}) dai commenti HTML (<!-- ... -->), e anche alcuni altri attributi differiscono. Un buon convertitore traduce i casi comuni; per markup insolito, rivedi l'output, dato che alcuni casi limite potrebbero ancora necessitare un tocco manuale.

Sviluppatore

Generatore UUID · Convertitore di timestamp · Codificatore Base64 · Decodificatore Base64 · Generatore di hash · Convertitore di colori