Erstellen einer einfachen Full-Stack-Anwendung mit React und Node.js

In meinen vorherigen Blogs habe ich React und Node.js vorgestellt. Jetzt wollen wir sie zusammenbringen, um etwas noch Spannenderes zu schaffen: eine einfache Full-Stack-Anwendung! Man könnte meinen, Full-Stack-Apps seien nur für größere Projekte mit mehreren Datenbanken und komplexen Strukturen geeignet. Während dies konzeptionell zutrifft, können Full-Stack-Anwendungen in der Praxis so einfach sein wie ein kleines Frontend mit einem einfachen Backend. Sehen wir uns also an, wie einfach es ist, mit React und Node.js eine Full-Stack-App zu erstellen.

Schritt 1: Backend mit Node.js und Express

Beginnen wir mit der Erstellung des Backends. Wir verwenden Express als unseren Server, um eine einfache JSON-Nachrichtenantwort an das Frontend zu senden.

1. Express installieren: Um zu beginnen, installieren Sie zunächst Express, indem Sie diesen Befehl in Ihrem Terminal ausführen:

   npm install express

1. Erstellen Sie den Server: Erstellen wir nun den Server mit einer einfachen Route, die eine Begrüßungsnachricht zurücksendet.

   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}`)); 

Erklärung:

• Wir importieren das Express-Modul und erstellen eine Instanz davon mit express().
• Wir haben eine einfache GET-Route unter /greet eingerichtet, die mit einem JSON-Objekt antwortet, das eine Begrüßungsnachricht enthält.
• Wir starten den Server auf Port 3000 und die Konsole protokolliert, dass der Server läuft.

---

Schritt 2: Frontend mit React

Jetzt erstellen wir das Frontend mit React. Wir verwenden zwei Hooks: useState und useEffect, um Daten vom Backend abzurufen.

1. Erstellen Sie die React-App: Wenn Sie Ihre React-App noch nicht eingerichtet haben, können Sie eine mit „create-react-app“ erstellen, indem Sie Folgendes ausführen:

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

1. Schreiben Sie den Frontend-Code: Jetzt ändern wir die Datei App.js, um die Daten von unserem Backend abzurufen und anzuzeigen.

   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>
     );
   }

Erklärung:

• useState wird verwendet, um die Antwortdaten vom Backend zu speichern.
• useEffect wird verwendet, um die Abrufanforderung auszulösen, wenn die Komponente bereitgestellt wird.
• Wir verwenden die fetch()-API, um eine Anfrage an http://localhost:3000/greet zu senden und die Antwort zu verarbeiten. Wenn der Abruf erfolgreich ist, aktualisieren wir den Antwortstatus mit der Nachricht vom Backend.
• Wir zeigen die Antwort in der Komponente an und zeigen „Laden...“ an, während die Anfrage ausgeführt wird.

---

Schritt 3: Ausführen der App

1. Backend starten: Führen Sie im Backend-Ordner (in dem sich Ihre server.js-Datei befindet) Folgendes aus:

   npm install express

1. Frontend starten: Führen Sie im Frontend-Ordner (in dem sich Ihre React-App befindet) Folgendes aus:

   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}`)); 

Öffnen Sie nun Ihren Browser und gehen Sie zu http://localhost:3000. Sie sollten eine einfache Nachricht sehen, die vom Backend abgerufen wurde und „Zee here...“ anzeigt.

---

Fazit

Und das ist es! Sie haben gerade eine einfache Full-Stack-Anwendung mit React und Express erstellt. Das ist ein toller Anfang, und auf dieser Grundlage können Sie komplexere Anwendungen erweitern und erstellen. Viel Spaß beim Codieren!

---

Wichtige Erkenntnisse:

• Eine Full-Stack-Anwendung muss nicht komplex sein. Ein einfaches Frontend und Backend können als Full-Stack betrachtet werden.
• Die useState- und useEffect-Hooks von React eignen sich hervorragend zum Abrufen von Daten von einer Backend-API.
• Express ist ein einfaches und leistungsstarkes Framework zum Erstellen von Backend-APIs.

Das obige ist der detaillierte Inhalt vonErstellen einer einfachen Full-Stack-Anwendung mit React und Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!