Saltar al contenido
🛠️ToolsShed

HTML a JSX

Convierte marcado HTML a sintaxis JSX para React. Transforma atributos, estilos en línea y elementos void automáticamente.

Conversiones aplicadas:

  • class → className
  • for → htmlFor
  • style="..." → style={{...}}
  • Elementos void (br, hr, img, input) con autocierre
  • Comentarios HTML convertidos a {/* */}

Acerca de esta herramienta

HTML to JSX es un convertidor que transforma el marcado HTML estándar en sintaxis JSX válida para su uso en aplicaciones React. Al construir componentes React, los desarrolladores a menudo necesitan convertir fragmentos de HTML a formato JSX, lo que requiere cambiar nombres de atributos (class a className), manejar estilos en línea de forma diferente (cadena a objeto) e adaptar elementos void. Esta herramienta automatiza esas transformaciones, ahorrando tiempo y reduciendo errores de conversión manual.

Para usar la herramienta, pegue su código HTML en el cuadro de entrada y haga clic en "Convertir". El convertidor genera instantáneamente una salida JSX válida que puede copiar directamente en sus componentes React. Maneja conversiones comunes como controladores de eventos HTML (onclick a onClick), atributos booleanos (checked, disabled), atributos de datos y nombres de clase CSS. Los casos de uso típicos incluyen migrar plantillas HTML existentes a React, integrar fragmentos HTML de terceros o generar rápidamente JSX de componentes a partir de maquetas.

El convertidor funciona completamente en su navegador sin carga en el servidor, por lo que su código sigue siendo privado. Tenga en cuenta que las plantillas dinámicas complejas o la lógica de renderizado condicional pueden requerir ajustes manuales después de la conversión. Para componentes con gestión de estado compleja o lógica personalizada, el JSX generado sirve como punto de partida sólido que puede refinar aún más.

Preguntas Frecuentes

Implementación de Código

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.