Configuration et première application React

Introduction

Bienvenue dans votre premier laboratoire React ! React est une bibliothèque JavaScript puissante pour construire des interfaces utilisateur dynamiques et interactives. Pour commencer le développement avec React, vous devez d'abord configurer un environnement de développement approprié.

Dans ce laboratoire, vous utiliserez l'outil de build moderne Vite pour initialiser un nouveau projet. Nous allons parcourir le processus d'exploration de la structure du projet, d'installation des dépendances, de démarrage d'un serveur de développement, de modification d'un composant existant et de création d'un nouveau. À la fin de ce laboratoire, vous aurez une compréhension fondamentale de la configuration d'un projet React et serez prêt à construire vos propres composants.

Explorer le projet et installer les dépendances

Le processus de configuration a déjà créé un nouveau projet React pour vous dans un répertoire nommé my-app à l'aide de Vite. Tout d'abord, vérifions que votre environnement de développement dispose des outils nécessaires, Node.js et npm.

Ouvrez le terminal et exécutez les commandes suivantes pour vérifier leurs versions :

node -v

Vous devriez voir une sortie indiquant la version de Node.js, par exemple :

v22.19.0

Ensuite, vérifiez la version de npm :

npm -v

Vous devriez voir une sortie similaire pour la version de npm :

10.9.3

Maintenant, naviguez dans le répertoire du projet. Toutes les commandes ultérieures doivent être exécutées à partir de ce répertoire.

cd my-app

Votre application React a besoin de plusieurs packages pour fonctionner, qui sont listés dans le fichier package.json. Vous devez installer ces dépendances à l'aide de npm.

Exécutez la commande suivante :

Important : Pour des raisons de sécurité, les utilisateurs gratuits ne peuvent pas se connecter à Internet, par conséquent les packages npm ne peuvent pas être installés. Vous pouvez continuer à lire la documentation, découvrir d'autres Web Development Labs, ou envisager de passer à un utilisateur Pro.

npm install

Cette commande lit le fichier package.json et télécharge toutes les bibliothèques requises dans un dossier node_modules au sein de votre projet. Vous verrez une barre de progression et quelques messages pendant l'installation des packages.

Démarrer le serveur de développement

Pour voir votre application React en action, vous devez démarrer le serveur de développement. Étant donné que vous êtes déjà dans le répertoire my-app, vous pouvez utiliser le script fourni par Vite.

Exécutez la commande suivante pour démarrer le serveur sur le port 8080 :

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

Cette commande démarre le serveur et occupera votre terminal, affichant l'URL locale où l'application s'exécute. Laissez ce terminal actif. Après un moment, vous verrez un message indiquant que le serveur est prêt.

Pour visualiser votre application, cliquez sur l'onglet Web 8080 en haut de l'interface. Vous devriez voir la page d'accueil par défaut de Vite et React.

Remarque : Si vous ne voyez pas l'application, essayez de cliquer sur le bouton de rafraîchissement situé à gauche de la barre d'adresse dans l'onglet Web 8080.

Modifier votre premier composant

Le serveur de développement Vite intègre le remplacement à chaud de modules (Hot Module Replacement - HMR), qui met à jour instantanément l'application dans votre navigateur lorsque vous enregistrez des modifications dans un fichier. Voyons cela en action.

Dans l'explorateur de fichiers à gauche, naviguez vers my-app -> src et cliquez sur le fichier App.jsx pour l'ouvrir dans l'éditeur. Ce fichier définit le composant principal App.

À l'intérieur de l'instruction return, vous verrez un bloc de code qui ressemble à du HTML. Il s'agit de JSX, une extension de syntaxe pour JavaScript qui vous permet d'écrire des structures d'interface utilisateur d'une manière familière.

Remplacez tout le contenu à l'intérieur de return (...) par un simple titre. Votre fichier App.jsx devrait ressembler à ceci :

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

Enregistrez le fichier en appuyant sur Ctrl+S (ou Cmd+S sur Mac). Maintenant, revenez à l'onglet Web 8080. Vous verrez que la page a été instantanément mise à jour pour afficher votre nouveau titre "Hello, LabEx !".

Créer un nouveau composant

Un principe fondamental de React est de construire des interfaces utilisateur à partir de petits morceaux réutilisables appelés composants. Créons un nouveau composant.

1. Dans l'explorateur de fichiers à gauche, faites un clic droit sur le répertoire src à l'intérieur de my-app.
2. Sélectionnez "Nouveau fichier" et nommez-le Welcome.jsx.
3. Ouvrez le fichier Welcome.jsx nouvellement créé et ajoutez le code suivant :

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

Analysons ce code :

• import React from 'react'; : Cette ligne est nécessaire pour tout fichier utilisant JSX.
• function Welcome() { ... } : Ceci définit un composant fonctionnel simple nommé Welcome.
• return <h2>...</h2>; : Le composant retourne un élément JSX qui sera rendu à l'écran.
• export default Welcome; : Ceci rend le composant Welcome disponible pour être utilisé dans d'autres fichiers.

Enregistrez le fichier (Ctrl+S). Rien ne changera encore dans le navigateur, car nous n'avons pas encore utilisé ce nouveau composant.

Utiliser votre nouveau composant

Maintenant que vous avez créé le composant Welcome, utilisons-le à l'intérieur de notre composant principal App. C'est ce qu'on appelle la composition de composants.

1. Ouvrez à nouveau le fichier my-app/src/App.jsx.
2. En haut du fichier, ajoutez une instruction import pour importer votre nouveau composant :

import Welcome from "./Welcome.jsx";

3. Ensuite, placez votre nouveau composant à l'intérieur de l'instruction return du composant App. Ajoutez <Welcome /> sous la balise <h1> pour rendre le composant. Le code final pour App.jsx devrait ressembler à ceci :

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

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;

4. Enregistrez le fichier App.jsx (Ctrl+S).

Passez une dernière fois à l'onglet Web 8080. Vous verrez maintenant le message "Welcome to my first React App!" rendu sous votre titre principal. Vous avez créé et composé avec succès des composants React !

Résumé

Dans ce laboratoire, vous avez franchi les premières étapes essentielles dans le monde du développement React en utilisant la chaîne d'outils moderne Vite.

Vous avez appris à :

• Vérifier un environnement de développement Node.js et npm.
• Créer un nouveau projet React avec Vite.
• Installer les dépendances du projet avec npm install.
• Démarrer le serveur de développement React avec npm run dev.
• Modifier un composant existant et observer les mises à jour en direct avec le Hot Module Replacement (Remplacement à chaud de modules).
• Créer un nouveau composant fonctionnel à partir de zéro dans un fichier .jsx.
• Importer et composer des composants pour construire une interface utilisateur plus complexe.

Vous avez configuré avec succès un projet React, expérimenté le flux de travail de développement moderne et pratiqué les bases de l'architecture basée sur les composants. Vous êtes maintenant bien préparé pour aborder des concepts React plus avancés.