So erstellen Sie eine E -Commerce -Site mit React

Dieses Tutorial führt Sie durch den Bau einer einfachen E-Commerce-Webanwendung mit React. Obwohl es kein vollwertiger Shopify-Konkurrent ist, zeigt es die Funktionen von React zum Erstellen dynamischer Benutzeroberflächen effektiv.

Die Anwendung verfügt über eine einfache CART -System- und Benutzerauthentifizierung. Anstelle komplexer staatlicher Verwaltungsbibliotheken wie Redux oder MOBX nutzt es den Reaktionskontext. Ein Mock -Backend wird mit json-server und json-server-auth erstellt. Der vollständige Code ist auf Github verfügbar.

Schlüsselfunktionen und -technologien:

• reagieren Kontext: vereinfachtes Zustandsmanagement, vermeiden Sie den Overhead von Redux oder MOBX.
• Benutzerauthentifizierung: simuliert mit json-server-auth und jwts für einen realistischen Authentifizierungsfluss.
• reagieren Sie Router: Bearbeitet die Anwendungsnavigation.
• axios: verwaltet AJAX -Anforderungen für das effiziente Datenabruf.
• Bulma CSS: bietet eine reaktionsschnelle und visuell ansprechende UI.
• JWT-Dekode: Parses JWTS für eine sichere Authentifizierung.
• Lokaler Speicher: behält Benutzerdaten- und Karren -Inhalt über Sitzungen hinweg fort.

Voraussetzungen:

Dieses Tutorial setzt grundlegende JavaScript- und Reaktionskenntnisse an. Wenn Sie neu reagieren, sollten Sie einen Anfängerleitfaden überprüfen.

Sie benötigen node.js und npm (Knotenpaketmanager) installiert. Überprüfen Sie die Installation mit:

<code class="language-bash">node -v
npm -v</code>

Projekt -Setup:

1. Erstellen eines neuen React -Projekts mit React App Create React App:

   <code class="language-bash">npx create-react-app e-commerce
   cd e-commerce</code>

2. Installieren Sie die erforderlichen Pakete:

   <code class="language-bash">npm install react-router-dom axios json-server json-server-auth jwt-decode bulma</code>

3. Bulma Stylesheet zu src/index.js:

   hinzufügen

   <code class="language-javascript">import "bulma/css/bulma.css";</code>

Kontext und Komponentenstruktur:

Das Tutorial verwendet den React -Kontext für das Staatsmanagement. Eine Context.js -Datei erstellt den Kontext und withContext.js bietet eine Komponente höherer Ordnung, um Komponenten problemlos Kontext zu injizieren. Grundkomponenten (AddProduct, Cart, Login, ProductList) werden erstellt, um die Anwendung zu strukturieren.

gefälschtes Backend -Setup:

a db.json Datei (in einem backend -Verzeichnungsverzeichnis) definiert die Mock -Datenbank für Benutzer und Produkte. Starten Sie die json-server mit Authentifizierung:

<code class="language-bash">./node_modules/.bin/json-server-auth ./backend/db.json --port 3001</code>

Dies richtet eine REST -API bei http://localhost:3001.

Authentifizierungsinimpublik:

Die App.js -Komponenten behandelt die Benutzerauthentifizierung mit axios und jwt-decode. Die login -Methode stellt eine Postanforderung an /login ab, entschlüsselt die JWT und speichert Benutzerinformationen im Zustand und im lokalen Speicher. Die logout -Methode löscht diese Daten. Die Login -Komponente bietet die Benutzeroberfläche für die Anmeldung.

Produktansichten und Karren Management:

Die ProductList -Komponente holt und zeigt Produkte an. ProductItem rendert einzelne Produktkarten. Die Methoden addToCart, removeFromCart und clearCart verwalten den Einkaufswagen und behalten Daten im lokalen Speicher an. Die Cart -Komponente zeigt den CART -Inhalt mit CartItem für einzelne Elemente an. Die checkout -Methode simuliert die Kasse durch Aktualisierung von Produktaktien im Mock -Backend. Mit der AddProduct -Komponente können Admin -Benutzer neue Produkte hinzufügen.

Schlussfolgerung:

Dieses Tutorial bietet eine grundlegende E-Commerce-Anwendung, die mit React erstellt wurde. Weitere Verbesserungen könnten eine robuste Backend, eine serverseitige Authentifizierung und ausgefeiltere Funktionen umfassen. Denken Sie daran, der komplette Code ist auf GitHub verfügbar. Für fortgeschrittene React -Entwicklung werden React -Designmuster und Best Practices auf SitePoint Premium erforschen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine E -Commerce -Site mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!