Hello les codeurs, Comprendre le fonctionnement de React n’est pas forcément évident pour les développeurs débutants, ni même parfois pour les confirmés! Pour autant, avoir une bonne compréhension globale du framework JS vous permettra de penser et construire des applications React efficaces et robustes. C’est pourquoi je vous propose de décortiquer les principes de base de ReactJS ensemble dans cette série d’articles. Le JSX est une syntaxe très proche du Javascript qui est utilisée par la plupart des développeurs pour construire leurs applications web en ReactJS et qui donne accès à pas mal de fonctionnalités utiles. Voyons ensemble dans un premier temps qu’est-ce que le JSX.

Qu’est ce que le JSX?

Le JSX permet de créer de manière rapide et efficace vos applications React. Gardez en tête que vous ne serez pas trop dépaysé si vous maitrisez bien les notions de bases du Javascript et du code HTML. Voici un exemple: 
const monBlocDeJSX = <div>Ceci est un bloc de JSX!</div>
On voit que l’on peut stocker un bloc de code de type HTML directement dans une variable. C’est ce qui va nous permettre de ne quasiment plus avoir à modifier le fichier index.html de notre application web; tous nos éléments, nos boutons, nos inputs, nos listes pourront être uniquement codés en JSX. Cela nous donnera accès à de nombreuses features très utiles, mais cela va aussi apporter quelques contraintes (pour en apprendre plus sur la question, je vous invite à lire mes articles dédiés Découvrir les fonctionnalités du JSX et Les contraintes du JSX).

Mise en pratique dans un environnement React

Si l’on prend notre projet de départ React sur JSFiddle (voir mon article Configurer votre projet React sur JSFiddle) on peut faire un rapide test en écrivant dans la case React: 
// Notre bloc de JSX
const monBlocDeJSX = <div>Ceci est un bloc de JSX!</div>

// Méthode render de la librairie ReactDOM qui va afficher un
// élément React dans un élément HTML cible
ReactDOM.render(monBlocDeJSX, document.getElementById('app'))
Et tadaa! Notre bloc est bien affiché dans la case résultat!
Pour créer un bloc de code ayant des enfants, par exemple une liste on utilisera cette notation: 
const monBlocDeJSXAvecEnfants = (
  <ul>
    <li>premier enfant</li>
    <li>deuxième enfant</li>
  </ul>
)
On répète la même opération dans JSFiddle, et notre liste s’affiche bien, top!
Et voilà! Nous venons de créer notre premier élément JSX. Pour en apprendre plus sur le JSX et ses fonctionnalités, je vous invite à lire mon article Découvrir les fonctionnalités du JSX.