First exercises en US - rocambille/start-express-react GitHub Wiki

To get started with StartER, here are some practical exercises to complete after installation. They'll allow you to verify that your environment is functional and experiment with the framework's essential principles, from Express routing to React integration.

Let's start with a minimalist endpoint that returns "hello, world!". This exercise validates your setup and introduces the basics of routing with Express.

Step 1: Create a new module

Create a hello folder in src/express/modules.

Step 2: Create a routes file

Create a helloRoutes.ts file in the src/express/modules/hello folder with the following contents:

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;

Step 3: Integrate the module into the main routes

Modify the src/express/routes.ts file to integrate your new module:

import express, { Router } from "express";

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

// ...

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

import helloRoutes from "./modules/hello/helloRoutes";
router.use(helloRoutes);

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

export default router;

Step 4: Test the endpoint

Restart your server if necessary and visit http://localhost:5173/api/hello in your browser or use a tool like cURL or Postman. You should see the JSON response with the message "hello, world!".

🎉 If everything works, congratulations: your first Express route is up and running!

Now let's move on to the client side: we'll create a page and connect it to React Router's routing system.

Step 1: Create a page component

Create an About.tsx file in the src/react/components folder:

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

export default About;

Step 2: Add the route to the routes.tsx file

Modify the src/react/routes.tsx file to integrate your new 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;

Step 3: Update the navigation

Modify the NavBar component to include a link to your new page. Open the src/react/components/NavBar.tsx file and add a new element to the navigation.

Step 4: Test the Page

Visit http://localhost:5173/about in your browser. You should see your new page.

🎉 If the page displays correctly, you have successfully validated client-side routing and the integration of a standalone component.

In this last exercise, we will connect the frontend and the backend: the React page will display the message returned by your Express API.

Step 1: Add the fetch functionality to About.tsx

Modify the About.tsx component to add a call to the /api/hello endpoint:

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;

Step 2: Test the integration

Reload the http://localhost:5173/about page. You should now see the "hello, world!" message retrieved from your API.

🎉 If you see the "hello, world!" message in your browser, your integration is successful. You've just completed a full loop between the React client and the Express server!

You have completed the introductory exercises for StartER! You know how to:

1. Create an API endpoint with Express
2. Create a React page and connect it to the router
3. Connect the frontend to the backend to display dynamic data

These basics will allow you to explore more advanced aspects of the framework and develop your own features.

Check out the following pages for more information:

• Database
• Express
• React
• Types