Erste Schritte mit Node.js, Express und React: Aufbau einer leistungsstarken API

Heute tauchen wir in die aufregende Welt von Node.js, Express und React ein. Egal, ob Sie ein erfahrener Programmierer sind oder gerade erst anfangen, dieser Blogbeitrag führt Sie durch die Erstellung einer leistungsstarken API mit diesen beliebten Technologien. Wir behandeln die Grundlagen, gehen die Einrichtung Ihrer Umgebung durch und erkunden, wie diese Tools zusammenarbeiten. Außerdem zeigen wir Ihnen, wie Apidog Ihnen das Leben erleichtern kann. Schnappen Sie sich also Ihren Lieblings-Coding-Snack und legen wir los!

Warum Node.js, Express und React?

Bevor wir uns ins Detail stürzen, wollen wir darüber sprechen, warum Sie sich für Node.js, Express und React interessieren sollten.

Node.js

Node.js ist eine Laufzeitumgebung, mit der Sie JavaScript serverseitig ausführen können. Es basiert auf der V8-JavaScript-Engine von Chrome und ist damit schnell und effizient. Mit Node.js können Sie skalierbare Netzwerkanwendungen erstellen, mehrere Anfragen gleichzeitig verarbeiten und eine einzige Programmiersprache (JavaScript) sowohl für die Client- als auch für die serverseitige Entwicklung verwenden.

Express

Express ist ein minimales und flexibles Webanwendungs-Framework für Node.js. Es bietet eine robuste Reihe von Funktionen für die Erstellung von Web- und mobilen Anwendungen. Mit Express können Sie ganz einfach einen Server einrichten, Routen verwalten und HTTP-Anfragen und -Antworten verarbeiten. Es ist das Rückgrat vieler Node.js-Anwendungen und passt perfekt zu React.

React

React ist eine JavaScript-Bibliothek für den Aufbau von Benutzeroberflächen. Sie wird von Facebook und einer Community von einzelnen Entwicklern und Unternehmen gepflegt. Mit React können Sie wiederverwendbare UI-Komponenten erstellen und den Zustand Ihrer Anwendung effizient verwalten. In Kombination mit Node.js und Express können Sie dynamische, reaktionsfähige Webanwendungen mit Leichtigkeit erstellen.

Einrichten Ihrer Entwicklungsumgebung

Um zu beginnen, müssen Sie Ihre Entwicklungsumgebung einrichten. Hier ist eine Schritt-für-Schritt-Anleitung:

Installieren Sie Node.js: Gehen Sie zur Node.js-Website und laden Sie die neueste Version herunter. Befolgen Sie die Installationsanweisungen für Ihr Betriebssystem.

Installieren Sie npm: npm (Node Package Manager) wird mit Node.js gebündelt. Sie können überprüfen, ob es installiert ist, indem Sie npm -v in Ihrem Terminal ausführen.

Richten Sie ein neues Projekt ein: Erstellen Sie ein neues Verzeichnis für Ihr Projekt und navigieren Sie in Ihrem Terminal dorthin. Initialisieren Sie ein neues Node.js-Projekt, indem Sie npm init ausführen. Befolgen Sie die Anweisungen, um eine package.json-Datei zu erstellen.

Installieren Sie Express: Führen Sie npm install express aus, um Express zu installieren.

Installieren Sie React: Sie verwenden Create React App, um ein neues React-Projekt einzurichten. Führen Sie npx create-react-app client aus, um eine neue React-App in einem client-Verzeichnis zu erstellen.

Installieren Sie Apidog: Um die API-Entwicklung und -Tests zu vereinfachen, verwenden wir Apidog. Sie können es kostenlos von der Apidog-Website herunterladen.

Erstellen Ihrer API mit Node.js und Express

Nachdem Ihre Umgebung eingerichtet ist, erstellen wir eine einfache API mit Node.js und Express.

Schritt 1: Richten Sie den Express-Server ein

Erstellen Sie eine neue Datei namens server.js in Ihrem Projektstammverzeichnis. Fügen Sie den folgenden Code hinzu, um einen einfachen Express-Server einzurichten:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

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

Führen Sie node server.js in Ihrem Terminal aus. Sie sollten "Server running at http://localhost:3000" sehen. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000, um "Hello World!" zu sehen.

Schritt 2: Erstellen Sie API-Routen

Als Nächstes erstellen wir einige API-Routen. Fügen Sie in Ihrer server.js-Datei den folgenden Code hinzu, um eine einfache API zu erstellen, die eine Liste von Benutzern zurückgibt:

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
  { id: 3, name: 'Sam Smith' }
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

Wenn Sie jetzt zu http://localhost:3000/api/users navigieren, sehen Sie eine JSON-Antwort mit der Liste der Benutzer.

