Le langage JSX
1. Le langage JSX
JSX est une syntaxe React ressemblant à du HTML.
Le navigateur ne comprend pas JSX, donc on utilise Babel pour le convertir en JavaScript
standard.
Ainsi, le code JSX peut être affiché correctement dans une page HTML.
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). JSX est une forme d’écriture des éléments
React, plus simple à lire et à écrire que les instructions [Link](). Cette syntaxe est
donc abondamment utilisée dans les programmes React.
<html>
<head>
<script src="[Link]
crossorigin></script>
<script src="[Link]
crossorigin></script>
<script src="[Link]
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
var p = <p>Hello React</p>; // Code JSX
[Link](p, [Link]("app"));
</script>
</html>
Le code à interpréter par Babel doit être dans une balise <script> avec l’attribut
type="text/babel".
Créer une liste de cinq éléments en JSX
<html>
<head>
<script src="[Link]
crossorigin></script>
<script src="[Link]
crossorigin></script>
<script src="[Link]
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
var liste = <ul>
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
[Link](liste, [Link]("app"));
</script>
</html>
Le code JSX est facile à lire et à écrire. Il s’écrit comme du code HTML, mais il est saisi
dans la partie réservée au code JavaScript (dans la balise <script>). Une même
instruction peut s’écrire sur plusieurs lignes et doit obligatoirement commencer par
une balise ouvrante et se terminer par balise fermante (ici, <ul> et </ul>).
Ajouts d’attributs dans le code JSX
Le code JSX comporte les éléments qui seront affichés dans la page HTML.
Ces éléments peuvent avoir des attributs tels que id, style ou className (l’attribut class est remplacé
par l’attribut className).
Commençons par ajouter les attributs id et className. Pour cela, on définit la classe CSS red dans la
balise
<html>
<head>
<script src="[Link]
crossorigin></script>
<script src="[Link]
crossorigin></script>
<script src="[Link]
</head>
<style type="text/css">
.red {
color : red;
}
</style>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
//var liste = <ul id="list1" className="red">
// ou Définir l’attribut style dans le code JSX
var liste = <ul id="list1" style={{listStyleType:"none",color:"red"}}>
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
[Link](liste, [Link]("app"));
</script>
</html>
En JSX, list-style-type devient listStyleType. L’attribut style s’écrit avec {{…}} et utilise un
objet JavaScript pour définir les styles.
Utilisation d’instructions JavaScript dans le code JSX
En JSX, on peut utiliser du JavaScript entre {} pour évaluer des expressions dynamiques. Par exemple, on
peut définir des styles via un objet JavaScript (style={…}) et les appliquer à des éléments React affichés
avec [Link]().
<html>
<head>
<script src="[Link]
crossorigin></script>
<script src="[Link]
crossorigin></script>
<script src="[Link]
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
var color = "green";
var styleListe = { listStyleType:"none", color:color };
var liste = <ul id="list1" style={styleListe}>
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
[Link](liste, [Link]("app"));
</script>
</html>
Insérer les éléments de liste définis dans un tableau elems
On peut améliorer notre code en insérant les éléments de liste au moyen d’un bloc de code JavaScript.
Les éléments de la liste sont placés dans un tableau elems qui est ensuite parcouru par le code JavaScript
et JSX.
<html>
<head>
<script src="[Link]
crossorigin></script>
<script src="[Link]
crossorigin></script>
<script src="[Link]
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
var color = "red";
var styleListe = { listStyleType:"none", color:color };
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var liste = <ul id="list1" style={styleListe}>
{
// [Link](function(elem, index) {
// return <li key={index}>{elem}</li>
// })
// ++++++++++++++++++ Sans mot function+++++++++++++++++++++++++++++++++++++
// [Link]((elem, index) => {
// return <li key={index}>{elem}</li>
// })
// ++++++ sans accolades ni instruction return dans la fonction de callback+++++
[Link]((elem, index) =>
<li key={index}>{elem}</li>
)
}
</ul>;
[Link](liste, [Link]("app"));
</script>
</html>
2 Créer un élément JSX avec une function
• Créer une fonction qui retourne du code JSX
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var ListeElements = function() {
return <ul>
{
[Link](function(elem, index) {
return <li key={index}>{elem}</li>;
})
}
</ul>
}
[Link](<ListeElements/>, [Link]("app"));
• Retourner uniquement les éléments dans la fonction (sans l’élément )
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var ListeElements = function() {
return [Link](function(elem, index) {
return <li key={index}>{elem}</li>;
})
}
[Link](<ul><ListeElements/></ul>, [Link]("app"));
• Transmettre des attributs dans un élément JSX
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var ListeElements = function(props) {
return <ul>
{
[Link](function(elem, index) {
return <li key={index}>{elem}</li>;
})
}
</ul>
}
[Link](<ListeElements elems={elems}/>, [Link]("app"));
• Transmission de l’attribut style dans l’élément JSX
var elems = ["Element1", "Element2", "Element3", "Element4","Element5"];
var ListeElements = function(props) {
return <ul>
{
[Link](function(elem, index) {
return <li key={index} style={[Link]}>{elem}</li>;
})
}
</ul>
}
[Link](<ListeElements elems={elems} style={{color:"red"}}/>,
[Link]("app"));
Utiliser des expressions conditionnelles dans le code JSX retourné
Il est possible d’utiliser des expressions conditionnelles avec ? et : dans le code JSX, à
condition d’entourer l’ensemble avec des accolades { et } (car cela correspond à une
expression JavaScript qui est évaluée).
Supposons que l’on ait un attribut dans le composant permettant d’indiquer si l’on
doit cacher ou pas le premier élément de la liste.
L’attribut se nommera hideFirstItem et vaut true si l’on doit cacher cet élément, false
sinon.
function ListeElements(props) {
return (
<ul>
{ [Link] ? null : <li>Element1</li> }
<li>Element2</li>
<li>Element3</li>
<li>Element4</li>
<li>Element5</li>
</ul>
)
}
[Link](<ListeElements hideFirstItem={true} />,
[Link]("app"));
3 Commentaires dans le code JSX
On utilise les commentaires /* et */ pour indiquer respectivement le début et la fin du code JSX à
commenter, à la condition d’entourer l’ensemble avec des accolades { et }.
Les commentaires avec // ne fonctionnent pas avec le code JSX… Par exemple, mettons en commentaires
les "Element2" et "Element3" de la liste précédente.
function ListeElements(props) {
return (
<ul>
<li>Element1</li>
{/* <li>Element2</li>
<li>Element3</li>*/}
<li>Element4</li>
<li>Element5</li>
</ul>
)
}
[Link](<ListeElements />, [Link]("app"));
4. Créer un élément JSX avec une classe
Dans la section précédente, nous avons vu comment créer un élément JSX à partir d’une fonction.
Mais on sait que l’on peut également créer des éléments React (et JSX) à partir d’une classe dérivant de la
classe [Link].
Créons maintenant deux classes correspondant aux deux composants utilisés précédemment ( et ).
Ces deux classes dérivent de la classe [Link].
Créer les classes associées aux composants <Element> et <ListeElements>
var elems = ["Element1", "Element2", "Element3", "Element4",
"Element5"];
class Element extends [Link] {
constructor(props) {
super(props);
}
render() {
return <li
style={{color:[Link]}}>{[Link]}</li>
}
}
class ListeElements extends [Link] {
constructor(props) {
super(props);
}
render() {
return <ul>
{
[Link]((elem, index) => {
return <Element key={index} elem={elem}
color={[Link]} />
})
}
</ul>
}
}
[Link](<ListeElements elems={elems} color="red" />,
[Link]("app"));
L’instruction [Link]() est la même que celle utilisée dans la section précédente. On transmet
dans la classe ListeElements les attributs elems et color, utilisés dans la classe via l’objet [Link] qui les
contient.
5. Utiliser une fonction ou une classe pour créer les composants en JSX ?
Cette question se pose car les deux manières vues précédemment sont similaires et abou- tissent
visiblement aux mêmes résultats.
Comme lorsque l’on s’était posé la question au sujet de la création des fonctions ou des classes avec les
éléments React (par [Link]() dans le chapitre précédent), la réponse est similaire:
− on utilisera une fonction si l’on n’a pas besoin de créer des propriétés ou des méthodes pour faciliter
les traitements;
− on utilisera plutôt une classe si des propriétés ou des méthodes sont nécessaires pour les traitements.
En fait, une propriété très importante d’un composant sera la propriété state, permettant de gérer l’état
du composant (ceci est étudié dans le chapitre suivant).
La règle observée est que si le composant possède un état, on utilisera une classe pour le définir (c’est
même dans ce cas obligatoire), sinon une fonction sera suffisante.
6. Règles d’écriture du code JSX
Un seul élément parent peut être retourné Plusieurs éléments JSX de même niveau ne peuvent pas
être retournés simultanément, il est obligatoire qu’ils soient encapsulés dans un élément parent,
qui sera celui retourné (pour être unique), les autres éléments étant ses enfants.
En général on utilise un élément <div> englobant l’ensemble, mais React propose aussi d’utiliser
un composant <[Link]> jouant ce rôle. Remarque : Cette règle est valable également
si on utilise la méthode [Link](), avec laquelle on doit retourner également un seul
élément React parent.
• Utiliser un fragment avec le composant <[Link]>
L’ajout d’un parent, tel qu’un élément <div>, fonctionne lorsqu’on souhaite encapsuler
plusieurs éléments retournés dans un seul. L’inconvénient de cette solution est que
cela ajoute un élément <div> supplémentaire dans le code JSX, sans que cela soit
vraiment nécessaire pour l’application React.
Pour cela, React propose un composant spécifique appelé <[Link]> que l’on
peut utiliser pour ces cas-là.
Utilisons le composant <[Link]> pour englober un ensemble de trois
éléments <div> sans parents. L’élément <[Link]> va devenir le parent des
trois éléments <div>, sans apparaître pour autant dans l’arborescence des éléments
React.
function ListeElements(props) {
return <[Link]>
<div>Element1</div>
<div>Element2</div>
<div>Element3</div>
</[Link]>
}
[Link](<ListeElements />,
[Link]("app"));
L’élément <[Link]> permet de retourner un seul parent, en évitant l’ajout
d’un nouvel élément parent non nécessaire.
Remarquez que React ne visualise pas l’élément <[Link]> dans
l’arborescence des éléments React.
• Utiliser des parenthèses en début et en fin du code JSX
Lorsqu’on retourne un code JSX sur plusieurs lignes (par exemple un élément <ul> suivi
de plusieurs éléments <li>), l’instruction return doit comporter à la suite, sur la même
ligne, le premier élément JSX retourné, sinon une erreur se produit. Cela oblige à
décaler vers la droite le code JSX du premier élément retourné.
Afficher une liste d’éléments sans utiliser des parenthèses
function ListeElements(props) {
return <ul>
<li>Element1</li>
<li>Element2</li>
<li>Element3</li>
<li>Element4</li>
<li>Element5</li>
</ul>
}
[Link](<ListeElements />, [Link]("app"));
Afficher une liste d’éléments en utilisant des parenthèses
function ListeElements(props) {
return (
<ul>
<li>Element1</li>
<li>Element2</li>
<li>Element3</li>
<li>Element4</li>
<li>Element5</li>
</ul>
)
}
[Link](<ListeElements />, [Link]("app"));