How to Build a React Frontend and Connect It to a Backend?

in diesem tutorial erstellen sie eine to do listen anwendung mit react und verbinden sie mit einem backend dienst dieses projekt ist ein idealer ausgangspunkt, da es grundlegende crud (erstellen, lesen, aktualisieren, löschen) operationen und eine einfache benutzeroberfläche umfasst am ende haben sie eine voll funktionsfähige app mit einem verbundenen backend, die zeigt, wie man verwaltete backend dienste in ihren entwicklungsworkflow integriert der aufbau einer full stack anwendung von grund auf erfordert oft die einrichtung eines backends, die verwaltung einer datenbank, die handhabung von authentifizierung und die bereitstellung von infrastruktur diese aufgaben können komplex und zeitaufwendig sein, insbesondere wenn sie sich auf die frontend entwicklung konzentrieren, und wir werden dafür back4app verwenden back4app vereinfacht diesen prozess, indem es eine skalierbare backend as a service (baas) lösung bereitstellt, die es ihnen ermöglicht, sich auf den aufbau ihrer anwendung zu konzentrieren, während es das hosting, datenbanken und apis verwaltet back4app bietet backend dienste, einschließlich einer sofort einsatzbereiten datenbank, authentifizierung, cloud code für serverseitige logik und sdks für nahtlose integration es unterstützt auch containerisierte bereitstellungen, was es zu einer flexiblen wahl für das hosting von full stack anwendungen macht mit diesen funktionen können sie anwendungen schnell erstellen und bereitstellen, ohne die serverinfrastruktur verwalten zu müssen wichtige erkenntnisse durch das lesen dieses artikels werden sie lernen richten sie ein modernes react projekt mit branchenüblichen tools ein integrieren sie nahtlos einen backend service zur verwaltung von anwendungsdaten implementieren sie wesentliche crud operationen für ein dynamisches benutzererlebnis stellen sie eine voll funktionsfähige todo anwendung bereit und sehen sie sie laufen auf todo app voraussetzungen um dieses tutorial effektiv zu verfolgen, stellen sie sicher, dass sie die folgenden tools und fähigkeiten haben node js und npm auf ihrem computer installiert sie verwenden npm, um abhängigkeiten zu installieren und ihre react anwendung auszuführen überprüfen sie ihre installation, indem sie node v und npm v in ihrem terminal ausführen grundkenntnisse in react , einschließlich funktionaler komponenten, zustandsverwaltung mit hooks und der handhabung von benutzereingaben dieses tutorial behandelt nicht die grundlagen von react, daher wird vertrautheit mit jsx und der komponentenstruktur erwartet ein back4app konto zur einrichtung und verwaltung ihrer backend services melden sie sich bei back4app https //www back4app com/ an, wenn sie noch kein konto haben mit diesen voraussetzungen sind sie bereit, ihr projekt einzurichten und mit dem bau zu beginnen projektsetup um zu beginnen, müssen sie ihre lokale entwicklungsumgebung einrichten und ihr frontend projekt mit vite initialisieren dies gewährleistet ein schnelles und effizientes entwicklungserlebnis, während ihre projektstruktur sauber bleibt stellen sie zunächst sicher, dass sie node js (lts version) installiert haben wenn nicht, laden sie es von nodejs org https //nodejs org/ herunter und installieren sie es überprüfen sie nach der installation node v npm v jetzt initialisieren sie ihr react projekt mit vite , einem modernen build tool, das eine überlegene geschwindigkeit im vergleich zu create react app bietet führen sie den folgenden befehl in ihrem terminal aus und ersetzen sie todo app durch ihren bevorzugten projektnamen npm create vite\@latest todo app template react navigieren sie in den projektordner cd todo app installieren sie die erforderlichen abhängigkeiten npm install starten sie den entwicklungsserver, um die einrichtung zu überprüfen npm run dev dies startet ihre react app lokal öffnen sie die bereitgestellte url in ihrem browser, um zu bestätigen, dass sie läuft mit ihrer frontend einrichtung ist der nächste schritt, ein backend auf back4app zu erstellen, um die datenspeicherung und api interaktionen zu verwalten erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse , unterstützt wird und eine nosql datenbank, authentifizierung, cloud code und api generierung sofort einsatzbereit bietet dies ermöglicht es ihnen, die daten ihrer app zu verwalten, ohne ein backend von grund auf neu zu erstellen sie erstellen ein task datenmodell, um aufgabenlisten elemente zu speichern und es mit ihrem react frontend zu verbinden erstellen einer backend anwendung melden sie sich an bei ihrem back4app dashboard https //www back4app com/ und klicken sie auf "eine neue app erstellen " geben sie einen namen ein für ihre anwendung (z b todoapp ) und wählen sie nodejs/parse als backend typ sobald sie erstellt ist, gehen sie zu "datenbank" > "browser" , klicken sie auf "eine klasse erstellen" , und wählen sie "benutzerdefiniert" nennen sie es task und setzen sie die klassenberechtigungen so, dass öffentliches lesen und schreiben erlaubt ist (sie können dies später verfeinern) fügen sie in der task klasse die folgenden felder hinzu titel (string) – titel der aufgabe beschreibung (string) – einzelheiten zur aufgabe abgeschlossen (boolean) – abschlussstatus fälligkeitsdatum (datum) – frist der aufgabe klicken sie auf "speichern" um das schema zu erstellen back4app mit react verbinden jetzt integrieren sie back4app in ihr react projekt mit dem parse javascript sdk zur kommunikation mit dem backend installieren sie es über npm npm install parse als nächstes konfigurieren sie das sdk, indem sie es mit ihrer anwendungs id und javascript schlüssel holen sie sich diese anmeldeinformationen aus dem back4app dashboard im abschnitt app einstellungen > sicherheit & schlüssel back4app schlüssel seite mit hervorgehobener app id und js schlüssel innerhalb von src/main jsx , konfigurieren sie parse, indem sie das minimierte sdk importieren und es mit ihrer anwendungs id und javascript schlüssel import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; mit ihrem backend verbunden, können sie die to do list ui erstellen und crud operationen integrieren entwicklung des frontends jetzt, da ihr backend eingerichtet und verbunden ist, ist es zeit, die to do list ui in react zu erstellen sie werden komponenten zum hinzufügen, anzeigen, aktualisieren und löschen von aufgaben erstellen und dabei den zustand effizient verwalten strukturierung der komponenten ihre anwendung wird aus drei hauptkomponenten bestehen taskform jsx – verantwortlich für das hinzufügen neuer aufgaben tasklist jsx – zeigt alle aufgaben an und bietet steuerungen zum markieren von aufgaben als abgeschlossen oder zum löschen taskitem jsx – stellt eine einzelne aufgabe dar mit aktionen wie markieren als abgeschlossen oder löschen beginnen sie damit, einen components ordner innerhalb von src zu erstellen und fügen sie diese dateien hinzu mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx status verwalten sie verwenden die usestate und useeffect hooks, um aufgaben lokal zu verwalten, während sie daten von back4app abrufen und aktualisieren zuerst definieren sie den status in app jsx import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = usestate(\[]); useeffect(() => { fetchtasks(); }, \[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map((task) => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; das aufgabenformular erstellen erstellen sie innerhalb von taskform jsx , ein kontrolliertes formular, um neue aufgaben hinzuzufügen dies speichert eingabewerte im status und sendet daten an back4app import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; aufgaben anzeigen innerhalb von tasklist jsx , rendern sie die liste der aufgaben und fügen sie aktionen hinzu, um sie als abgeschlossen zu markieren und sie zu löschen import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; task item komponente innerhalb von taskitem jsx , definiere aktionen, um eine aufgabe als abgeschlossen zu markieren oder sie von back4app zu löschen import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; styling der anwendung erstellen sie eine styles css datei in src und fügen sie grundlegende stile hinzu / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } importieren sie dieses css in main jsx import " /styles css"; die benutzeroberfläche der anwendung ihre to do list app hat jetzt ein funktionierendes frontend mit einer react benutzeroberfläche, back4app integration und grundlegender gestaltung fertige to do liste app als nächstes werden sie dieses frontend auf back4app web deployment bereitstellen bereitstellung des frontends auf back4app web deployment back4app web deployment bietet eine vollständig verwaltete, containerisierte umgebung zur bereitstellung von anwendungen es unterstützt docker basierte bereitstellungen , die es ihnen ermöglichen, ihr frontend in einen container zu verpacken und es auf der infrastruktur von back4app auszuführen dies gewährleistet skalierbarkeit, sicherheit und eine einfache ci/cd pipeline durch die direkte integration mit github vite für die containerisierung konfigurieren vite dient standardmäßig anwendungen im entwicklungsmodus für die produktion müssen sie eine statische version erstellen und sie mit einem leichten webserver wie nginx , bereitstellen aktualisieren sie zuerst vite config js , um einen geeigneten basis pfad für die bereitstellung anzugeben import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); führen sie jetzt den build befehl aus, um produktionsbereite dateien zu generieren npm run build erstellen einer dockerfile für die bereitstellung eine dockerfile definiert, wie ihre react app containerisiert wird erstellen sie eine datei mit dem namen dockerfile im stammverzeichnis ihres projekts und fügen sie die folgende konfiguration hinzu # use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] dieses dockerfile macht folgendes verwendet node js um abhängigkeiten zu installieren und die react app zu bauen kopiert die gebauten dateien in einen nginx container für effizientes servieren statischer dateien öffnet port 80 um die anwendung bereitzustellen bauen und testen des containers lokal bevor sie bereitstellen, testen sie den container lokal, um sicherzustellen, dass er wie erwartet funktioniert führen sie den folgenden befehl aus, um das docker image zu erstellen docker build t todo frontend starten sie dann einen container mit docker run p 8080 80 todo frontend öffnen sie http //localhost 8080 in ihrem browser, um zu bestätigen, dass ihre react app korrekt bereitgestellt wird bereitstellung auf github und verbindung zu back4app um auf back4app bereitzustellen, pushen sie zuerst ihr projekt zu github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main befolgen sie nun diese schritte, um über die back4app webbereitstellungsplattform bereitzustellen melden sie sich bei back4app web deployment https //www back4app com/containers an klicken sie auf "neue app erstellen" , benennen sie ihr projekt und wählen sie github repository autorisieren sie back4app, auf ihr github zuzugreifen und wählen sie das todo app repository wählen sie dockerfile bereitstellung und bestätigen sie die build einstellungen klicken sie auf "bereitstellen" um den ersten build auszulösen verwalten und überwachen von bereitstellungen sobald die bereitstellung abgeschlossen ist, navigieren sie zu ihrer app im back4app dashboard hier können sie protokolle anzeigen um probleme zu debuggen überwachen sie container neustarts und ressourcennutzung erneute bereitstellung bei neuen commits mit dem "build auslösen" button konfigurieren sie benutzerdefinierte domains wenn sie auf einer persönlichen domain hosten back4app web deployment dashboard bereitgestellte anwendung sie können auf die bereitgestellte anwendung, die in diesem tutorial verwendet wird, zugreifen unter https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ mit ihrem erfolgreich bereitgestellten frontend ist der nächste schritt testen und debuggen, um sicherzustellen, dass alles reibungslos funktioniert testen und debuggen nachdem sie ihr frontend und backend bereitgestellt haben, müssen sie sicherstellen, dass die anwendung korrekt funktioniert dies umfasst das testen der frontend backend interaktion , das identifizieren häufiger probleme und das effektive debuggen von fehlern integriertes anwendungstest um zu überprüfen, ob ihr react frontend ordnungsgemäß mit dem back4app backend interagiert, befolgen sie diese schritte api konnektivität testen öffnen sie die entwicklertools ihres browsers ( f12 → netzwerk tab ) und überprüfen sie die api aufrufe beim hinzufügen oder abrufen von aufgaben wenn api anfragen fehlschlagen, überprüfen sie den antwortstatus und die fehlermeldungen aufgaben manuell hinzufügen und abrufen verwenden sie die to do listen benutzeroberfläche , um eine aufgabe hinzuzufügen aktualisieren sie die seite, um sicherzustellen, dass die aufgabe erhalten bleibt öffnen sie den back4app datenbankbrowser und bestätigen sie, dass die aufgabe unter der aufgabe klasse erscheint crud operationen überprüfen vervollständigen und löschen sie aufgaben über die benutzeroberfläche und überprüfen sie dann die änderungen in der back4app datenbank wenn updates nicht angezeigt werden, überprüfen sie auf fehler in der browser konsole oder in den api protokollen randfälle testen versuchen sie, leere aufgaben einzureichen, um sicherzustellen, dass die validierung funktioniert simulieren sie langsame internetverbindungen ( chrome devtools → netzwerk → langsame 3g ), um die leistung zu testen häufige probleme & fehlersuche cors fehler ( access control allow origin problem) gehe zu back4app dashboard > app einstellungen > sicherheit & schlüssel unter "erlaubte header und domains" , füge die url deines frontends hinzu speichern und den backend dienst neu starten authentifizierungsfehler (401 nicht autorisierte fehler) stelle sicher, dass die anwendungs id und der javascript schlüssel korrekt in deiner react app konfiguriert sind wenn du die benutzerauthentifizierung verwendest, überprüfe, ob das sitzungstoken in den api anfragen enthalten ist backend bereitstellungsprobleme wenn die api nicht reagiert, gehe zu back4app web bereitstellung > protokolle um nach fehlern in deiner backend bereitstellung zu suchen starte den container bei bedarf neu nach abschluss der tests und der fehlersuche besteht der nächste schritt darin, best practices für die nutzung von back4app diensten umzusetzen, um die leistung und wartbarkeit zu optimieren best practices für die nutzung von back4app diensten hier sind einige bewährte praktiken, die sie bei der nutzung von back4app befolgen können optimierung der interaktion zwischen frontend und backend eine effiziente kommunikation zwischen ihrem frontend und dem backend von back4app sorgt für ein reibungsloses benutzererlebnis verwenden sie batch anfragen bei der durchführung mehrerer operationen, um den netzwerkaufwand zu reduzieren const tasks = \[task1, task2, task3]; parse object saveall(tasks); für leseoperationen, caching aktivieren und indizierte abfragen im back4app dashboard einrichten, um häufige anfragen zu beschleunigen fordern sie immer nur die notwendigen felder an, um die antwortgröße zu minimieren query select("title", "completed"); umgebung & skalierung speichern sie sensible schlüssel, wie anwendungs id und javascript schlüssel , in umgebungsvariablen, anstatt sie hart zu codieren wenn sie vite , verwenden, erstellen sie eine env datei vite parse app id=your app id vite parse js key=your js key in der produktion aktivieren sie auto skalierung für die back4app webbereitstellung, um erhöhten verkehr zu bewältigen überwachen sie die datenbanknutzung und optimieren sie abfragen mit dem performance monitoring tool in back4app erweiterte sicherheit & leistung beschränken sie klassenebene berechtigungen (clps) , damit nur authentifizierte benutzer daten ändern können setzen sie lese /schreibberechtigungen dynamisch basierend auf benutzerrollen task setacl(new parse acl(parse user current())); verwenden sie cloud code um komplexe geschäftslogik vom frontend auszulagern, die api exposition zu reduzieren und die leistung zu verbessern aktivieren sie schließlich ratenbegrenzung und anforderungsvalidierung um missbrauch zu verhindern und die datenintegrität sicherzustellen fazit sie haben nun eine vollständige to do listenanwendung erstellt, indem sie ein react frontend eingerichtet, es mit dem backend von back4app integriert und über containerisierte workflows bereitgestellt haben dieser prozess hat einen klaren weg von der lokalen entwicklung zur cloud bereitstellung aufgezeigt, um eine reibungslose interaktion zwischen frontend und backend zu gewährleisten blicken sie in die zukunft und ziehen sie verbesserungen wie fortschrittliches benutzermanagement, echtzeit updates und integrationen von drittanbietern in betracht für weiteres lernen erkunden sie die back4app dokumentation https //www back4app com/docs und die ressourcen der community