Module Développer en front-end

Atelier 1 : Introduction à JSX

Observez cette déclaration de variable :
const element = <h1>Bonjour, monde !</h1>;

Cette drôle de syntaxe n’est ni une chaîne de caractères ni du HTML.

Ça s’appelle du JSX, et c’est une extension syntaxique de JavaScript. Nous

recommandons de l’utiliser avec React afin de décrire à quoi devrait ressembler
l’interface utilisateur (UI). JSX vous fait sûrement penser à un langage de balisage, mais
il recèle toute la puissance de JavaScript.
JSX produit des « éléments » React. Nous verrons comment les retranscrire dans le
DOM dans la prochaine section. Dans la suite de ce document, nous verrons les bases
de JSX dont vous aurez besoin pour bien démarrer.

Utiliser des expressions dans JSX

Dans l’exemple suivant, nous déclarons une variable appelée name et nous l’utilisons
ensuite dans JSX en l’encadrant avec des accolades :
const name = 'Clarisse Agbegnenou';
const element = <h1>Bonjour, {name}</h1>;

Vous pouvez utiliser n’importe quelle expression JavaScript valide dans des accolades
en JSX. Par exemple, 2 + 2, user.firstName, 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>.

1
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}

const user = {
firstName: 'Jhonny',
lastName: 'English'
};

const element = (
<h1>
Bonjour, {formatName(user)} !
</h1>
);

JSX et l’instruction conditionnelle if

Ça signifie que vous pouvez utiliser JSX à l’intérieur d’instructions if ou de
boucles for, l’affecter à des variables, l’accepter en tant qu’argument, et le renvoyer
depuis des fonctions :
function getGreeting(user) {
if (user) {
return <h1>Bonjour, {formatName(user)} !</h1>;
}
return <h1>Bonjour, Belle Inconnue.</h1>;

Spécifier des attributs en JSX

Vous pouvez utiliser des guillemets pour spécifier des littéraux chaînes de caractères
dans les attributs :
const element = <div tabIndex="0"></div>;

Vous pouvez aussi utiliser des accolades pour utiliser une expression JavaScript dans
un attribut :
const element = <img src={user.avatarUrl}></img>;

Ne mettez pas de guillemets autour des accolades quand vous utilisez une
expression JavaScript dans un attribut. Vous pouvez utiliser soit des guillemets (pour
des valeurs textuelles) soit des accolades (pour des expressions), mais pas les deux à
la fois pour un même attribut.
Attention :
Dans la mesure où JSX est plus proche de JavaScript que de HTML, React DOM utilise
la casse camelCase comme convention de nommage des propriétés, au lieu des noms
d’attributs HTML.
Par exemple, class devient className en JSX, et tabindex devient tabIndex.

Spécifier des éléments enfants en JSX

Si une balise est vide, vous pouvez la fermer immédiatement avec />, comme en
XML :
const element = <img src={user.avatarUrl} />;

Les balises JSX peuvent contenir des enfants :

const element = (
<div>
<h1>Bonjour !</h1>
<h2>Titre 1h2>
</div>
);

3
Le rendu des éléments
Les éléments sont les blocs élémentaires d’une application React.

Un élément décrit ce que vous voulez voir à l’écran :

const element = <h1>Bonjour, monde</h1>;

Contrairement aux éléments DOM d’un navigateur, les éléments React sont de
simples objets peu coûteux à créer. React DOM se charge de mettre à jour le DOM
afin qu’il corresponde aux éléments React.

Afficher un élément dans le DOM

Supposons qu’il y ait une balise <div> quelque part dans votre fichier HTML :
<div id="root"></div>

Nous parlons de nœud DOM « racine » car tout ce qu’il contient sera géré par React
DOM.

Les applications développées uniquement avec React ont généralement un seul nœud
DOM racine. Si vous intégrez React dans une application existante, vous pouvez avoir
autant de nœuds DOM racines isolés que vous le souhaitez.
Pour faire le rendu d’un élément React dans un nœud DOM racine, passez les deux à
la méthode ReactDOM.render() :

const element = <h1>Bonjour, monde</h1>;