Quickstarters
Wie man eine CRUD-App mit ReactJS erstellt?

42min
Einführung
In diesem Tutorial werden Sie eine umfassende CRUD-Anwendung (erstellen, lesen, aktualisieren und löschen) mit ReactJS erstellen.
Dieser Leitfaden ist darauf ausgelegt, die grundlegenden Operationen einer Softwareanwendung durch die Demonstration des Aufbaus von CRUD-Apps, die Daten effektiv verwalten und aktualisieren, durchzuführen.
Sie beginnen mit der Erstellung und Konfiguration eines Back4app-Projekts mit dem Namen Basic-CRUD-App-ReactJS, das als robustes Backend-System für Ihre Webanwendung fungiert.
Als Nächstes entwerfen Sie ein skalierbares Datenbankschema, indem Sie detaillierte Sammlungen und Felder definieren – entweder manuell oder mit Hilfe des Back4app AI-Agenten.
Dann nutzen Sie die Back4app Admin App – ein benutzerfreundliches Verwaltungstool mit einer Drag-and-Drop-Oberfläche – um Ihre Sammlungen einfach zu verwalten.
Diese Admin-Oberfläche verbessert die Benutzererfahrung und vereinfacht die Benutzeroberfläche, sodass Benutzer CRUD-Operationen schnell durchführen können.
Schließlich werden Sie Ihr ReactJS-Frontend bereitstellen und es mit Back4app unter Verwendung von REST/GraphQL (oder dem Parse SDK, wo verfügbar) integrieren, während Sie Ihr Backend mit fortschrittlichen Zugriffskontrollen sichern.
Am Ende dieses Leitfadens haben Sie eine produktionsbereite Webanwendung erstellt, die nicht nur grundlegende CRUD-Operationen unterstützt, sondern auch die Benutzerauthentifizierung und robuste Datenaktualisierungsfunktionen umfasst.
Wichtige Erkenntnisse
Erfahren Sie, wie Sie CRUD-Anwendungen erstellen, die Daten effizient mit einem zuverlässigen Datenbankverwaltungssystem verwalten.
Gewinnen Sie praktische Einblicke in das Design eines skalierbaren Backends und dessen Integration mit einem ReactJS-Frontend, um die Benutzererfahrung zu verbessern.
Entdecken Sie, wie Sie ein Drag-and-Drop-Management-Tool (die Back4app Admin App) verwenden, um die Erstellung, das Lesen, die Aktualisierung und das Löschen von Operationen zu vereinfachen.
Verstehen Sie Bereitstellungstechniken, einschließlich Docker-Containerisierung, um Ihre Webanwendung schnell zu starten.
﻿
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Ein Back4app-Konto und ein neues Projekt eingerichtet.
Wenn Sie Hilfe benötigen, beziehen Sie sich auf Erste Schritte mit Back4app.
Eine ReactJS-Entwicklungsumgebung.
Verwenden Sie Create React App oder ein ähnliches Tool. Stellen Sie sicher, dass Node.js (Version 14 oder höher) installiert ist.
Grundlegendes Verständnis von JavaScript, ReactJS und REST-APIs.
Überprüfen Sie die ReactJS-Dokumentation falls erforderlich.
﻿
Schritt 1 – Projektsetup
Erstellen eines neuen Back4app-Projekts
Melden Sie sich bei Ihrem Back4app-Konto an.
Klicken Sie auf die Schaltfläche „Neue App“ in Ihrem Dashboard.
Geben Sie den Projektnamen ein: Basic-CRUD-App-ReactJS und folgen Sie den Anweisungen, um Ihr Projekt zu erstellen.
Neues Projekt erstellen
﻿
Sobald Ihr neues Projekt erstellt ist, wird es auf Ihrem Back4app-Dashboard angezeigt und bietet eine solide Grundlage für Ihre Backend-Konfiguration und Projektverwaltung.
﻿
Schritt 2 – Datenbankschema-Design
Entwurf Ihres Datenmodells
Für die grundlegende CRUD-App werden Sie mehrere Sammlungen erstellen.
Im Folgenden finden Sie einige Beispiele für die Sammlungen, die Sie benötigen, sowie die erforderlichen Felder und Datentypen, um Ihnen bei der effektiven Einrichtung Ihres Datenbankschemas zu helfen.
Diese Sammlungen sind so konzipiert, dass sie die grundlegenden CRUD-Operationen ausführen, die es Benutzern ermöglichen, Daten zu erstellen, zu lesen, zu aktualisieren und zu löschen.
1. Artikel-Sammlung
Diese Sammlung speichert Informationen über jeden Artikel.
Feld
Datentyp
Beschreibung
_id
Objekt-ID
Automatisch generierter Primärschlüssel.
Titel
Zeichenfolge
Der Titel des Elements.
Beschreibung
Zeichenfolge
Eine kurze Beschreibung des Artikels.
erstellt_am
Datum
Zeitstempel, wann der Artikel erstellt wurde.
aktualisiert_am
Datum
Zeitstempel, wann der Artikel zuletzt aktualisiert wurde.
2. Benutzersammlung
Diese Sammlung speichert Benutzerinformationen und Authentifizierungsdetails.
Feld
Datentyp
Beschreibung
_id
Objekt-ID
Automatisch generierter Primärschlüssel.
Benutzername
Zeichenfolge
Einzigartiger Benutzername für den Benutzer.
E-Mail
Zeichenfolge
Eindeutige E-Mail-Adresse.
passwort_hash
Zeichenfolge
Gehashtes Passwort zur Authentifizierung.
erstellt_am
Datum
Zeitstempel, wann das Benutzerkonto erstellt wurde.
aktualisiert_am
Datum
Zeitstempel, wann das Benutzerkonto aktualisiert wurde.
Sie können diese Sammlungen manuell im Back4app-Dashboard einrichten, indem Sie eine neue Klasse für jede Sammlung erstellen und Spalten hinzufügen, um die Felder zu definieren.
Neue Klasse erstellen
﻿
Sie können ganz einfach Felder für Ihre Datenbank erstellen, indem Sie einen Datentyp auswählen, das Feld benennen, einen Standardwert festlegen und definieren, ob es erforderlich ist.
Spalte erstellen
﻿
﻿
Verwendung des Back4app AI-Agenten zur Schema-Generierung
Der Back4app AI-Agent ist ein leistungsstarkes Tool, das direkt von Ihrem Back4app-Dashboard aus verfügbar ist. 
Es ermöglicht Ihnen, Ihr Datenbankschema automatisch basierend auf einem Prompt zu generieren, der Ihre gewünschten Sammlungen und Felder beschreibt.
Diese Funktionalität spart erheblich Zeit im Projektmanagement und hilft sicherzustellen, dass Ihr Datenbankverwaltungssystem so eingerichtet ist, dass es die grundlegenden Operationen ausführen kann, die von Ihrer Webanwendung benötigt werden.
So verwenden Sie den KI-Agenten:
Öffnen Sie den KI-Agenten:
Melden Sie sich bei Ihrem Back4app-Dashboard an und suchen Sie den KI-Agenten im Menü oder in Ihren Projekteinstellungen.
Beschreiben Sie Ihr Datenmodell:
Fügen Sie in der Benutzeroberfläche des KI-Agenten einen detaillierten Prompt ein, der die Sammlungen und Felder beschreibt, die Sie benötigen.
Überprüfen und Anwenden:
Sobald Sie es eingereicht haben, wird der KI-Agent die Sammlungen und Felddefinitionen generieren. Überprüfen Sie diese Vorschläge und wenden Sie sie auf Ihr Projekt an.
Beispiel-Prompt
Text
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Die Verwendung des KI-Agenten auf diese Weise spart Zeit und stellt sicher, dass Ihr Schema konsistent und optimiert für die Bedürfnisse Ihrer Anwendung ist.
﻿
Schritt 3 – Aktivierung der Admin-App & CRUD-Operationen
Übersicht über die Admin-App
Die Back4app Admin-App ist eine leistungsstarke, codefreie Schnittstelle, die es Ihnen ermöglicht, Ihre Backend-Daten zu verwalten.
Dieses Verwaltungstool bietet eine Drag-and-Drop-Benutzeroberfläche, die es Benutzern ermöglicht, CRUD-Operationen wie Erstellen, Lesen, Aktualisieren und Löschen von Datensätzen einfach durchzuführen.
Aktivierung der Admin-App
Navigieren Sie zum Menü „Mehr“ in Ihrem Back4app-Dashboard.
Klicken Sie auf „Admin-App“ und dann auf „Admin-App aktivieren.“
Konfigurieren Sie Ihre Admin-Anmeldeinformationen indem Sie Ihren ersten Admin-Benutzer erstellen. Dieser Prozess richtet auch Rollen ein (z. B. B4aAdminUser) und Systemkollektionen.
Admin-App aktivieren
﻿
Nach der Aktivierung melden Sie sich bei der Admin-App an, um Ihre Daten zu verwalten.
Admin App Dashboard
﻿
Verwendung der Admin-App für CRUD-Operationen
Innerhalb der Admin-App können Sie:
Datensätze erstellen: Klicken Sie auf die Schaltfläche „Datensatz hinzufügen“ innerhalb einer Sammlung (z. B. Artikel), um neue Einträge zu erstellen.
Datensätze lesen/aktualisieren: Wählen Sie einen beliebigen Datensatz aus, um dessen Details anzuzeigen oder Felder zu bearbeiten, um eine reibungslose Datenaktualisierung zu gewährleisten.
Datensätze löschen: Verwenden Sie die Löschoption, um Datensätze zu entfernen, die nicht mehr benötigt werden.
Dieses benutzerfreundliche Verwaltungstool verbessert das Gesamterlebnis der Benutzer, indem es eine einfache Drag-and-Drop-Oberfläche für CRUD-Funktionen bietet.
﻿
Schritt 4 – Integration von ReactJS mit Back4app
Jetzt, da Ihr Backend eingerichtet und über die Admin-App verwaltet wird, ist es an der Zeit, Ihr ReactJS-Frontend mit Back4app zu verbinden.
Option A: Verwendung des Parse SDK
Installieren Sie das Parse SDK:
Bash
npm install parse
npm install parse
﻿
Initialisieren Sie Parse in Ihrer React-App:
Erstellen Sie eine Datei (z.B. src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Ersetzen Sie dies durch Ihre tatsächlichen Back4app-Anmeldeinformationen
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Ersetzen Sie dies durch Ihre tatsächlichen Back4app-Anmeldeinformationen
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Verwenden Sie Parse in einer React-Komponente:
Erstellen Sie beispielsweise eine Komponente, um Elemente abzurufen und anzuzeigen:
JS
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Fehler beim Abrufen der Elemente:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Elemente</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Fehler beim Abrufen der Elemente:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Elemente</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
Option B: Verwendung von REST oder GraphQL
Wenn Ihre Umgebung das Parse SDK nicht unterstützt, können Sie CRUD-Operationen mit REST oder GraphQL durchführen. Zum Beispiel, um Elemente mit REST abzurufen:
JS
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
Integrieren Sie diese API-Aufrufe nach Bedarf in Ihre React-Komponenten.
﻿
Schritt 5 – Sicherung Ihres Backends
Zugriffskontrolllisten (ACLs)
Sichern Sie Ihre Daten, indem Sie ACLs Objekten zuweisen. Zum Beispiel, um ein privates Element zu erstellen:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Klassenebene Berechtigungen (CLPs)
Konfigurieren Sie im Back4app-Dashboard CLPs für jede Sammlung, um Standardzugriffsregeln festzulegen. Dies stellt sicher, dass nur authentifizierte oder autorisierte Benutzer auf sensible Daten zugreifen können.
﻿
Schritt 6 – Benutzerauthentifizierung
Einrichten von Benutzerkonten
Back4app nutzt die Benutzerklasse von Parse für die Authentifizierung. In Ihrer React-App behandeln Sie die Benutzerregistrierung und den Login wie folgt:
JS
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
Ein ähnlicher Ansatz kann für den Login und das Sitzungsmanagement verwendet werden. Zusätzliche Funktionen wie soziale Logins, E-Mail-Verifizierung und Passwortzurücksetzungen können im Back4app-Dashboard konfiguriert werden.
﻿
Schritt 7 – Bereitstellung Ihres ReactJS-Frontends mit Web-Bereitstellung
Die Web-Bereitstellungsfunktion von Back4app ermöglicht es Ihnen, Ihr ReactJS-Frontend nahtlos zu hosten, indem Sie Ihren Code aus einem GitHub-Repository bereitstellen.
In diesem Abschnitt lernen Sie, wie Sie Ihren Produktionsbuild vorbereiten, Ihren Quellcode in GitHub einpflegen, Ihr Repository mit der Web-Bereitstellung integrieren und Ihre Website bereitstellen.
7.1 Bereiten Sie Ihren Produktionsbuild vor
Öffnen Sie Ihren Projektordner in einem Terminal.
Führen Sie den Build-Befehl aus:
Bash
npm run build
npm run build
﻿
Dieser Befehl erstellt einen build-Ordner, der alle optimierten statischen Dateien enthält (einschließlich index.html, JavaScript, CSS und Bilder).
Überprüfen Sie den Build:
Stellen Sie sicher, dass der build-Ordner eine index.html-Datei sowie die erforderlichen Asset-Unterverzeichnisse enthält.
﻿
7.2 Organisieren und Hochladen Ihres Quellcodes
Ihr Repository sollte den vollständigen Quellcode für Ihr ReactJS-Frontend enthalten. Eine typische Dateistruktur könnte so aussehen:
Text
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Beispiel-Quellcodedateien
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
﻿
Fügen Sie Ihre Quelldateien hinzu:
Bash
git add .
git add .
﻿
Übernehmen Sie Ihre Änderungen:
Bash
git commit -m "Erster Commit des ReactJS-Frontend-Quellcodes"
git commit -m "Erster Commit des ReactJS-Frontend-Quellcodes"
﻿
Erstellen Sie ein GitHub-Repository:
Zum Beispiel, erstellen Sie ein Repository mit dem Namen Basic-CRUD-App-ReactJS-Frontend auf GitHub.
Pushen Sie Ihren Code zu GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Integrieren Sie Ihr GitHub-Repository mit der Webbereitstellung
Zugriff auf die Webbereitstellung:
Melden Sie sich bei Ihrem Back4app-Dashboard an, navigieren Sie zu Ihrem Projekt (Basic-CRUD-App-ReactJS) und klicken Sie auf die Webbereitstellungs-Funktion.
Mit GitHub verbinden:
Wenn Sie dies noch nicht getan haben, integrieren Sie Ihr GitHub-Konto, indem Sie den Anweisungen auf dem Bildschirm folgen. Diese Verbindung ermöglicht es Back4app, auf Ihr Repository zuzugreifen.
Wählen Sie Ihr Repository und Branch aus:
Wählen Sie das Repository aus, das Sie erstellt haben (z. B. Basic-CRUD-App-ReactJS-Frontend) und wählen Sie den Branch (z. B. main) aus, der Ihren ReactJS-Code enthält.
﻿
7.4 Konfigurieren Sie Ihr Deployment
Geben Sie zusätzliche Konfigurationsdetails an:
Build-Befehl:
Wenn Ihr Repository keinen vorgefertigten build-Ordner enthält, geben Sie den Build-Befehl an (z. B. npm run build). Back4app wird diesen Befehl während des Deployments ausführen.
Ausgabeverzeichnis:
Setzen Sie das Ausgabeverzeichnis auf build damit Back4app weiß, welcher Ordner Ihre statischen Site-Dateien enthält.
Umgebungsvariablen:
Wenn Ihre Anwendung von Umgebungsvariablen abhängt (z. B. API-Schlüssel), fügen Sie diese in den Konfigurationseinstellungen hinzu.
﻿
7.5 Dockerisieren Sie Ihr ReactJS-Anwendungsprojekt
Wenn Sie Docker für das Deployment bevorzugen, können Sie Ihre ReactJS-Anwendung containerisieren. Fügen Sie eine Dockerfile in Ihr Repository mit Inhalten ähnlich den folgenden hinzu:
Dockerfile
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Fügen Sie dieses Dockerfile in Ihr Repository ein. Wählen Sie dann in Ihrer Webbereitstellungskonfiguration die Docker-Bereitstellungsoption aus, um Ihre containerisierte Anwendung zu erstellen und bereitzustellen.
﻿
7.6 Bereitstellung Ihrer Anwendung
Klicken Sie auf die Schaltfläche Bereitstellen:
Nachdem Sie die Bereitstellungseinstellungen konfiguriert haben, klicken Sie auf die Bereitstellen-Schaltfläche.
Überwachen Sie den Build-Prozess:
Back4app wird Ihren Code von GitHub abrufen, den Build-Befehl ausführen (falls konfiguriert) und Ihre App in einem Container bereitstellen.
Erhalten Sie Ihre URL:
Nachdem die Bereitstellung abgeschlossen ist, stellt Back4app eine URL zur Verfügung, unter der Ihre ReactJS-Anwendung gehostet wird.
﻿
7.7 Überprüfen Sie Ihre Bereitstellung
Besuchen Sie die bereitgestellte URL:
Öffnen Sie die URL in Ihrem Webbrowser, um Ihre bereitgestellte Seite anzuzeigen.
Testen Sie die Anwendung:
Überprüfen Sie, ob Ihre Anwendung korrekt geladen wird, alle Routen wie erwartet funktionieren und alle Assets (CSS, JavaScript, Bilder) ordnungsgemäß bereitgestellt werden.
Fehlerbehebung bei Bedarf:
Verwenden Sie die Entwicklertools Ihres Browsers, um nach Fehlern zu suchen. Wenn Probleme auftreten, überprüfen Sie die Bereitstellungsprotokolle in Back4app und verifizieren Sie Ihre GitHub-Integration und die Build-Einstellungen.
﻿
Schritt 8 – Fazit und nächste Schritte
Herzlichen Glückwunsch! Sie haben eine vollständige grundlegende CRUD-App mit ReactJS und Back4app erstellt. 
Sie haben ein Projekt mit dem Namen Basic-CRUD-App-ReactJS, detaillierte Datenbankkollektionen für Artikel und Benutzer entworfen und Ihre Daten über die leistungsstarke Admin-App verwaltet. 
Sie haben auch Ihr ReactJS-Frontend mit Ihrem Backend integriert und Ihre Daten mit robusten Zugriffskontrollen gesichert.
Nächste Schritte:
Verbessern Sie Ihr Frontend:
Erweitern Sie Ihre ReactJS-App um Funktionen wie detaillierte Artikelansichten, Suchfunktionen und Echtzeitbenachrichtigungen.
Integrieren Sie zusätzliche Funktionen:
Erwägen Sie, fortgeschrittenere Backend-Logik (z. B. Cloud-Funktionen), Integrationen von Drittanbieter-APIs oder rollenbasierte Zugriffskontrollen hinzuzufügen.
Weitere Ressourcen erkunden:
Überprüfen Sie die Back4app-Dokumentation und zusätzliche Tutorials für tiefere Einblicke in die Leistungsoptimierung und benutzerdefinierte Integrationen.
Indem Sie dieses Tutorial befolgt haben, verfügen Sie nun über die Fähigkeiten, um ein robustes, skalierbares CRUD-Backend für Ihre ReactJS-Anwendung mit Back4app zu erstellen. Viel Spaß beim Programmieren!
Feld	Datentyp	Beschreibung
_id	Objekt-ID	Automatisch generierter Primärschlüssel.
Titel	Zeichenfolge	Der Titel des Elements.
Beschreibung	Zeichenfolge	Eine kurze Beschreibung des Artikels.
erstellt_am	Datum	Zeitstempel, wann der Artikel erstellt wurde.
aktualisiert_am	Datum	Zeitstempel, wann der Artikel zuletzt aktualisiert wurde.
Feld	Datentyp	Beschreibung
_id	Objekt-ID	Automatisch generierter Primärschlüssel.
Benutzername	Zeichenfolge	Einzigartiger Benutzername für den Benutzer.
E-Mail	Zeichenfolge	Eindeutige E-Mail-Adresse.
passwort_hash	Zeichenfolge	Gehashtes Passwort zur Authentifizierung.
erstellt_am	Datum	Zeitstempel, wann das Benutzerkonto erstellt wurde.
aktualisiert_am	Datum	Zeitstempel, wann das Benutzerkonto aktualisiert wurde.
Aktualisiert 12 Feb 2025
Hat Ihnen diese Seite geholfen?
Back4app Tutorials
ALS NÄCHSTES
Wie man ein Backend für Blazor erstellt?