Comme j'ai pu vous l'expliquer dans le cours sur le JSX, la notation des attributs HTML est spécifique. Comme on parle de propriété d'un composant et non plus directement d'un attribut, il existe quelques différences. Par exemple :
L'élément <label> est généralement utilisé dès que vous souhaitez traiter un formulaire, autant dire c'est plutôt courant. On lui associé l'attribut for qui permet de prendre le contrôle d'un élément.
En HTML, on écrit donc l'attribut comme ci-dessous :
En JSX, l'attribut for est disponible sous le nom de la propriété htmlFor
Utilisé notamment pour le CSS, cet attribut vous permet de spécifier les class d'un élément HTML :
En JSX, ce mot-clé est disponible sous le nom de la propriété className
Il existe d'ailleurs une librairie très intéressante qui va vous permettre de gérer vos class comme un objet JavaScript et ainsi de pouvoir y affecter des conditions. Celle-ci s'appelle classnames
Voici un exemple rapide d'utilisation
Dans cet exemple, ma <div> peut avoir jusqu'à 2 class. Par défaut, j'aurais toujours la class my-modal puisque la condition est toujours vraie. L'autre class modal-is-open va s'ajouter à ma div uniquement si l'état local (cours sur State et Props) que j'ai appelé isOpen devient vrai (true). Pour cela, il suffit de cliquer sur le bouton.
Celui-ci ne bouge pas. Le mot-clé style est gardé mais pourquoi le voir ? Il correspond bien au style inline de votre composant cependant, vous devez l'écrire sous la forme d'un objet JavaScript.
Il n'y a pas d'autres attributs HTML qui sont affectés. En revanche, il peut vous arriver de devoir utiliser la notation camelCase. Par exemple tabindex devra être écrit tabIndex.
Pour les utilisateurs de mot-clé comme data-xxx, vous pourrez continuer de l'utiliser car il est bien interprété. Il en va de même pour les balises dédiées à l'accessibilité avec le mot-clé aria-