Sviluppatore / React

Convertitore da HTML a JSX

Converti HTML in JSX per React: class diventa className, gli stili inline diventano oggetti, gli elementi vuoti vengono chiusi, le parentesi graffe e i commenti vengono gestiti correttamente e il risultato può essere racchiuso in un componente.

Convertitore da HTML a JSX: L'HTML viene analizzato come elementi, quindi gli attributi vengono rinominati per React (class, for, tabindex, readonly, maxlength e altri), gli stili diventano oggetti con chiavi in camelCase e gli elementi vuoti come <br> e <img> vengono chiusi. Le parentesi graffe e i simboli di maggiore e minore nel testo vengono convertiti in escape, i commenti diventano {/* */} e i valori dei moduli diventano defaultValue e defaultChecked, così i campi restano modificabili. L'output delle pagine di test viene compilato come TSX. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria: Strumenti per sviluppatori
Esecuzioni: Nel browser
Costo: Gratuito · senza registrazione
Disponibilità: Pronto all'uso

Da HTML a JSXElaborazione locale

Funziona interamente nel browser

HTML

<div class="card" style="margin-top: 8px; background-color: #fff">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required>
  <button onclick="send()" tabindex="0">Send</button>
  <!-- footer -->
  <p>Price: {price} &gt; 0</p>
</div>

Racchiudi in un componente

Rimosso onclick="send()" da <button>: scrivilo come funzione, ad esempio onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Gli attributi vengono rinominati per React (class diventa className, for diventa htmlFor, tabindex diventa tabIndex), gli stili diventano oggetti, gli elementi vuoti e void vengono chiusi, i commenti diventano {/* */} e i valori dei moduli diventano defaultValue, così i campi restano modificabili.

Dopo la conversione

Trasforma il markup ripetuto in componenti che accettano props, sostituisci il testo scritto direttamente nel codice con variabili tra parentesi graffe e sposta gli stili inline in classi CSS o nel tuo sistema di stili, perché gli oggetti style vengono ricreati a ogni render.

Per le icone SVG, SVG to JSX crea un componente che trasferisce le props; per eliminare prima commenti e spazi bianchi superflui, usa il minificatore HTML.

Differenze che possono creare problemi

JSX richiede un solo elemento radice, quindi gli elementi aggiuntivi vengono racchiusi in un fragment (<>…</>). Ogni elemento deve essere chiuso, i nomi degli attributi sono in camelCase e il testo che contiene { o } deve essere scritto come {"{"}, operazione che il convertitore esegue per te.

Come usarlo

Incolla l'HTML, da un singolo elemento a un'intera sezione della pagina.
Facoltativamente, racchiudi il risultato in un componente con nome.
Copia il JSX e riscrivi gli event handler inline elencati negli avvisi.

Privacy e limitazioni

L'HTML viene convertito nel tuo browser e non viene mai caricato.

Strumenti correlati

Domande frequenti

Perché gli attributi onclick vengono rimossi?

In HTML sono stringhe di codice; in React devono essere funzioni. Il convertitore elenca ogni attributo, così puoi riscriverlo, ad esempio onclick="save()" come onClick={save}.

Perché value diventa defaultValue?

In React, un attributo value rende il campo controllato, quindi non puoi inserirvi testo senza un gestore onChange; defaultValue imposta il testo iniziale e lascia il campo modificabile.

Gestisce SVG?

Sì: gli attributi SVG come stroke-width diventano strokeWidth. Per un intero file SVG trasformato in un componente, lo strumento SVG to JSX aggiunge le props.

Strumento gratuito · nel browser esecuzioni · senza account