Module : React Js
Atelier 2 JSX
Rappel
La construction d’une arborescence d’éléments React au moyen
de React.createElement() n’est pas aisée. De plus, cette méthode ne permet
pas de bien visualiser l’arborescence qui sera effectivement construite (du
fait du mélange d’instructions Javascript avec du code HTML au milieu).
Les concepteurs de React ont donc cherché un moyen d’alléger l’écriture et
leur choix s’est porté sur l’utilisation de JSX (JavaScript eXtension).
Exemple : Hello JSX
Hello React avec JSX
JSX est nouvelle forme d’écriture des éléments React. Par exemple, voici un paragraphe
contenant Hello React dans son texte.
var p = <p>Hello React </p> // Code JSX
Ce code JSX ne peut pas être interprété par votre navigateur préféré. Il faut qu’il soit traduit
en code Javascript pour pouvoir être interprété par le navigateur. Pour traduire le code JSX en
Javascript, nous allons utiliser l’outil Babel. Vous pouvez tester cette transformation sur le
site WEB de Babel.
Ce code JSX ne peut pas être interprété par votre navigateur préféré. Il faut qu’il soit traduit
en code Javascript pour pouvoir être interprété par le navigateur.
1. Utilisez Babel pour traduire le code ci-dessus : tester ça sur l’outil Babel enligne.
2. Créez une page test.html où
a. Vous indiquez que vous utilisez JSX
b. Insérez le code Js dans la même page. Que faut il rajouter pour le navigateur
identifie le code JSX.
Solution :
On inclut le fichier Javascript de Babel au moyen de la balise <script
src="..."> , puis on indique quelle partie du code Javascript est à interpréter
par Babel. Pour cela, on inclut l’attribut type="text/babel" dans la
balise <script> contenant le code Javascript (et JSX).
Exercice1 : Liste au moyen de fonctions
Le but de cet exercice est de créer deux éléments imbriqués ListeElements et Eléments
à travers les fonctions.
1. Créer une variable Element où vous allez stocker une fonction retournant une
balise <li>
2. Créer maintenant une variable ListeElements où vous ferez appel à 5
Elements.
3. Vous allez réalisez le même travail en utilisant cette fois une liste d’éléments
plus la fonction prédéfinie map .
Remarque : vous pouvez utilisez soit les fonctions soit les composants
Exercice 2 : Liste au moyen de composants
Le but de React est de vous permettre de créer plusieurs composants à utiliser dans
différents endroits de votre application.
Vous allez créer un composant <ListeElements> qui représente la liste des
éléments à afficher sous forme d’une liste. Le composant principal <ListeElements>
est fait de plusieurs Element.
Exercice 3 : utilisation des props.
Reprenez l’exercice 1 pour :
1. Rajouter un attribut color à <li> et changer ainsi sa coleur.
2. Passer cet attribut comme paramètre à la fonction Element.
3. Dans la fonction ListeElements faite appel à Element en rajoutant l’attribut
color.
4. Maintenant reprenez l’exercice 2 pour rajouter les propos au composant
Element puis lui faire appel dans <ListeElements> en lui passant un couleur.
5. Pour éliminer certains messages warnings rajouter un index à chaque Element.