Schritt 3: Stellen Sie eine Verbindung zu einer Datenbank her

Um unsere API dynamischer zu gestalten, stellen wir eine Verbindung zu einer Datenbank her. Für dieses Beispiel verwenden wir MongoDB. Zuerst müssen Sie mongoose installieren, indem Sie npm install mongoose ausführen.

Erstellen Sie eine neue Datei namens db.js und fügen Sie den folgenden Code hinzu, um eine Verbindung zu MongoDB herzustellen:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

module.exports = db;

In Ihrer server.js-Datei müssen Sie die Datei db.js einbinden, um eine Verbindung zur Datenbank herzustellen:

const db = require('./db');

Erstellen wir nun ein Mongoose-Modell für unsere Benutzer. Erstellen Sie eine neue Datei namens user.js und fügen Sie den folgenden Code hinzu:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String
});

const User = mongoose.model('User', userSchema);

module.exports = User;

Aktualisieren Sie in Ihrer server.js-Datei die Route /api/users, um Benutzer aus der Datenbank abzurufen:

const User = require('./user');

app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

Sie können jetzt Benutzer aus Ihrer MongoDB-Datenbank hinzufügen, aktualisieren und löschen, und Ihre API spiegelt diese Änderungen dynamisch wider.

Integrieren von React mit Node.js und Express

Nachdem wir nun unsere API eingerichtet haben, integrieren wir sie mit einem React-Frontend.

Schritt 1: Richten Sie einen Proxy ein

Um Anfragen von unserem React-Frontend an unsere API zu senden, richten wir einen Proxy ein. Öffnen Sie die Datei client/package.json und fügen Sie die folgende Zeile hinzu:

"proxy": "http://localhost:3000"

Schritt 2: Abrufen von Daten von der API

Erstellen wir in Ihrer React-App eine Komponente, die Daten von der API abruft und anzeigt. Öffnen Sie die Datei client/src/App.js und ersetzen Sie ihren Inhalt durch den folgenden Code:

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div className="App">
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Führen Sie npm start im client-Verzeichnis aus, um den React-Entwicklungsserver zu starten. Sie sollten eine Liste der Benutzer sehen, die von Ihrer API abgerufen und auf der Seite angezeigt werden.

💡

Um Ihre API-Entwicklung noch reibungsloser zu gestalten, laden Sie Apidog noch heute kostenlos herunter. Mit Apidog haben Sie alle Tools, die Sie zum Testen, Dokumentieren und Verwalten Ihrer API an einem Ort benötigen. Viel Spaß beim Codieren!

button

Testen Ihrer API mit Apidog

Nachdem Sie nun eine funktionierende API und ein React-Frontend haben, ist es an der Zeit, Ihre API zu testen. Apidog ist ein fantastisches Werkzeug dafür.

Schritt 1: Öffnen Sie Apidog und erstellen Sie eine neue Anfrage.

Schritt 2: Geben Sie im Testeditor die URL Ihres API-Endpunkts ein, wählen Sie die HTTP-Methode aus und fügen Sie alle Header, Parameter oder Body-Daten hinzu, die Sie benötigen. Sie können beispielsweise die Route testen, die eine einfache Nachricht zurückgibt, die wir zuvor erstellt haben:

Schritt 3: Klicken Sie auf die Schaltfläche Senden und sehen Sie sich das Ergebnis Ihres Tests an. Sie sollten den Statuscode, die Antwortzeit und den Antworttext Ihrer API sehen. Zum Beispiel sollten Sie so etwas sehen:

Apidog ist ein großartiges Werkzeug zum Testen Ihrer APIs, da es Ihnen hilft, die Qualität, Zuverlässigkeit und Leistung Ihrer Webdienste sicherzustellen. Es spart Ihnen auch Zeit und Mühe, da Sie keinen Code schreiben oder Software installieren müssen, um Ihre APIs zu testen. Sie können einfach Ihren Browser verwenden und die benutzerfreundliche Oberfläche und die Funktionen von Apidog genießen.

Fazit

Herzlichen Glückwunsch! Sie haben erfolgreich eine leistungsstarke API mit Node.js, Express und React erstellt. Sie haben gelernt, wie Sie Ihre Entwicklungsumgebung einrichten, API-Routen erstellen, eine Verbindung zu einer Datenbank herstellen und React in Ihr Backend integrieren. Außerdem haben Sie entdeckt, wie Apidog das Testen Ihrer API vereinfachen kann.

Denken Sie daran, dies ist nur der Anfang. Es gibt unzählige Möglichkeiten, Ihre Anwendung zu erweitern und zu verbessern. Sie können eine Authentifizierung hinzufügen, komplexere Routen implementieren und Ihr Frontend mit zusätzlichen Funktionen erweitern.