Pourquoi JSX diffère de HTML
JSX est une extension de syntaxe pour JavaScript qui ressemble à HTML mais suit les conventions de nommage JavaScript. Comme class et for sont des mots réservés en JavaScript, React utilise className et htmlFor à la place. Les styles inline doivent être des objets JavaScript avec des propriétés camelCase plutôt que des chaînes CSS. Comprendre ces différences est essentiel.
Transformations clés des attributs
Les transformations les plus courantes incluent class en className, for en htmlFor, tabindex en tabIndex et onclick en onClick. Les styles inline passent de chaînes à objets où les noms de propriétés utilisent le camelCase: background-color devient backgroundColor. Les attributs booléens comme disabled et checked fonctionnent sans valeurs explicites en JSX.
Balises auto-fermantes en JSX
HTML autorise les éléments vides comme img, br et input sans balises fermantes ni barres obliques. JSX exige que tous les éléments soient explicitement fermés; les éléments vides doivent utiliser la syntaxe auto-fermante avec barre oblique comme <img /> et <br />. Cette exigence stricte assure que l'analyseur JSX construise correctement l'arbre.
Bonnes pratiques après conversion
Après avoir converti HTML en JSX, vérifiez la sortie pour les valeurs codées en dur qui devraient devenir des props ou variables d'état. Extrayez les patterns JSX répétés en composants réutilisables. Remplacez les noms de classes statiques par des expressions dynamiques utilisant des template literals ou des bibliothèques comme clsx pour une meilleure maintenabilité.
