Comment créer un site de commerce électronique avec réact

Ce tutoriel vous guide dans la création d'une application Web simple de commerce électronique à l'aide de React. Bien qu'il ne s'agisse pas d'un concurrent Shopify à part entière, il démontre efficacement les capacités de React pour créer des interfaces utilisateur dynamiques.

L'application dispose d'un système de base de panier et d'authentification des utilisateurs. Au lieu de bibliothèques de gestion d'État complexes comme Redux ou MOBX, il tire parti du contexte React. Un backend simulé est créé à l'aide de json-server et json-server-auth. Le code complet est disponible sur github.

Caractéristiques et technologies clés:

• React Context: Simplified State Management, évitant les frais généraux de Redux ou Mobx.
• Authentification de l'utilisateur: simulé à l'aide de json-server-auth et JWTS pour un flux d'authentification réaliste.
• REACT ROUTER: gère la navigation d'application.
• axios: gère les demandes AJAX pour une récupération efficace de données.
• Bulma CSS: fournit une interface utilisateur réactive et visuellement attrayante.
• jwt-décode: parses jwts pour l'authentification sécurisée.
• Stockage local: persiste les données des utilisateurs et le contenu du panier à travers les sessions.

Prérequis:

Ce tutoriel suppose les connaissances de base JavaScript et réagir. Si vous êtes nouveau à réagir, envisagez de revoir un guide pour débutant.

Vous aurez besoin de Node.js et NPM (Node Package Manager) installé. Vérifiez l'installation en utilisant:

node -v
npm -v

Configuration du projet:

1. Créer un nouveau projet React à l'aide de Create React App:

   npx create-react-app e-commerce
   cd e-commerce

2. Installez les packages nécessaires:

   npm install react-router-dom axios json-server json-server-auth jwt-decode bulma

3. Ajouter Bulma Stylesheet à src/index.js:

   import "bulma/css/bulma.css";

Structure du contexte et des composants:

Le tutoriel utilise le contexte React pour la gestion de l'État. Un fichier Context.js crée le contexte, et withContext.js fournit un composant d'ordre supérieur pour injecter facilement le contexte en composants. Les composants de base (AddProduct, Cart, Login, ProductList) sont créés pour structurer l'application.

Fausse configuration du backend:

A db.json Le fichier (situé dans un répertoire backend) définit la base de données simulée pour les utilisateurs et les produits. Démarrez le json-server avec l'authentification:

./node_modules/.bin/json-server-auth ./backend/db.json --port 3001

Cela met en place une API REST à http://localhost:3001.

Implémentation d'authentification:

Le composant App.js gère l'authentification de l'utilisateur à l'aide de axios et jwt-decode. La méthode login fait une demande post-demande à /login, décode le JWT et stocke les informations utilisateur dans le stockage d'état et local. La méthode logout efface ces données. The Login component provides the user interface for login.

Product Views and Cart Management:

The ProductList component fetches and displays products. ProductItem renders individual product cards. Les méthodes addToCart, removeFromCart et clearCart gèrent le panier, persistant les données dans le stockage local. Le composant Cart affiche le contenu du panier, en utilisant CartItem pour les éléments individuels. La méthode checkout simule la caisse en mettant à jour le stock de produits dans le backend simulé. Le composant AddProduct permet aux utilisateurs de l'administrateur d'ajouter de nouveaux produits.

Conclusion:

Ce tutoriel fournit une application de commerce électronique fondamentale construite avec React. D'autres améliorations pourraient inclure un backend robuste, une authentification côté serveur et des fonctionnalités plus sophistiquées. N'oubliez pas que le code complet est disponible sur GitHub. Pour un développement de réact plus avancé, explorez les modèles de conception React et les meilleures pratiques sur SitePoint Premium.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!