Création d'une application Full-Stack simple avec React et Node.js

Dans mes précédents blogs, j'ai présenté React et Node.js. Maintenant, rassemblons-les pour créer quelque chose d'encore plus excitant : une simple application full-stack ! Vous pourriez penser que les applications full-stack sont réservées aux projets plus importants, avec plusieurs bases de données et des structures complexes. Bien que cela soit vrai sur le plan conceptuel, dans la pratique, les applications full-stack peuvent être aussi simples qu'un petit frontend avec un backend de base. Alors, décomposons cela et voyons à quel point il est facile de créer une application full-stack avec React et Node.js.

Étape 1 : Backend avec Node.js et Express

Commençons par créer le backend. Nous utiliserons Express comme serveur pour envoyer une simple réponse par message JSON au frontend.

1. Installer Express : Pour commencer, installez d'abord Express en exécutant cette commande dans votre terminal :

   npm install express

1. Créer le serveur : Créons maintenant le serveur avec une route simple qui renverra un message de bienvenue.

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

Explication :

• Nous importons le module express et en créons une instance avec express().
• Nous avons mis en place une simple route GET vers /greet qui répond par un objet JSON contenant un message de bienvenue.
• Nous démarrons le serveur sur le port 3000 et la console enregistrera que le serveur est en cours d'exécution.

---

Étape 2 : Frontend avec React

Maintenant, créons le frontend en utilisant React. Nous utiliserons deux hooks : useState et useEffect pour récupérer les données du backend.

1. Créez l'application React : Si vous n'avez pas encore configuré votre application React, vous pouvez en créer une à l'aide de create-react-app en exécutant :

   npx create-react-app my-fullstack-app
   cd my-fullstack-app

1. Écrivez le code frontend : Maintenant, modifions le fichier App.js pour récupérer les données de notre backend et les afficher.

   import { useState, useEffect } from 'react';

   export function App() {
     const [response, setResponse] = useState(null);

     useEffect(() => {
       const controller = new AbortController();
       // This is used to abort the fetch request if the component is unmounted
       const fetchData = async () => {
         try {
           const response = await fetch('http://localhost:3000/greet', {
             signal: controller.signal,
           });

           if (!response.ok) throw new Error("Couldn't fetch data");

           const data = await response.json();
           setResponse(data.message); // Corrected the response property here
         } catch (error) {
           console.error(error);
         }
       };

       fetchData();

       // Clean up function to abort the fetch request if needed
       return () => controller.abort();
     }, []); 

     return (
       <div>
         {response ? <p>{response}</p> : <p>Loading...</p>}
       </div>
     );
   }

Explication :

• useState est utilisé pour conserver les données de réponse du backend.
• useEffect est utilisé pour déclencher la demande de récupération lors du montage du composant.
• Nous utilisons l'API fetch() pour envoyer une requête à http://localhost:3000/greet et gérer la réponse. Si la récupération réussit, nous mettons à jour l'état de la réponse avec le message du backend.
• Nous affichons la réponse dans le composant, affichant "Chargement..." pendant que la requête est en cours.

---

Étape 3 : Exécuter l'application

1. Démarrer le backend : Dans le dossier backend (où se trouve votre fichier server.js), exécutez :

   npm install express

1. Démarrer le frontend : Dans le dossier frontend (où se trouve votre application React), exécutez :

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

Maintenant, ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir un simple message récupéré du backend, et il affichera "Zee here...".

---

Conclusion

Et c'est tout ! Vous venez de créer une application simple full-stack à l'aide de React et Express. C'est un bon début, et avec cette base, vous pouvez développer et créer des applications plus complexes. Bon codage !

---

Principaux points à retenir :

• Une application full-stack n'a pas besoin d'être complexe. Un simple frontend et backend peuvent être considérés comme un full-stack.
• Les hooks useState et useEffect de React sont parfaits pour récupérer des données à partir d'une API backend.
• Express est un framework simple et puissant pour créer des API backend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!