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

Pour vous familiariser avec le framework et vérifier votre configuration, voici quelques exercices simples à réaliser après l'installation. Ces exercices progressifs vous permettront de comprendre les principes fondamentaux de StartER.

Exercice 1 : Hello World API

Créons ensemble un endpoint qui renvoie "hello, world!". Cela nous permettra de vérifier que votre installation fonctionne correctement et que vous comprenez les bases du routage 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 ce dossier 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 authRoutes from "./modules/auth/authRoutes";
router.use(authRoutes);

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

import itemRoutes from "./modules/item/itemRoutes";
router.use(itemRoutes);

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

import userRoutes from "./modules/user/userRoutes";
router.use(userRoutes);

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

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!".

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

Maintenant, créons une page React qui affichera un message et nous permettra de comprendre le routage côté client.

Étape 1 : Créer un composant de page

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

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 { Suspense } from "react";
import { Outlet } from "react-router";

import { ItemProvider } from "./components/ItemContext";
import Layout from "./components/Layout";

import About from "./pages/About";
import Home from "./pages/Home";
import ItemCreate from "./pages/ItemCreate";
// ...

import "./index.css";

export default [
  {
    path: "/",
    element: (
      <Layout>
        <Outlet />
      </Layout>
    ),
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
      // ...
    ],
  },
];

É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.

Exercice 3 : Connecter le frontend au backend

Pour notre dernier exercice, connectons notre frontend à l'API backend que nous avons créée à l'exercice 1.

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

Modifiez le fichier About.tsx :

import { useState, useEffect } from "react";

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

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

    fetchHello();
  }, []);

  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.

Félicitations !

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

Créer un endpoint API avec Express
Créer une page React avec routage
Connecter votre frontend React à votre backend Express

Ces compétences de base vous permettront d'explorer davantage le framework et de construire des fonctionnalités plus complexes.

Référez-vous aux pages suivantes pour plus de détails :