Bases de React JSX

Introduction

Bienvenue dans le monde de React ! Dans ce lab, vous plongerez dans JSX, un élément fondamental pour construire des interfaces utilisateur avec React. JSX (JavaScript XML) est une extension de syntaxe pour JavaScript qui vous permet d'écrire du code similaire à du HTML directement dans vos fichiers JavaScript. Cela rend votre code d'interface utilisateur plus lisible, expressif et plus facile à maintenir.

Tout au long de ce lab, vous apprendrez les règles fondamentales de JSX, notamment :

• L'écriture d'éléments similaires à du HTML.
• L'intégration d'expressions JavaScript dynamiques.
• L'application de classes CSS.
• L'utilisation de balises auto-fermantes.
• Le regroupement de plusieurs éléments avec des Fragments.

Un projet React de base a été configuré pour vous dans le répertoire ~/project/my-app. Commençons !

Écrire un élément JSX comme h1 dans le return du composant

Dans cette étape, vous allez écrire un élément JSX de base et le voir rendu dans le navigateur. JSX vous permet d'écrire du balisage qui ressemble beaucoup à du HTML directement à l'intérieur de vos composants React.

Tout d'abord, mettons en marche l'environnement de développement. Tout votre travail se fera à l'intérieur du répertoire ~/project/my-app.

Naviguez vers le répertoire du projet dans le terminal, installez les dépendances nécessaires et démarrez le serveur de développement.

cd ~/project/my-app
npm install

Une fois l'installation terminée, exécutez la commande suivante pour démarrer le serveur de développement :

npm run dev -- --host 0.0.0.0 --port 8080

Vous verrez une sortie indiquant que le serveur est en cours d'exécution. Maintenant, cliquez sur l'onglet Web 8080 en haut de l'écran pour voir votre application en direct. Elle devrait afficher "Hello, React !".

Ensuite, ouvrez le fichier src/App.jsx depuis l'explorateur de fichiers sur la gauche. Ce fichier contient un composant React simple nommé App.

Modifions l'élément h1. Changez le texte à l'intérieur de la balise <h1> en "Welcome to JSX".

Remplacez le contenu de src/App.jsx par le code suivant :

import "./App.css";

function App() {
  return <h1>Welcome to JSX</h1>;
}

export default App;

Enregistrez le fichier (Ctrl+S ou Cmd+S). L'application dans l'onglet Web 8080 se mettra à jour automatiquement pour afficher le nouveau texte.

Intégrer une expression JavaScript entre accolades

Dans cette étape, vous apprendrez à intégrer des expressions JavaScript directement dans votre JSX en utilisant des accolades {}. C'est une fonctionnalité puissante qui vous permet de rendre du contenu dynamique.

Vous pouvez placer n'importe quelle expression JavaScript valide à l'intérieur des accolades. Il peut s'agir d'une variable, d'un appel de fonction ou d'une opération arithmétique.

Modifions le composant App pour afficher un titre dynamique. Ouvrez à nouveau le fichier src/App.jsx.

À l'intérieur de la fonction App, avant l'instruction return, déclarez une constante JavaScript nommée title et assignez-lui une valeur de type chaîne de caractères. Ensuite, utilisez cette constante à l'intérieur de l'élément <h1>.

Mettez à jour votre fichier src/App.jsx avec le code suivant :

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1>{title}</h1>;
}

export default App;

Enregistrez le fichier. Vérifiez maintenant l'onglet Web 8080. Vous verrez que le titre a été mis à jour en "React JSX Basics". React évalue l'expression {title} et rend sa valeur comme contenu de la balise <h1>.

Ajouter l'attribut className pour la classe CSS

Dans cette étape, vous apprendrez à ajouter des classes CSS à vos éléments JSX pour le style.

Dans le HTML classique, vous utilisez l'attribut class pour assigner une classe CSS. Cependant, class est un mot-clé réservé en JavaScript. Pour éviter les conflits, JSX utilise className à la place.

Tout d'abord, ajoutons une règle de style. Ouvrez le fichier src/App.css et ajoutez le code CSS suivant pour définir un style pour notre titre :

.title-style {
  color: #61dafb;
  text-align: center;
}

Enregistrez le fichier src/App.css.

