Premiers exercices fr FR

Résumé : Pour bien démarrer avec StartER, voici quelques exercices pratiques à réaliser après l'installation.

Les objectifs

Ces exercices vous permettront de vérifier que votre environnement est fonctionnel et d'expérimenter les principes essentiels du framework, du routage Express à l'intégration React.

Réaliser les exercices

Exercice 1 : Hello World API

Commençons par un endpoint minimaliste qui renvoie le message "hello, world!". Cet exercice valide votre installation et introduit les bases du routage avec Express.

Étape 1 : Créer un nouveau module

Créez un dossier hello dans src/express/modules.

Étape 2 : Créer un fichier de routes

Créez un fichier helloRoutes.ts dans le dossier src/express/modules/hello avec le contenu suivant :

import { type RequestHandler, Router } from "express";

const router = Router();

/* ************************************************************************ */

const sayHello: RequestHandler = (_req, res) => {
  res.json({ message: "hello, world!" });
};

/* ************************************************************************ */

router.get("/api/hello", sayHello);

/* ************************************************************************ */

export default router;

Étape 3 : Intégrer le module dans les routes principales

Modifiez le fichier src/express/routes.ts en ajoutant votre nouveau module à la fin du fichier :

// ...

/* ************************************************************************ */

await importAndUse("./modules/hello/helloRoutes");

/* ************************************************************************ */

export default router;

Étape 4 : Tester l'endpoint

Redémarrez votre serveur si nécessaire et visitez http://localhost:5173/api/hello dans votre navigateur ou utilisez un outil comme cURL ou Postman. Vous devriez voir la réponse JSON avec le message "hello, world!".

🎉 Si tout fonctionne, félicitations : votre première route Express est opérationnelle !

Exercice 2 : Créer une page "À propos"

Passons maintenant au côté client : nous allons créer une page et la relier au système de routage de React Router.

Étape 1 : Créer un composant de page

Créez un fichier About.tsx dans le dossier src/react/components :

function About() {
  return (
    <>
      <h1>À propos</h1>
      <p>StartER rocks !</p>
    </>
  );
}

export default About;

Étape 2 : Ajouter la route dans le fichier routes.tsx

Modifiez le fichier src/react/routes.tsx pour intégrer votre nouvelle page :

// ...

import About from "./components/About";

// ...

import "./index.css";

const routes: RouteObject[] = [
  {
    // ...
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
      // ...
    ],
  },
];

export default routes;

Étape 3 : Mettre à jour la navigation

Modifiez le composant NavBar pour inclure un lien vers votre nouvelle page. Ouvrez le fichier src/react/components/NavBar.tsx et ajoutez un nouvel élément à la navigation.

Étape 4 : Tester la page

Visitez http://localhost:5173/about dans votre navigateur. Vous devriez voir votre nouvelle page.

🎉 Si la page s'affiche correctement, vous venez de valider le routage côté client et l'intégration d'un composant autonome.

Exercice 3 : Connecter le frontend au backend

Dans ce dernier exercice, nous allons relier le frontend et le backend : la page React affichera le message renvoyé par votre API Express.

Étape 1 : Ajouter la fonctionnalité de fetch à About.tsx

Modifiez le composant About.tsx pour y ajouter un appel au endpoint /api/hello :

import { use } from "react";

import { cache } from "./utils";

function About() {
  const { message } = use<{ message: string }>(cache("/api/hello"));

  return (
    <>
      <h1>À propos</h1>
      <p>StartER rocks !</p>
      <p>Message de l'API : "{message}"</p>
    </>
  );
}

export default About;

Étape 2 : Tester l'intégration

Rechargez la page http://localhost:5173/about. Vous devriez maintenant voir le message "hello, world!" récupéré depuis votre API.

🎉 Si vous voyez le message "hello, world!" dans votre navigateur, votre intégration est réussie. Vous venez de réaliser une boucle complète entre le client React et le serveur Express !

Félicitations !

Vous avez complété les exercices d'introduction à StartER ! Vous savez :

Créer un endpoint API avec Express
Créer une page React et la relier au routeur
Connecter le frontend au backend pour afficher des données dynamiques

Bonnes pratiques et cas d'usage

Procédez par étapes : testez chaque partie (backend isolé, puis frontend isolé) avant de tenter de les connecter. Cela facilite grandement le débogage en cas de problème de récupération des données.