Introduction aux Composants React

Introduction

Dans ce laboratoire, vous apprendrez le concept fondamental des composants dans React. Les composants sont des morceaux de code indépendants et réutilisables. Ils servent le même objectif que les fonctions JavaScript, mais fonctionnent de manière isolée et retournent du HTML (via JSX) à afficher à l'écran. Nous nous concentrerons sur la création d'un simple "composant fonctionnel".

Vous créerez un nouveau composant dans son propre fichier, l'exporterez, puis l'importerez et le rendrez dans le composant principal App.

Créer un composant fonctionnel dans un nouveau fichier Hello.jsx

Dans cette étape, vous allez créer votre premier composant React. Il est courant de placer chaque composant dans son propre fichier pour garder le code organisé et réutilisable. Nous allons créer un nouveau fichier pour un composant nommé Hello.

Tout d'abord, préparons l'environnement de développement. Les fichiers du projet ont été créés pour vous dans le répertoire my-app. Vous devez naviguer dans ce répertoire, installer les dépendances nécessaires et démarrer le serveur de développement.

Ouvrez un terminal dans l'IDE Web (vous pouvez utiliser le menu : Terminal > Nouveau Terminal) et exécutez les commandes suivantes une par une :

cd my-app

npm install

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

Après avoir exécuté la dernière commande, le serveur de développement démarrera. Vous pouvez visualiser l'application en cours d'exécution en cliquant sur l'onglet Web 8080 dans l'interface LabEx. Tout au long de ce laboratoire, vous pourrez basculer vers cet onglet pour voir vos modifications.

Dans l'explorateur de fichiers de l'IDE Web sur la gauche, naviguez vers le répertoire my-app/src. Faites un clic droit sur le dossier src et sélectionnez "Nouveau Fichier". Nommez le nouveau fichier Hello.jsx.

Maintenant, ajoutez le code suivant à votre fichier nouvellement créé my-app/src/Hello.jsx. Ce code définit un composant fonctionnel simple.

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

Analysons ce code :

• function Hello() : Il s'agit d'une fonction JavaScript standard. Dans React, les composants fonctionnels sont simplement des fonctions JavaScript. Par convention, les noms de composants commencent toujours par une majuscule.
• return <h1>...</h1>; : La fonction retourne du JSX. Le JSX (JavaScript XML) est une extension de syntaxe pour JavaScript qui ressemble beaucoup au HTML. C'est ce que nous utilisons pour décrire à quoi doit ressembler l'interface utilisateur.

Exporter par défaut la fonction du composant

Dans cette étape, vous allez rendre le composant Hello disponible pour être utilisé dans d'autres parties de votre application. Pour ce faire, vous devez l'exporter depuis le fichier Hello.jsx.

Il existe deux principaux types d'exportations dans les modules JavaScript : les exportations nommées (named exports) et les exportations par défaut (default exports). Pour ce laboratoire, nous utiliserons une exportation par défaut, ce qui est courant pour les composants lorsqu'un fichier n'exporte qu'une seule chose.

Ajoutez la ligne suivante à la fin de votre fichier my-app/src/Hello.jsx :

export default Hello;

Votre fichier my-app/src/Hello.jsx complet devrait maintenant ressembler à ceci :

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

export default Hello;

Cette instruction export default fait de la fonction Hello l'exportation principale de ce fichier, permettant à d'autres fichiers de l'importer.

Importer le composant dans App.jsx en utilisant une instruction import

Dans cette étape, vous allez importer le composant Hello dans le composant d'application principal, App.jsx, afin de pouvoir l'utiliser.

Dans l'explorateur de fichiers de l'IDE Web, trouvez et ouvrez le fichier my-app/src/App.jsx.

Pour utiliser le composant Hello, vous devez d'abord l'importer. Ajoutez l'instruction d'importation suivante en haut du fichier my-app/src/App.jsx, avant la définition de la fonction App :

import Hello from "./Hello.jsx";

Cette ligne indique à JavaScript d'importer l'exportation par défaut du fichier Hello.jsx (qui se trouve dans le même répertoire, d'où le ./) et de l'assigner à une variable nommée Hello.

Après avoir ajouté l'importation, le début de votre fichier my-app/src/App.jsx ressemblera à ceci (les autres importations peuvent être légèrement différentes) :

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';

function App() {
// ... reste du fichier

Rendre le composant importé dans le retour de App

Dans cette étape, vous allez rendre le composant Hello à l'intérieur du composant App. Une fois qu'un composant est importé, vous pouvez l'utiliser dans JSX comme une balise HTML ordinaire.

Dans le fichier my-app/src/App.jsx, localisez l'instruction return à l'intérieur de la fonction App. Le code existant est le contenu par défaut de Vite. Vous pouvez tout remplacer par votre nouveau composant.

Modifiez la fonction App pour supprimer le contenu par défaut et rendre le composant <Hello /> à la place.

Votre fonction App devrait ressembler à ceci :

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

Ici, <Hello /> est la manière de rendre le composant Hello. Les balises <> et </> sont appelées un Fragment ; elles vous permettent de regrouper une liste d'enfants sans ajouter de nœuds supplémentaires au DOM.

Votre fichier my-app/src/App.jsx entier devrait maintenant ressembler à ceci :

import Hello from "./Hello.jsx";
import "./App.css";

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

export default App;

Note : Nous avons supprimé les importations inutilisées et la logique d'état pour plus de clarté.

Enregistrer les fichiers et vérifier le rendu mis à jour dans le navigateur

Dans cette étape, vous verrez le résultat de votre travail.

Assurez-vous d'avoir enregistré toutes vos modifications dans my-app/src/Hello.jsx et my-app/src/App.jsx. Vous pouvez enregistrer un fichier en appuyant sur Ctrl+S ou Cmd+S.

Le serveur de développement Vite que vous avez démarré dans l'introduction utilise le Hot Module Replacement (HMR), ce qui signifie qu'il détecte automatiquement les changements de fichiers et met à jour l'application dans le navigateur sans avoir besoin d'un rechargement complet de la page.

Passez à l'onglet Web 8080 dans l'interface LabEx. Vous devriez maintenant voir le texte "Hello from the Hello component!" affiché sur la page. Ce contenu est rendu à partir de votre nouveau composant Hello.

Si vous ne voyez pas les changements, essayez de cliquer sur le bouton de rafraîchissement dans la barre d'adresse de l'onglet du navigateur.

Félicitations, vous avez créé, exporté et rendu avec succès votre premier composant React !

Résumé

Dans ce laboratoire, vous avez appris le flux de travail de base pour créer et utiliser des composants dans une application React. Cette approche modulaire est un principe fondamental du développement React.

Vous avez réussi à :

• Créer un nouveau composant fonctionnel dans un fichier dédié (Hello.jsx).
• Utiliser export default pour rendre le composant disponible à d'autres parties de l'application.
• Utiliser import pour intégrer le composant dans le fichier principal App.jsx.
• Rendre le composant importé en utilisant la syntaxe de balise JSX (<Hello />).

Ce modèle de création, d'exportation et d'importation de composants est essentiel pour construire des applications React vastes et maintenables.