Vai al contenuto
🛠️ToolsShed

HTML to JSX

Converti il markup HTML in sintassi JSX per React. Trasforma automaticamente attributi, stili inline ed elementi void.

Conversioni applicate:

  • class → className
  • for → htmlFor
  • style="..." → style={{...}}
  • Elementi void (br, hr, img, input) auto-chiusi
  • Commenti HTML convertiti in {/* */}

Informazioni sullo strumento

HTML to JSX è un convertitore che trasforma il markup HTML standard in sintassi JSX sintatticamente valida da utilizzare nelle applicazioni React. Quando si creano componenti React, gli sviluppatori spesso devono convertire frammenti HTML in formato JSX, il che richiede la modifica dei nomi degli attributi (class in className), la gestione degli stili inline diversamente (da stringa a oggetto) e l'adattamento degli elementi void. Questo strumento automatizza queste trasformazioni, risparmiando tempo e riducendo gli errori di conversione manuale.

Per utilizzare lo strumento, incolla il tuo codice HTML nella casella di input e fai clic su "Converti". Il convertitore produce istantaneamente un output JSX valido che puoi copiare direttamente nei tuoi componenti React. Gestisce le conversioni comuni come i gestori di eventi HTML (onclick in onClick), gli attributi booleani (checked, disabled), gli attributi dei dati e i nomi delle classi CSS. I casi d'uso tipici includono la migrazione di template HTML esistenti a React, l'integrazione di frammenti HTML di terze parti o la generazione rapida di JSX di componenti dai mockup.

Il convertitore funziona interamente nel tuo browser senza caricamento su server, quindi il tuo codice rimane privato. Tieni presente che i template dinamici complessi o la logica di rendering condizionale potrebbero comunque richiedere aggiustamenti manuali dopo la conversione. Per i componenti con gestione dello stato intricata o logica personalizzata, il JSX generato funge da punto di partenza solido che puoi perfezionare ulteriormente.

Domande Frequenti

Implementazione del Codice

import re

def html_to_jsx(html: str) -> str:
    jsx = html
    # class -> className
    jsx = re.sub(r'\bclass=', 'className=', jsx)
    # for -> htmlFor
    jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
    # HTML comments to JSX
    jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
    # Self-close void elements
    void_elements = ['area','base','br','col','embed','hr','img','input',
                     'link','meta','param','source','track','wbr']
    for tag in void_elements:
        jsx = re.sub(
            rf'<{tag}(\s[^>]*)?>',
            lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
            jsx, flags=re.IGNORECASE
        )
    return jsx

html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.