Module: Développer en Front-end
3. Manipuler les éléments DOM à l’aide
de JSX
Filière: Développement digital – option web full stack
Cours:
Réalisé par : ABDELMOUNIM BENDAOUD et NOUREDDINE ABABAR
Adapté par : ELMAUDNI WAFAE et YOUALA ASMAE
Définition
▪ JSX, qui signifie JavaScript XML, est une extension de JavaScript couramment utilisée dans le développement web pour
créer des interfaces utilisateur. C'est une syntaxe qui ressemble à du HTML, mais qui est en réalité interprétée par
JavaScript.
▪ JSX est une forme d’écriture des éléments React, plus simple à lire et à écrire que les instructions [Link]()
▪ les deux propriétés de base pour ce qui est des balises utilisées :
➢ Toute balise commençant par une minuscule (div, span, label, etc.) est réservé aux éléments HTML. Ces éléments
sont déclarés par React DOM, et vous obtiendrez une erreur si vous utilisez un élément inexistant.
➢ Toute balise commençant par une majuscule (Greetings, App, etc.) doit être déclarée explicitement, ce doit donc être
un élément du scope courant : fonction déjà déclarée, composant importé d’une bibliothèque ou d’un autre fichier…
2
Définition :
▪ JSX est donc une forme nouvelle 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
Il sera traduit par Babel en code JavaScript standard en utilisant les fonctions de création d'éléments React.
Voici comment il sera généralement transformé .
var p = [Link]("p", null, "Hello React");
JSX est donc une forme nouvelle d’écriture des éléments React .
L'utilisation de JSX permet de créer et de rendre un composant très lisible et expressive.
▪ Pour afficher ce paragraphe, on utilise l’outil Babel pour interpréter le code JSX et de le transformer en interne en
code JavaScript compréhensible par le navigateur.
3
Exemples: Eléments JSX
▪ Créer une liste de cinq éléments en JSX
const root = [Link]([Link]('root'));
var liste = <ul>
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
[Link](liste);
▪ 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>).
4
Utilisation d’instructions JavaScript dans le code JSX
▪ On peut utiliser des instructions JavaScript dans du code JSX, à condition d’entourer les instructions JavaScript avec
des accolades. Chaque instruction entourée d’accolades est évaluée par le navigateur, et son résultat est inséré en
lieu et place de l’instruction JavaScript évaluée. Ceci permet de créer du code JSX qui s’adapte aux conditions définies
dans le programme.
▪ Exemple:
let message = "Bonjour!";
var texte= <div>
<h1>Bienvenue dans notre application</h1>
<p>{message}</p>
</div>;
[Link](texte);
5
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.
<style type="text/css"> var liste = <ul id="list1" className="red">
.red { <li> Element1 </li>
color : red; <li> Element2 </li>
} <li> Element3 </li>
</style> <li> Element4 </li>
<li> Element5 </li>
</ul>;
[Link](liste);
6
Ajout de l’attribut style en JSX
▪ La syntaxe à utiliser pour insérer l’attribut style est légèrement différente
▪ le style doit, dans ce cas, être défini au moyen d’un objet JavaScript.
var styleListe = { listStyleType:"none", color:"red" };
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);
▪ La propriété list-style-type s’écrit dans le code JavaScript sous la forme listStyleType, en remplaçant comme
d’habitude chaque tiret et la lettre qui le suit par une majuscule.
▪ L’instruction JavaScript {styleListe} indique de calculer la valeur de l’expression styleListe, puis d’affecter cette valeur
au style de l’élément dans le code JSX.
7
Ajout de l’attribut style en JSX
▪ L’attribut style est défini en utilisant les caractères {{ et }}: Les accolades extérieures indiquent que l’expression à
l’intérieur est une expression JavaScript. De plus, le style est un objet JavaScript.
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);
8
Exemple : Insérer les éléments de liste définis dans un tableau
▪ 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.
▪ toute expression JavaScript doit être encadrée par des accolades
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>
})
}
</ul>;
[Link](liste);
▪ Ajouter un attribut key lors de l'utilisation de map en JSX est nécessaire pour permettre à React d'identifier de manière
unique chaque élément généré, ce qui facilite la mise à jour et l'optimisation des performances lors de la réconciliation
de l'interface utilisateur.
▪ L’attribut key permet d’éviter un avertissement lors de l’exécution du code (message d’erreur «Each child in an array or
iterator should have a unique "key" prop.»). 9
Utiliser la notation ES6 pour définir la fonction
var color = "red";
var styleListe = { listStyleType:"none", color:color };
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var liste = <ul id="list1" style={styleListe}>
{
[Link]((elem, index) => { [Link]((elem, index) =>
return <li key={index}>{elem}</li> <li key={index}>{elem}</li>
}) )
}
</ul>;
[Link](liste);
10
Créer un élément JSX
▪ L’intérêt de JSX est qu’il permet de créer ses propres éléments HTML, qui seront vus comme des éléments React (écrits
en JSX). On va donc ici apprendre à créer l’élément <ListeElements> qui représentera la liste <ul> contenant les
éléments <li>.
▪ Créer une fonction qui retourne du code JSX : Un élément défini en JSX, tel que <ListeElements/>, doit obligatoirement
commencer par une majuscule
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/>);
11
Autrement : Retourner uniquement les éléments <li> dans la fonction (sans l’élément <ul>)
▪ La fonction ne retourne plus l’élément <ul>, donc les accolades qui servaient à indiquer le code JavaScript à l’intérieur du
code JSX ne sont ici plus nécessaires
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>
);
▪ NB: Même si l’affichage de la liste est identique au précédent, on voit ici que les éléments React <ul> et <ListeElements>
ont été inversés dans l’arborescence.
12
Transmettre des attributs dans un élément JSX
▪ On peut transmettre des attributs aux éléments React définis ici en JSX. Par exemple, le tableau elems pourrait être
transmis dans l’attribut elems de l’élément JSX. On peut créer les attributs que l’on souhaite dans un élément JSX, ces
attributs seront transmis en paramètres de la fonction de traitement dans l’objet props.
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} />);
▪ L’attribut elems est défini lors de l’écriture de l’élément JSX <ListeElements elems={elems}/>. Les attributs d’un
élément défini par une fonction sont transmis dans l’objet props en paramètres de la fonction. Ainsi, pour accéder à
l’attribut elems dans la fonction, on utilise [Link].
13
Transmission de l’attribut style dans l’élément JSX
▪ Transmettons maintenant l’attribut style dans l’élément JSX. Le style indiqué sera affecté aux éléments <li> de la liste.
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" }} />);
▪ Le style est indiqué sous forme d’un objet objet JSON (ici, { color:"red" }), et puisqu’il s’agit d’une instruction JavaScript,
il faut l’entourer des accolades, d’où les doubles accolades que l’on peut voir ici dans l’élément JSX.
▪ Ce style est récupéré dans la fonction au moyen du paramètre props, et il est lu et affecté à l’attribut style des éléments
« li » à laide de l’expression: [Link] 14
Écriture du programme en déstructurant l’objet props (en ES6)
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var ListeElements = function ({ elems, style }) {
return (
<ul>
{[Link](function (elem, index) {
return (
<li key={index} style={style}>
{elem}
</li>
);
})}
</ul>
);
};
[Link](<ListeElements elems={elems} style={{ color: "red" }} />);
On accède maintenant directement aux variables elems et style précédemment définies comme propriétés dans l’objet
props.
15
Créer la liste au moyen de composants
▪ Un élément JSX est également appelé par un composant React.
▪ Ici, le composant est <ListeElements> qui représente la liste des éléments à afficher sous forme de liste.
▪ le but est d’écrire des composants indépendants qui pourront être utilisés à divers endroits du programme, voire
dans d’autres programmes. Cela permet la modularité et la réutilisation du code grâce aux composants.
▪ Dans notre programme, il n’est pas difficile de trouver un nouveau composant à écrire. Il pourrait s’appeler
<Element> et correspondrait à un élément de la liste. Cela correspond à la philosophie de React qui consiste à
organiser le code en différents composants qui s’utilisent les uns avec les autres. Le composant principal
<ListeElements> est donc fait de plusieurs composants <Element>.
16
Imbrication des éléments JSX:
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
function Element(props) {
return <li style={{ color: [Link] }}>{[Link]}</li>;
}
function ListeElements(props) {
return (
<ul>
{[Link](function (elem, index) {
return <Element key={index} elem={elem} color={[Link]} />;
})}
</ul>
);
}
[Link](<ListeElements elems={elems} color="red" />);
▪ Le composant <Element> est lui aussi créé avec une fonction dans laquelle les attributs color et elem sont transmis en
paramètres dans l’objet props (ici, utilisé sous forme déstructurée).
▪ L’attribut key est utilisé pour éviter l’erreur classique de React indiquant que cet attribut est obligatoire. Toutefois, il ne
sert qu’à mettre une clé différente sur les éléments issus d’une fonction d’itération, donc il est utilisé dans l’écriture de
l’élément <Element> (écrit dans une boucle d’itération), mais pas dans les paramètres de la fonction Element().
17
Créer un élément JSX avec une classe
▪ On peut 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 (<Element> et
<ListeElements>). Ces deux classes dérivent de la classe [Link].
▪ Créer les classes associées aux composants <Element> et <ListeElements>
var elems = ["Element1", "Element2", class ListeElements extends [Link] {
"Element3", "Element4", "Element5"]; constructor(props) {
super(props);
class Element extends [Link] { }
constructor(props) { render() {
super(props); return (
} <ul>
render() { {[Link]((elem, index) => {
return <li style={{ color: return <Element key={index} elem={elem}
[Link] color={[Link]} />;
}}>{[Link]}</li>; })}
} </ul>
} );
}
}
18
[Link](<ListeElements elems={elems} color="red" />);
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.
▪ 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() {
return (
<[Link]>
<div>Element1</div>
<div>Element2</div>
<div>Element3</div>
</[Link]>
);
}
[Link](<ListeElements />);
19
Exercices
▪ Exercice 1 : Composant "Header"
Créez un composant appelé "Header" qui affiche un en-tête stylisé avec un titre par défaut, tel que "Bienvenue dans
l'application". Vous avez la liberté de choisir la mise en forme qui vous convient le mieux pour cet en-tête.
▪ Exercice 2 : Créez un composant "Header" avec un titre dynamique
Créez un composant nommé "Header" qui affiche un en-tête stylisé avec un titre par défaut, tel que "Bienvenue dans
l'application". Le nom de l'application et la couleur doivent être passés en tant que props au composant.
Refaire le composant Header en utilisant déstructuration de l’objet props
20
