Module 13 – Introduction à React
13.1. Introduction à JSX.............................................................................................. 1
13.1.1. Pourquoi JSX ?............................................................................................. 1
13.1.2. Utiliser des expressions dans JSX...............................................................2
13.2. Composants et props......................................................................................... 3
13.2.1. Fonctions composants et composants à base de classes...........................3
13.2.2. map............................................................................................................ 4
13.2.3. props.......................................................................................................... 5
13.3. Application React.............................................................................................. 6
13.3.1. npm create vite@latest..............................................................................6
13.1. Introduction à JSX
Soit le code suivant
html
<div id="root"></div>
jsx
const hello = <h1>Hello World!</h1>;
[Link](hello, [Link]("root"));
[Link]
Observez cette déclaration de variable :
const hello = <h1>Hello World!</h1>;
Ce mélange de HTML et JavaScript s’appelle du JSX, et c’est une extension
syntaxique de JavaScript (JavaScript XML).
13.1.1. Pourquoi JSX ?
Le fonctionnement d’une UI conditionnera toujours les logiques de rendu, de la
gestion des événements à la préparation des données pour l’affichage, en
passant par l’évolution de l’état au fil du temps. React a choisi d’assumer
pleinement cet état de fait.
Au lieu de séparer artificiellement les technologies en mettant le balisage et la
logique dans des fichiers séparés, React sépare les préoccupations via des unités
faiblement couplées appelées « composants », qui contiennent les deux. Nous
reviendrons sur les composants dans une prochaine section, mais si l’idée
d’injecter des balises dans du JS vous met mal à l’aise, cette présentation vous
fera peut-être changer d’avis.
React ne vous oblige pas à utiliser JSX, mais la plupart des gens y trouvent une
aide visuelle quand ils manipulent l’interface utilisateur dans le code JavaScript.
Ça permet aussi à React de produire des messages d’erreurs et d’avertissements
plus utiles.
420-4D6 Module 13 – Introduction à React Page 2 sur 6
13.1.2. Utiliser des expressions dans JSX
Dans l’exemple suivant, nous déclarons une variable appelée nom et nous
l’utilisons ensuite dans JSX en l’encadrant avec des accolades.
html
<div id="root"></div>
javascript
const nom = "Guillaume";
const hello = <h1>Hello {nom}!</h1>;
[Link](hello, [Link]("root"));
[Link]
Vous pouvez utiliser n’importe quelle expression JavaScript valide dans des
accolades en JSX. Par exemple, 2 + 2, [Link], ou formatName(user)
sont toutes des expressions JavaScript valides.
Dans l’exemple suivant, on intègre le résultat de l’appel d’une fonction JavaScript,
formatName(user), dans un élément <h1>.
html
<div id="root"></div>
javascript
const user = {
prenom: "Guillaume",
nom: "Lachance",
};
function formatName(user) {
return [Link] + ' ' + [Link];
}
const element = <h1>Bonjour {formatName(user)}!</h1>;
[Link](element, [Link]('root'));
[Link]
Les attributs aussi peuvent être utilisés.
html
<div id="root"></div>
javascript
const url = "[Link]
[Link]";
const element = (
<img src={url}></img>
);
[Link](element, [Link]("root"));
[Link]
© glachance@[Link]
420-4D6 Module 13 – Introduction à React Page 3 sur 6
13.2. Composants et props
Les composants vous permettent de découper l’interface utilisateur en éléments
indépendants et réutilisables, vous permettant ainsi de considérer chaque
élément de manière isolée.
Voir [Link]
13.2.1. Fonctions composants et composants à base de classes
Le moyen le plus simple de définir un composant consiste à écrire une fonction
JavaScript.
html
<div id="root"></div>
javascript
function App(props) {
return <h1>Hello World!</h1>;
}
[Link](
<App />,
[Link]("root")
);
[Link]
Vous pouvez également utiliser une classe ES6 pour définir un composant 1.
html
<div id="root"></div>
javascript
class App extends [Link] {
render() {
return <h1>Bonjour Guillaume</h1>;
}
}
[Link](
<App />,
[Link]("root")
);
[Link]
1
Peu utilisé.
© glachance@[Link]
420-4D6 Module 13 – Introduction à React Page 4 sur 6
13.2.2. map
map retourne un tableau des éléments d'un ensemble.
Il est beaucoup utilisé en React, puisque React concatène les éléments retournés
et les affiche.
[Link]
function App() {
const profs = [
{id: 1, nom: 'Guillaume'},
{id: 2, nom: 'Sarah'},
{id: 3, nom: 'Mohamed'}
];
return (
<div>
{
[Link]((p) => {
return <h1>Bonjour {[Link]}</h1>
})
}
</div>
);
}
[Link]
© glachance@[Link]
420-4D6 Module 13 – Introduction à React Page 5 sur 6
13.2.3. props
Lorsque React rencontre un élément représentant un composant défini par
l’utilisateur, il transmet les attributs JSX et les enfants à ce composant sous la
forme d’un objet unique. Nous appelons cet objet « props ».
Les props sont en lecture seule. Les composants ne doivent jamais les modifier.
Aussi, les composants peuvent faire référence à d’autres composants dans leur
sortie. Ça nous permet d’utiliser la même abstraction de composants pour
n’importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue,
un écran : dans React, ils sont généralement tous exprimés par des composants.
[Link]
function Bonjour(props) {
return <h1>Bonjour {[Link]}</h1>;
}
[Link]
import {Bonjour} from "./Bonjour";
function App2() {
const profs = [
{id: 1, nom: 'Guillaume'},
{id: 2, nom: 'Sarah'},
{id: 3, nom: 'Mohamed'}
];
return (
<div>
{
[Link]((p) => {
return <Bonjour key={[Link]} prof={p}/>
})
}
</div>
);
}
[Link]
© glachance@[Link]
420-4D6 Module 13 – Introduction à React Page 6 sur 6
13.3. Application React
Une application React consiste en un environnement de développement défini par
un template.
13.3.1. npm create vite@latest
Voir [Link]
Vite est un environnement confortable pour apprendre React, et constitue la
meilleure option pour démarrer une nouvelle application web mono-page en
React.
Il configure votre environnement de développement de façon à vous permettre
d’utiliser les dernières fonctionnalités de JavaScript, propose une expérience
développeur agréable et optimise votre application pour la production.
npm create vite@latest nomduprojet
Le projet contenant les fichiers suivants est créé.
Contient la définition de <App />, le
component racine chargé par [Link].
Contient les instructions nécessaires pour
charger le component racine <App /> dans
le <div id="root">
L'application React sera insérée dans ce
fichier html (contient le <div id="root">).
© glachance@[Link]