Aufbau eines Gewohnheitsverfolgers mit Prisma 2, Chakra UI und React

Prisma 2: Staffeln von Datenbankinteraktionen in Ihrer React -App

Prisma 2 (ehemals Prisma 2 -Varvovative) revolutioniert das Datenbankmanagement und bietet ein erhebliches Upgrade seines Vorgängers. Im Gegensatz zu Prisma 1, das einen separaten Prisma -Server erforderte, integriert sich Prisma 2 direkt in Ihr Backend und fungiert als Bibliothek. Diese optimierte Architektur, die mit Rost für verbesserte Speichereffizienz erstellt wurde, vereinfacht die Datenbankinteraktionen erheblich.

Das Prisma -Framework umfasst drei Schlüsselwerkzeuge:

1. Photon: Ein automatisch erzeugter Datenbank-Client, der herkömmliche Ormen effektiv ersetzt.
.
2. heben: Ein deklaratives Migrationssystem, das reibungslose Datenbankschema -Updates ermöglicht.
3. Prisma Studio: Eine benutzerfreundliche Datenbank IDE, die eine visuelle Schnittstelle für die Datenbankverwaltung anbietet.

Dieses Tutorial zeigt, dass der Aufbau einer Gewohnheits -Tracker -App ("Streifen") unter Verwendung von Prisma 2, Chakra UI (für schnelle UI -Entwicklung) und React -Hooks für das staatliche Management. Der Frontend verwendet URQL für GraphQL -Interaktionen.

wichtige Vorteile von Prisma:

• vereinfachte Datenbankzugriff: eliminiert komplexe SQL -Abfragen und vereinfachte Datenbankinteraktionen in Ihrer Anwendung.
• Datenbank Agnostizismus: erleichtert die Schaltdatenbanksysteme ohne umfangreiche Codeänderung. Unterstützt derzeit MySQL, SQLite und Postgresql.
• Type Sicherheit: bietet automatisch generierten Prisma-Client für den Zugriff auf den Typ-Safe-Datenbank, die Verbesserung der Codezuverlässigkeit und die Entwicklererfahrung.
• Visuelle Datenverwaltung: Prisma Studio bietet eine leistungsstarke visuelle Schnittstelle für die Verwaltung Ihrer Datenbank.
• Automatische Migrationen (optional): Lift vereinfacht das Datenbankschema -Migrationen mit einem deklarativen Datenmodell.

Erste Schritte:

Dieses Tutorial setzt eine grundlegende Vertrautheit mit React- und React -Hooks voraus. Garn wird für das Paketmanagement verwendet. Die folgenden Versionen wurden verwendet:

• Knoten v12.11.1
• npm v6.11.3
• npx v6.11.3
• Garn v1.19.1
• prisma2 v2.0.0-preview016.2
• reagieren v16.11.0

Projekt -Setup:

1. ein streaks-app Verzeichnis erstellen.
2. Initialisieren Sie das Prisma 2 -Projekt: npx prisma2 init server (oder verwenden Sie das globale prisma2 cli). Wählen Sie JavaScript, GraphQL API und SQLite.
3. Erstellen Sie ein React -Projekt innerhalb von streaks-app: npx create-react-app client (oder verwenden Sie das globale create-react-app cli).

Die Projektstruktur ist: streaks-app/client/ und streaks-app/server/.

Backend -Entwicklung:

Das Backend verwendet GraphQL und Prisma 2. Die schema.prisma -Datei definiert das Datenmodell (z. B. Habit mit id, name und streak Feldern). Die Datei seed.js füllt die Datenbank mit Anfangsdaten. Ein GraphQL -Server wird mit graphql-yoga und nexus.

eingerichtet

Frontend -Entwicklung:

Die Frontend verwendet die Chakra -UI für Styling und Urql für GraphQL -Abfragen. Komponenten werden zum Anzeigen von Gewohnheiten, zum Erstellen neuer Gewohnheiten, zum Löschen von Gewohnheiten und zum Inkrementierungsstreifen erstellt. Fehlerbehandlungs- und Ladeindikatoren werden unter Verwendung von Chakra -UI -Komponenten implementiert.

(detaillierte Codebeispiele für Backend- und Frontend -Setup, Abfragen und Mutationen werden für die Kürze weggelassen, wurden jedoch im ursprünglichen Eingang vorhanden.)

Schlussfolgerung:

Dieses Tutorial zeigt, dass der Aufbau einer robusten Gewohnheits -Tracker -Anwendung mithilfe von Prisma 2's effizientem Datenbankmanagement, der optimierten UI -Entwicklung von Chakra UI und den leistungsstarken Merkmalen von React die leistungsstarken Funktionen von React erstellt. Die resultierende Anwendung ist Typ-sicher, wartbar und visuell ansprechend.

(Der FAQS -Abschnitt aus der ursprünglichen Eingabe wird auch für die Kürze weggelassen, da es sich um eine Wiederholung der bereits abgedeckten gemeinsamen Praktiken und Konzepte handelt.)

Das obige ist der detaillierte Inhalt vonAufbau eines Gewohnheitsverfolgers mit Prisma 2, Chakra UI und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!