Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. React
  3. Découvrir le JSX
Extrait - React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Extraits du livre
React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) Revenir à la page d'achat du livre

Découvrir le JSX

Introduction au JSX

JSX (JavaScript XML) est une extension de syntaxe utilisée dans React pour décrire l’interface utilisateur sous forme de code JavaScript. Elle permet de mélanger du code JavaScript avec des balises HTML, ce qui rend la création d’interfaces utilisateur en React plus lisible. Il est important d’être à l’aise avec cette syntaxe le plus tôt possible.

Lorsque vous utilisez JSX, vous pouvez écrire des éléments React comme si vous écriviez du HTML, mais en réalité, le JSX est transpilé en code JavaScript pur avant d’être interprété par le navigateur.

Voici à quoi ressemble un exemple simple de JSX :

import React from 'react'; 
 
const MonComposant = () => { 
  return <h1>Bienvenue dans mon application React !</h1>; 
}; 

Dans cet exemple, nous avons utilisé JSX pour créer un élément h1 contenant le message de bienvenue. Cela permet d’écrire du code d’interface utilisateur de manière déclarative et sans appeler à chaque fois React.createElement.

Avantages du JSX

Clarté et lisibilité du code

En utilisant le JSX, on se rapproche du langage naturel utilisé pour structurer une page web. Le JSX facilite la communication entre les développeurs et améliore la...

Syntaxe et éléments JSX

Dans le JSX, vous pouvez utiliser une syntaxe similaire au HTML pour décrire l’interface utilisateur de votre application React. Cependant, il y a quelques différences-clés à noter.

1. Éléments JSX

Dans le JSX, vous pouvez utiliser des balises pour créer des éléments React. Les balises doivent correspondre à des composants React définis ou à des balises HTML natives. Les éléments JSX peuvent être imbriqués les uns dans les autres, tout comme dans le HTML.

Exemple de balises JSX

const monElement = <div> 
  <h1>Titre</h1> 
  <p>Contenu du paragraphe</p> 
</div>; 

Les éléments JSX sont les blocs de construction de base pour créer l’interface utilisateur. Ils ressemblent à des balises HTML, mais en réalité, ce sont des objets JavaScript qui représentent des composants React ou des éléments du DOM.

La syntaxe est similaire au HTML, ce qui les rend plus familiers aux développeurs web.

Exemples d’éléments JSX

const element1 = <div>Contenu du div</div>; 
const element2 = <h1>Titre</h1>; 
const element3 = <MonComposant />; 

Dans cet exemple, la variable element1 contient un élément JSX représentant une balise div, element2 contient une balise h1, et element3, un composant React appelé MonComposant.

Vous pouvez également utiliser des attributs dans les balises JSX, tout comme dans le HTML.

2. Attributs JSX

Dans le JSX, vous pouvez utiliser des attributs pour configurer les éléments d’interface utilisateur de manière similaire à HTML. Les attributs permettent de personnaliser le comportement et l’apparence des éléments React. Voici comment vous pouvez utiliser des attributs JSX dans vos composants :

Exemple d’attributs JSX

const monElement = <input type="text" placeholder="Entrez votre nom" />; 
const nom = "John"; 
const monElement2 = <h1>Bienvenue, {nom} !</h1>; 

Dans cet exemple, monElement est un élément...

Construire une interface avec des composants

Maîtriser React passe par l’art d’assembler des composants réutilisables pour créer des composants plus grands et plus complexes, afin d’orchestrer une applicatio  complète. Cette méthode se démarque par sa simplicité et son efficacité, favorisant un code propre et maintenable.

Il est impossible d’avoir une règle précise sur la taille que doivent avoir les composants. Ce qu’il faut garder à l’esprit c’est qu’un composant doit être responsable d’une tâche. Là encore, cette règle diffère d’un projet à un autre.

1. Composition

La composition est l’idée de construire des composants en utilisant d’autres composants comme blocs de construction. Cela permet de découper une interface utilisateur complexe en composants plus petits et indépendants.

Pour illustrer cela, prenons un exemple simple :

function BlockDeContenu({ contenu }) { 
  return <p>{ contenu }</p>; 
} 
 
