Informazioni su questo strumento
Il convertitore Da HTML a JSX / React analizza uno snippet HTML con il DOMParser nativo del browser e lo ri-serializza come JSX valido, sistemando tutto ciò di cui React ha bisogno. Funziona interamente lato client, quindi il markup che incolli resta sulla tua macchina. Incolla qualsiasi HTML — un'esportazione di design, un template di email, uno schizzo di componente — e ottieni JSX da inserire direttamente in un file React.
La riscrittura rinomina gli attributi riservati (class diventa className, for diventa htmlFor), rende gli altri in camelCase — tabindex in tabIndex, maxlength in maxLength, stroke-width in strokeWidth — lasciando intatti gli attributi data-* e aria-*. Gli elementi void come img, br, input e hr vengono autochiusi (<img />), i commenti HTML diventano {/* ... */}, le parentesi graffe letterali nel testo vengono escapate come {'{'}, e una stringa inline style="a:b;c:d" viene convertita in un oggetto style={{ a: 'b', c: 'd' }} con chiavi CSS in camelCase. Gli attributi booleani come disabled possono essere emessi nudi o come ={true} con un interruttore.
Scegli l'output fragment — più nodi radice vengono automaticamente racchiusi in un fragment <>...</> — o l'output a componente completo, che racchiude il JSX in un export default function con il nome e l'indentazione che scegli (2 spazi, 4 spazi o tab). Il risultato è pronto da incollare; poiché l'analisi usa un DOM reale, l'annidamento malformato viene normalizzato allo stesso modo di un browser.