Convertisseur HTML en JSX

Qu'est-ce que la conversion HTML vers JSX ?

La conversion HTML vers JSX est le processus de transformation du balisage HTML standard en syntaxe JSX que les composants React peuvent restituer. JSX ressemble à HTML mais suit les conventions de nommage et les règles de JavaScript. Les attributs comme class deviennent className, for devient htmlFor, et les chaînes de style en ligne sont remplacées par des objets JavaScript. Ces modifications sont obligatoires car JSX se compile en appels React.createElement(), où les noms d'attributs doivent correspondre aux noms de propriétés de l'API DOM plutôt qu'aux noms d'attributs HTML.

Le mapping entre les attributs HTML et les props JSX est défini par la documentation des éléments DOM de React. React utilise le camelCase pour les attributs composés de plusieurs mots (tabindex devient tabIndex, maxlength devient maxLength) car les identifiants JavaScript ne peuvent pas contenir de tirets. Les balises auto-fermantes comme <img>, <br> et <input> doivent inclure un slash de fermeture en JSX (<img />) car JSX suit les règles XML où chaque balise doit être explicitement fermée.

Au-delà du renommage des attributs, la conversion HTML vers JSX gère également les styles en ligne et les commentaires. Les attributs style HTML utilisent la syntaxe CSS sous forme de chaîne (style="color: red; font-size: 14px"), tandis que JSX attend un objet JavaScript avec des noms de propriétés en camelCase (style={{ color: 'red', fontSize: '14px' }}). Les commentaires HTML (<!-- -->) deviennent des commentaires d'expression JSX ({/* */}). Manquer l'une de ces transformations produit des erreurs à l'exécution ou des bugs de rendu silencieux dans les applications React.

Pourquoi utiliser un convertisseur HTML vers JSX ?

Renommer manuellement les attributs et réécrire les chaînes de style sur des dizaines d'éléments HTML est lent et source d'erreurs. Un convertisseur gère toutes les transformations en une seule passe, vous permettant de coller du HTML depuis n'importe quelle source et d'obtenir du JSX valide en quelques secondes.

Cas d'utilisation du convertisseur HTML vers JSX

Référence de mapping d'attributs HTML vers JSX

Le tableau ci-dessous liste les attributs HTML qui changent lors de la conversion en JSX. Les attributs non listés ici (id, src, href, alt, placeholder, etc.) restent inchangés car leurs noms HTML correspondent déjà aux noms de propriétés de l'API DOM.

Conversion des styles en ligne : HTML vs JSX

Les styles en ligne sont la partie la plus délicate de la conversion HTML vers JSX car le format de valeur et les noms de propriétés changent tous les deux :

<div style="background-color: #fff;
  font-size: 14px;
  margin-top: 10px;">

<div style={{
  backgroundColor: '#fff',
  fontSize: '14px',
  marginTop: 10
}}>

Exemples de code

Ces exemples montrent comment convertir du HTML en JSX par programmation dans différents langages et environnements. Chacun couvre le renommage des attributs, la conversion des styles et la gestion des balises auto-fermantes.

// Simple attribute conversion using string replacement
function htmlToJsx(html) {
  return html
    .replace(/\bclass=/g, 'className=')
    .replace(/\bfor=/g, 'htmlFor=')
    .replace(/\btabindex=/g, 'tabIndex=')
    .replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}')
}

htmlToJsx('<div class="box" tabindex="0"><!-- note --></div>')
// → '<div className="box" tabIndex="0">{/* note */}</div>'

import parse from 'html-react-parser'

// Parse HTML string into React elements (handles all JSX rules)
const element = parse('<div class="card"><img src="photo.jpg" alt="Photo"></div>')
// Returns: React.createElement('div', { className: 'card' },
//   React.createElement('img', { src: 'photo.jpg', alt: 'Photo' }))

// With custom element replacement
const options = {
  replace(domNode) {
    if (domNode.name === 'img') {
      return <OptimizedImage src={domNode.attribs.src} alt={domNode.attribs.alt} />
    }
  }
}
const custom = parse('<img src="photo.jpg" alt="Photo">', options)

from bs4 import BeautifulSoup
import re

ATTR_MAP = {
    'class': 'className', 'for': 'htmlFor',
    'tabindex': 'tabIndex', 'readonly': 'readOnly',
    'maxlength': 'maxLength', 'autocomplete': 'autoComplete',
}

def html_to_jsx(html: str) -> str:
    """Convert HTML attribute names to JSX equivalents."""
    for html_attr, jsx_attr in ATTR_MAP.items():
        html = re.sub(rf'\b{html_attr}=', f'{jsx_attr}=', html)
    # Convert HTML comments to JSX comments
    html = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', html)
    return html

print(html_to_jsx('<label for="email" class="field">Email</label>'))
# → '<label htmlFor="email" className="field">Email</label>'

package main

import (
    "fmt"
    "strings"
)

var attrMap = map[string]string{
    "class=":    "className=",
    "for=":      "htmlFor=",
    "tabindex=": "tabIndex=",
    "readonly":  "readOnly",
}

func htmlToJSX(html string) string {
    result := html
    for old, new := range attrMap {
        result = strings.ReplaceAll(result, old, new)
    }
    // Convert comments
    result = strings.ReplaceAll(result, "<!--", "{/*")
    result = strings.ReplaceAll(result, "-->", "*/}")
    return result
}

func main() {
    html := `<div class="wrapper"><input readonly tabindex="1"></div>`
    fmt.Println(htmlToJSX(html))
    // → <div className="wrapper"><input readOnly tabIndex="1"></div>
}

Questions fréquentes