Premiers exercices - rocambille/start-express-react GitHub Wiki

Pour bien démarrer avec StartER, voici quelques exercices pratiques à réaliser après l'installation. Ils 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.

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 pour intégrer votre nouveau module :

import express, { Router } from "express";

const router = Router().use(express.json());

// ...

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

import helloRoutes from "./modules/hello/helloRoutes";
router.use(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 !

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 { Outlet, type RouteObject } from "react-router";
import About from "./components/About";
// ...

import "./index.css";

const routes: RouteObject[] = [
  {
    path: "/",
    element: (
      <Layout>
        <Outlet />
      </Layout>
    ),
    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.

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 { useState, useEffect } from "react";

function About() {
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/hello")
      .then((response) => response.json())
      .then((data) => {
        setMessage(data.message);
      })
      .catch((error) => {
        console.error("Erreur lors de la récupération du message:", error);
        setMessage("Erreur de chargement");
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <>
      <h1>À propos</h1>
      <p>StartER rocks !</p>

      {loading ? (
        <p>Chargement du message...</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 !

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

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

Ces bases vous permettront d'explorer les aspects plus avancés du framework et de développer vos propres fonctionnalités.

Consultez les pages suivantes pour aller plus loin :

• Database
• Express
• React
• Types