function Article() { 
  return ( 
    <div> 
      <BlockDeContenu contenu="Premier paragraphe" /> 
      <BlockDeContenu contenu="Second paragraphe" /> 
    </div> 
  ); 
} 
 
function App() { 
  return ( 
    <Article /> 
  ); 
} 

Dans cet exemple, le composant Article est constitué de plusieurs composants BlockDeContenu, créant ainsi une structure cohérente. Chaque composant BlockDeContenu accepte une propriété contenu, qui est utilisée pour afficher du texte dans un paragraphe. Cette approche favorise une architecture claire et modulaire, où chaque composant a un rôle spécifique.

En utilisant la composition, vous pouvez créer des composants indépendants qui se concentrent sur des tâches spécifiques. Ces composants peuvent être réutilisés dans différentes parties de l’application, évitant ainsi la duplication de code. Cela permet...

Les fragments JSX

Lorsque vous créez des composants React, vous devez les envelopper dans un seul élément racine. Cela signifie que vous ne pouvez pas retourner plusieurs éléments de niveau supérieur directement dans une fonction de composant sans les encapsuler dans un conteneur, tel qu’une div. Cependant, il peut y avoir des situations où vous ne voulez pas introduire un élément supplémentaire pour encapsuler vos éléments.

C’est là qu’interviennent les fragments JSX.

1. Utilisation des fragments JSX

Les fragments JSX sont une fonctionnalité de React permettant de regrouper plusieurs éléments de niveau supérieur sans introduire de nœud supplémentaire dans le DOM. Cela améliore la lisibilité du code et permet par exemple de rendre proprement une liste d’éléments sans ajouter un conteneur supplémentaire autour d’eux.

Le rendu (render en anglais) d’un composant est le processus par lequel React crée une représentation visuelle d’un composant sur l’écran. C’est comme si React dessinait le composant pour la première fois, en se basant sur les données et la structure définies initialement par le développeur.

Ensuite, lorsque les données ou l’état du composant changent, React doit mettre à...

Expressions conditionnelles

Les expressions conditionnelles en React permettent de rendre des éléments JSX en fonction d’une condition. Cela signifie que vous pouvez contrôler l’affichage des éléments en fonction d’une valeur booléenne ou d’autres évaluations conditionnelles.

Il existe deux façons courantes d’utiliser des expressions conditionnelles en React.

1. L’opérateur ternaire

L’opérateur ternaire (condition ? expressionSiVraie : expressionSiFausse) est une façon concise de créer une expression conditionnelle en JavaScript.

Voici un exemple d’utilisation dans un composant React :

import React from 'react'; 
 
const MyComponent = ({ isLoggedIn }) => { 
  return ( 
    <div> 
      {isLoggedIn ? <p>Bienvenue, utilisateur connecté !</p> : 
<p>Veuillez vous connecter.</p>} 
    </div> 
  ); 
}; 
 
export default MyComponent; 

Dans cet exemple, le composant MyComponent reçoit en entrée isLoggedIn qui indique si l’utilisateur est connecté ou non. Selon la valeur de isLoggedIn, le composant rendra un paragraphe différent : Bienvenue, utilisateur connecté !...

Utiliser les listes et les clés

Lorsque vous travaillez avec des données dynamiques dans React, il est fréquent d’avoir besoin de rendre des listes d’éléments. Les listes permettent d’afficher plusieurs éléments avec la même structure, basés sur un ensemble de données.

Cependant, lors du rendu de listes dynamiques en React, il faut attribuer une clé (key) unique à chaque élément de la liste. Les clés aident React à identifier de manière efficace les éléments qui ont été ajoutés, modifiés ou supprimés, ce qui améliore les performances et la gestion des mises à jour.

1. Les clés des éléments de liste

Les clés sont utilisées pour identifier de manière unique chaque élément de la liste lors du processus de rendu, ce qui permet à React de détecter les changements, ajouts ou suppressions d’éléments de manière efficace.

a. Pourquoi les clés sont-elles importantes ?

Lorsque vous avez une liste dynamique avec des éléments qui peuvent être ajoutés, supprimés ou modifiés, React doit effectuer une comparaison entre les nouvelles données et les anciennes pour savoir quels éléments ont été modifiés. Les clés permettent à React d’éviter de re-rendre tous les éléments de la liste.

Les clés aident...