Maintenant, appliquons cette classe à notre élément <h1>. Ouvrez src/App.jsx et ajoutez l'attribut className à la balise h1.

Mettez à jour votre fichier src/App.jsx pour qu'il ressemble à ceci :

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1 className="title-style">{title}</h1>;
}

export default App;

Enregistrez le fichier et basculez vers l'onglet Web 8080. Vous devriez maintenant voir le texte du titre centré et coloré en bleu clair, conformément aux styles que vous avez définis dans App.css.

Utiliser une balise auto-fermante pour l'élément img

Dans cette étape, vous apprendrez à utiliser des balises auto-fermantes en JSX. En HTML, certains éléments comme <img>, <br> et <input> sont des éléments "vides" ou "sans contenu", ce qui signifie qu'ils n'ont pas de balise de fermeture.

En JSX, vous devez explicitement fermer chaque balise. Pour les éléments qui n'ont pas d'enfants, vous utilisez une syntaxe auto-fermante en ajoutant une barre oblique / avant la parenthèse angulaire fermante, comme <img />.

Un composant React ne peut retourner qu'un seul élément racine. Pour rendre plusieurs éléments, vous devez les encapsuler dans un conteneur, tel qu'une <div>.

Ajoutons une image sous notre titre. Nous allons encapsuler à la fois le <h1> et la nouvelle balise <img> à l'intérieur d'une <div>.

Mettez à jour votre fichier src/App.jsx avec le code suivant :

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <div>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </div>
  );
}

export default App;

Dans ce code, nous avons ajouté une balise <img>. Notez qu'elle est auto-fermante (/>). Nous avons également utilisé des accolades pour définir dynamiquement l'attribut src à partir de la variable imageUrl.

Enregistrez le fichier et regardez l'onglet Web 8080. Vous verrez le logo LabEx affiché sous le titre.

Rendre plusieurs éléments dans un fragment <> </>

Dans cette étape, vous apprendrez une meilleure façon de regrouper plusieurs éléments sans ajouter de nœud supplémentaire au DOM : les Fragments React.

Dans l'étape précédente, nous avons utilisé une <div> pour encapsuler nos éléments <h1> et <img> car un composant doit retourner un seul élément racine. Cependant, parfois cette <div> supplémentaire est inutile et peut interférer avec votre mise en page CSS (par exemple, avec Flexbox ou Grid).

React propose une solution appelée Fragments. Un Fragment vous permet de regrouper une liste d'enfants sans ajouter de nœuds supplémentaires au DOM. Vous pouvez utiliser la syntaxe abrégée <> ... </>.

Refactorisons notre composant App pour utiliser un Fragment à la place d'une <div>.

Ouvrez src/App.jsx et remplacez la <div> ouvrante et la </div> fermante par respectivement <> et </>.

Votre code final src/App.jsx devrait ressembler à ceci :

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </>
  );
}

export default App;

Enregistrez le fichier. La sortie visuelle dans l'onglet Web 8080 sera identique à l'étape précédente. Cependant, si vous inspectiez le HTML dans les outils de développement de votre navigateur, vous verriez que les éléments <h1> et <img> sont maintenant des frères directs, sans parent <div>. Cela crée une structure DOM plus propre et plus efficace.

Résumé

Félicitations pour avoir terminé le laboratoire React JSX Basics ! Vous avez appris les règles et la syntaxe fondamentales pour écrire des interfaces utilisateur dans une application React.

Dans ce laboratoire, vous avez pratiqué :

• L'écriture d'éléments similaires au HTML tels que <h1> dans l'instruction return de votre composant.
• L'intégration de variables et d'expressions JavaScript dynamiques dans votre balisage à l'aide d'accolades {}.
• L'application de classes CSS à l'aide de l'attribut className.
• L'utilisation de balises auto-fermantes pour des éléments comme <img> avec la syntaxe />.
• Le regroupement de plusieurs éléments sans ajouter de nœuds DOM supplémentaires en utilisant les Fragments React (<> </>).

Ces concepts sont les éléments constitutifs pour créer des interfaces utilisateur complexes et dynamiques avec React. Continuez à pratiquer pour vous familiariser avec la puissance et la flexibilité de JSX.