Hello les codeurs,

L’utilisation du JSX pour construire une application React nécessite de respecter certaines contraintes. Il existe en réalité plusieurs petits cas particuliers mais nous verrons ensemble les principales contraintes à connaitre.

Compiler votre projet: une obligation?

La principale est sans doute la plus effrayante pour les débutants. Ces derniers sont souvent habitués à ouvrir leur fichier index.html dans leur éditeur de code et à l’afficher directement dans leur navigateur pour voir le résultat. Or lorsque l’on code en JSX, il est obligatoire de compiler votre code. Mais pas d’inquiétude! De nombreux outils existent pour ne pas avoir à se préoccuper de la compilation de notre application:

  • Pour les débutants, commencer à coder sur JSFiddle est une excellente option pour apprendre les bases de React et du JSX

  • Pour les plus confirmés, la librairie JS “create-react-app” de Facebook permet de créer un projet à part entière. Néanmoins, c’est une librairie assez pointue donnant accès à de nombreuses fonctionnalités pas toujours nécessaires pour de petites applications. Nous verrons ensemble dans un tutoriel (à venir) comment préparer un projet de départ avec create-react-app

Changement de certains attributs de balise (class, tabindex…)

Une autre contrainte du JSX est que certains noms, certains mots sont réservés et ne peuvent pas être utilisés. La conséquence la plus marquante est que l’on ne peut pas utiliser le mot “class” pour donner une classe CSS à une balise div, par exemple. Au lieu de cela on utilisera “className”:

const monBlocDeJSX = <div className="maClasseCSS">Ceci est un bloc de JSX!</div>

Et voilà pour les contraintes associées à l’utilisation du JSX dans vos applications React. Pour mieux voir comment tout ça fonctionne en pratique je vous invite à lire mon article Comprendre les bases de ReactJS: le JSX.