ReactJS - Http-Client-Programmierung

Hallo, aufstrebende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von ReactJS und der HTTP-Client-Programmierung. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich Schritt für Schritt durch dieses Abenteuer zu führen. Also, packt eure virtuellen Rucksäcke und los geht's!

Grundlagen verstehen

Bevor wir uns den Feinheiten der HTTP-Client-Programmierung in ReactJS widmen, lassen Sie uns einen Moment innehalten und verstehen, was wir da vorhaben.

Was ist HTTP?

HTTP steht für Hypertext Transfer Protocol. Es ist wie die Sprache, die Computer verwenden, um sich im Internet untereinander zu unterhalten. Wenn du eine Website browsst, sendet dein Computer ständig HTTP-Anfragen und empfängt HTTP-Antworten.

Was ist ein Client?

In unserem Kontext ist ein Client normalerweise ein Webbrowser oder eine mobile App, die Anfragen an einen Server sendet und Antworten empfängt. Stell dir vor, du (der Client) bestellst Essen (machst eine Anfrage) von einem Restaurant (dem Server).

Was ist ReactJS?

ReactJS ist eine beliebte JavaScript-Bibliothek zum Aufbau von Benutzeroberflächen. Es ist wie eine magische Werkzeugkiste, die uns hilft, interaktive und dynamische Webanwendungen mühelos zu erstellen.

Expense Rest API Server

Stellen wir uns vor, wir bauen eine Ausgabenverfolgungsanwendung. Wir brauchen eine Möglichkeit, mit unserem Backend-Server zu kommunizieren, um Ausgabendaten zu speichern und abzurufen. Hier kommt unser Expense Rest API Server ins Spiel.

Was ist eine REST API?

REST (Representational State Transfer) API ist ein Satz von Regeln, die Entwickler befolgen, wenn sie ihre API erstellen. Es ist wie eine standardisierte Sprache, die verschiedene Softwareanwendungen miteinander kommunizieren lässt.

Hier ist ein einfaches Beispiel, wie wir unsere Expense API strukturieren könnten:

HTTP-Methode	Endpunkt	Beschreibung
GET	/expenses	Alle Ausgaben abrufen
GET	/expenses/:id	Eine bestimmte Ausgabe abrufen
POST	/expenses	Eine neue Ausgabe erstellen
PUT	/expenses/:id	Eine bestehende Ausgabe aktualisieren
DELETE	/expenses/:id	Eine Ausgabe löschen

Die fetch() API

Nun, da wir die Struktur unserer API verstehen, lernen wir, wie man mit JavaScripts eingebauter fetch()-Funktion interagiert.

Was ist fetch()?

Die fetch()-Funktion ist eine moderne Methode, um HTTP-Anfragen in JavaScript zu stellen. Es ist wie ein Boten, den wir loszuschicken, um Daten von unserem Server abzurufen oder zu senden.

Schauen wir uns einige Beispiele an:

Alle Ausgaben abrufen

function getAllExpenses() {
fetch('https://api.example.com/expenses')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler:', error));
}

In diesem Beispiel:

1. Wir verwenden fetch(), um eine GET-Anfrage an unsere API-Endpunkt zu senden.
2. Wir konvertieren die Antwort in das JSON-Format.
3. Wir protokollieren die Daten in der Konsole.
4. Wenn ein Fehler auftritt, fangen wir ihn ab und protokollieren ihn.

Eine neue Ausgabe erstellen

function createExpense(expense) {
fetch('https://api.example.com/expenses', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(expense),
})
.then(response => response.json())
.then(data => console.log('Erfolg:', data))
.catch(error => console.error('Fehler:', error));
}

// Verwendung
const newExpense = { description: 'Mittagessen', amount: 15.99 };
createExpense(newExpense);

In diesem Beispiel:

1. Wir geben die HTTP-Methode als 'POST' an.
2. Wir setzen den Content-Type auf JSON in den Headers.
3. Wir konvertieren unser Ausgabeanjekt in einen JSON-String im Body.
4. Wir behandeln die Antwort ähnlich wie bei unserer GET-Anfrage.

Eine Ausgabe aktualisieren

function updateExpense(id, updatedExpense) {
fetch(`https://api.example.com/expenses/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updatedExpense),
})
.then(response => response.json())
.then(data => console.log('Erfolg:', data))
.catch(error => console.error('Fehler:', error));
}

// Verwendung
const updatedExpense = { description: 'Abendessen', amount: 25.99 };
updateExpense(1, updatedExpense);

Dieses Beispiel ist ähnlich wie das Erstellen einer Ausgabe, aber wir verwenden die 'PUT'-Methode und includieren die Ausgabenummer in der URL.

Eine Ausgabe löschen

function deleteExpense(id) {
fetch(`https://api.example.com/expenses/${id}`, {
method: 'DELETE',
})
.then(response => response.json())
.then(data => console.log('Erfolg:', data))
.catch(error => console.error('Fehler:', error));
}

// Verwendung
deleteExpense(1);

Für die Löschung geben wir einfach die 'DELETE'-Methode an und includieren die Ausgabenummer in der URL.

Integration mit React-Komponenten

Nun, da wir wissen, wie man HTTP-Anfragen macht, sehen wir, wie wir das in eine React-Komponente integrieren können.

import React, { useState, useEffect } from 'react';

function ExpenseList() {
const [expenses, setExpenses] = useState([]);

useEffect(() => {
fetch('https://api.example.com/expenses')
.then(response => response.json())
.then(data => setExpenses(data))
.catch(error => console.error('Fehler:', error));
}, []);

return (
<ul>
{expenses.map(expense => (
<li key={expense.id}>{expense.description}: ${expense.amount}</li>
))}
</ul>
);
}

In dieser Komponente:

1. Wir verwenden den useState-Hook, um unseren Ausgabenzustand zu verwalten.
2. Wir verwenden den useEffect-Hook, um Ausgaben abzurufen, wenn die Komponente gerendert wird.
3. Wir rendern die Ausgaben als Liste.

Schlussfolgerung

Glückwunsch! Du hast gerade deine ersten Schritte in die Welt der HTTP-Client-Programmierung mit ReactJS gemacht. Denke daran, wie das Lernen einer neuen Sprache, macht Übung den Meister. Habe keine Angst vor Experimenten und Fehler zu machen - das ist, wie wir als Entwickler lernen und wachsen.

In unserer nächsten Lektion werden wir fortgeschrittenere Themen wie Fehlerbehandlung, Ladezustände und wie man eine robuster und benutzerfreundlicherer Ausgabenverfolgungsanwendung erstellt, erkunden. Bis dahin, viel Spaß beim Coden!

Credits: Image by storyset