Fermer

juin 11, 2020

Comment créer un site de commerce électronique avec React –


Étant donné que la plupart des optimisations de performances pour les applications Web de commerce électronique sont liées au front-end, le cadre proactif centré sur le front-end React – souvent préféré pour sa simplicité et son élégance – sera utilisé dans ce didacticiel.

Pour créer un site de commerce électronique de base, nous utiliserons également React Context comme alternative aux cadres de gestion d'état tels que Redux et MobX.

De plus, une méthode de base pour gérer l'authentification et la gestion des paniers sera présentée dans cette application. Voici une capture d'écran de ce que nous allons construire:

L'application terminée

Ce tutoriel suppose que vous avez une connaissance de base de JavaScript et JSX.

Prérequis

Dans le cours de la création de cette application, nous utiliserons React Context pour gérer les données de notre application, car il "fournit un moyen de transmettre les données à travers l'arborescence des composants sans avoir à transmettre manuellement les accessoires à tous les niveaux", comme le souligne le docs .

Pour créer l'application, vous aurez également besoin d'un ordinateur avec les applications requises pour démarrer et exécuter une application React – Node> = 8.10 et npm> = 5.6 sur votre machine .

Créez un projet React comme ceci:

 npx create-react-app e-commerce

Dans cette application, nous utilisons également React Router pour gérer le routage. Pour installer ce module, exécutez ceci:

 npm install react-router-dom

Enfin, nous utiliserons le framework CSS open-source Bulma pour styliser cette application. Pour l'installer, exécutez la commande suivante:

 npm install bulma

Mise en route

Tout d'abord, nous devons ajouter la feuille de style à notre application. Pour ce faire, nous allons ajouter une instruction d'importation pour inclure ce fichier dans le fichier index.js dans le dossier src de l'application. Cela appliquera la feuille de style à tous les composants de l'application. Ci-dessous un extrait de la déclaration d'importation:

 // ./index.js
...
importer "bulma / css / bulma.css";
...

Dans cette application, nous définissons un ensemble de données pour l'application, car nous ne travaillons pas avec une API principale. Le jeu de données contient les utilisateurs de l'application et la liste de produits initiale:

 // ./Data.js
exporter par défaut {
  utilisateurs: [
    { username: "regular", accessLevel: 1, password: "password" },
    { username: "admin", accessLevel: 0, password: "password" }
  ],
  initProducts: [
    {
      name: "shoes",
      stock: 10,
      price: 399.99,
      shortDesc: "Nulla facilisi. Curabitur at lacus ac velit ornare lobortis.",
      description:
        "Cras sagittis. Praesent nec nisl a purus blandit viverra. Ut leo. Donec quam          elis, ultricies nec, pellentesque eu, pretium quis, sem. Fusce a quam."
    },
    ...moreProducts
  ]
};

Configuration du contexte

Dans les applications complexes où le besoin de contexte est généralement nécessaire, il peut y avoir plusieurs contextes, chacun ayant ses données et méthodes relatives à l'ensemble des composants qui nécessitent les données et méthodes. Par exemple, il peut y avoir un ProductContext pour gérer les composants qui utilisent des données relatives aux produits, et un autre ProfileContext pour gérer les données relatives à l'authentification et aux données utilisateur. Cependant, pour garder les choses aussi simples que possible, nous utiliserons une seule instance de contexte.

Afin de créer le contexte, nous créons un fichier Context.js à la racine de notre application:

 // ./Context.js

importer React à partir de "react";
const Context = React.createContext ({});
exporter le contexte par défaut;

Cela crée le contexte et initialise les données de contexte à un objet vide. Ensuite, nous devons créer un wrapper de composant, que nous utiliserons pour envelopper les composants qui utilisent les données et les méthodes de contexte:

 // ./withContext.js

importer React à partir de "react";
import Context de "./Context";
const withContext = WrappedComponent => {
  const WithHOC = props => {
    revenir (
      
        {context => }
      
    );
  };
  WithHOC.WrappedComponent = WrappedComponent;
  return WithHOC;
};
exporter par défaut avecContext;

Le code ci-dessus exporte une fonction avecContext qui utilise la propriété Consumer Component du Context créé précédemment. Le composant Consumer transmet les données associées au contexte à son composant enfant.

Développement d'applications

Ensuite, nous devons configurer le fichier App.js . Ici, nous allons gérer la navigation de l'application ainsi que définir ses données et les méthodes pour les gérer.

Commençons par configurer la navigation de l'application:

 //./ src / App.js

importer React, {Component} de "react";
import {Switch, Route, Link, BrowserRouter as Router} depuis "react-router-dom";
importer des données depuis "./Data";
import Context de "./Context";
exporter la classe par défaut App étend le composant {
  constructeur (accessoires) {
    super (accessoires);
    this.state = {};
    this.routerRef = React.createRef ();
  }
  ...
  ...
  ...

  render () {
    revenir (
      
        
          

            
            
              
              
              
              
              
            
          

        
      
    );
  }
}

Notre composant App sera chargé d'initialiser les données de l'application et définira également les méthodes de manipulation de ces données. Ici, nous définissons les données et les méthodes de contexte à l'aide du composant Fournisseur de contexte. Les données et les méthodes sont passées en tant que propriété, valeur sur le composant Provider pour remplacer l'objet donné lors de la création du contexte. (Notez que la valeur peut être de n'importe quel type de données.) Nous transmettons la valeur d'état et certaines méthodes, que nous définirons bientôt.

Ensuite, nous construisons notre navigation d'application. Pour ce faire, nous devons encapsuler notre application avec un composant Router, qui peut être BrowserRouter (comme dans notre cas) ou HashRouter . Ensuite, nous définissons les itinéraires de notre application à l'aide du composant Switch and Route. Nous créons également le menu de navigation de l'application, chaque lien utilisant le composant Lien fourni dans le module React Router. Nous ajoutons également une référence, routerRef au composant Router pour nous permettre d'accéder au routeur à partir du composant App .

Composant App

Authentification de l'utilisateur [19659007] Dans l'étape suivante, nous allons gérer l'authentification des utilisateurs. Nous devons d'abord initialiser l'utilisateur dans le constructeur de composants App . Ceci est illustré ci-dessous:

 //./ src / App.js
...
  constructeur (accessoires) {
    super (accessoires);
    this.state = {
      utilisateur: null
    };
  }
...

Ensuite, nous nous assurons que l'utilisateur est chargé au démarrage de l'application en définissant l'utilisateur sur le montage des composants, comme indiqué ci-dessous:

 //. Src / App / .js
...
componentDidMount () {
    let user = localStorage.getItem ("user");
    utilisateur = utilisateur? JSON.parse (utilisateur): null;
    this.setState ({user});
  }
...

Ici, nous chargeons la dernière session utilisateur du stockage local à l'état s'il existe. Ensuite, nous définissons les méthodes de connexion et de déconnexion attachées au contexte:

 //./ src / App.js
...
  login = (usn, pwd) => {
    laissez user = data.users.find (u => u.username === usn && u.password === pwd);
    if (utilisateur) {
      this.setState ({user});
      localStorage.setItem ("utilisateur", JSON.stringify (utilisateur));
      return true;
    }
    retour faux;
  };
  déconnexion = e => {
    e.preventDefault ();
    this.setState ({user: null});
    localStorage.removeItem ("utilisateur");
  };
...

La méthode de connexion vérifie si la combinaison utilisateur / mot de passe correspond à n'importe quel utilisateur de la baie et définit l'utilisateur d'état s'il est trouvé. Il ajoute également l'utilisateur au stockage local pour la persistance. La déconnexion efface l'utilisateur de l'état et du stockage local.

Ensuite, nous créons le composant de connexion. Tout d'abord, nous créons un dossier composants dans lequel nous allons placer tous nos composants, puis créons un fichier Login.js . Ce composant utilise les données de contexte. Pour qu'il ait accès à ces données et méthodes, il doit être encapsulé à l'aide de la méthode withContext que nous avons créée précédemment.

 // ./src/components/Login.js

importer React, {Component, Fragment} à partir de "react";
importer withContext depuis "../withContext";
importer {Redirect} depuis "react-router-dom";
La connexion de classe étend le composant {
  constructeur (accessoires) {
    super (accessoires);
    this.state = {
      Nom d'utilisateur: "",
      mot de passe: ""
    };
  }
  handleChange = e =>
    this.setState ({[e.target.name]: e.target.value, erreur: ""});

  login = () => {
    const {nom d'utilisateur, mot de passe} = this.state;
    if (! nom d'utilisateur ||! mot de passe) {
      renvoie this.setState ({erreur: "Remplissez tous les champs!"});
    }
    let logsIn = this.props.context.login (nom d'utilisateur, mot de passe);
    si (! connecté) {
      this.setState ({erreur: "Credentails non valides"});
    }
  };
  render () {
    retourner! this.props.context.user? (
      
        

          

            
 Connexion 

          

        

        

        

        

          

            

              
              
            

            

              
              
            

             {this.state.error && (
              
 {this.state.error} 

            )}
            

              
            

          

        

      
    ): (
      
    );
  }
}
exporter par défaut avecContext (Login);

Ce composant affiche un formulaire avec deux entrées pour collecter les informations d'identification de connexion de l'utilisateur. Lors de la soumission de l'entrée, le composant appelle la méthode de connexion, qui est passée dans le contexte. Ce module s'assure également de rediriger vers la page des produits si l'utilisateur est déjà connecté. Nous devons mettre à jour le composant App.js pour utiliser le composant Login:

 // ./src/App .js
...
import Login depuis "./components/Login";
...
...
    
...

Connexion

Produits et panier

Ensuite, nous créons la page des produits, qui servira également de page de destination de l'application. Cette page utilisera deux nouveaux composants. Le premier est ProductList.js qui affichera le corps de la page, et l'autre est le composant ProductItem.js pour chaque produit de la liste. Avant de procéder à la construction de ces composants, nous devons charger les produits dans le composant App . Tout d'abord, nous définissons une valeur par défaut pour les produits dans le constructeur un tableau vide:

 //./ src / App.js
...
  constructeur (accessoires) {
    super (accessoires);
    this.state = {
      utilisateur: null,
      produits: []
    };
  }
...

Nous devons ensuite charger les produits sur le support de composant, comme nous l'avons fait pour l'utilisateur connecté:

 //. Src / App / .js
...
  componentDidMount () {
    let user = localStorage.getItem ("user");
    let products = localStorage.getItem ("produits");

    utilisateur = utilisateur? JSON.parse (utilisateur): null;
    produits = produits? JSON.parse (produits): data.initProducts;

    this.setState ({utilisateur, produits});
  }
...

Dans l'extrait de code ci-dessus, nous avons tenté de charger des produits à partir du stockage local au cas où des modifications auraient été apportées à la liste de produits initiale. S'il n'existe pas, nous chargeons la liste de produits par défaut à partir des exemples de données d'application.

Avant de créer les composants de la liste de produits, créons une interface pour créer un produit pour les utilisateurs disposant des privilèges appropriés. Tout d'abord, définissons la méthode pour ajouter le produit. Nous le ferons dans le composant App comme indiqué ci-dessous:

 //. Src / App / .js
...
  addProduct = (produit, rappel) => {
    laissez produits = this.state.products.slice ();
    products.push (produit);
    localStorage.setItem ("produits", JSON.stringify (produits));
    this.setState ({products}, () => callback && callback ());
  };
...

Cette méthode reçoit l'objet produit et l'ajoute à la gamme de produits, puis l'enregistre dans l'état de l'application et le stockage local. Il reçoit également une fonction de rappel à exécuter lors de l'ajout réussi du produit.

Maintenant, nous pouvons procéder à l'ajout du composant produit:

 //. Src / components / AddProduct.js

importer React, {Component, Fragment} à partir de "react";
importer withContext depuis "../withContext";
importer {Redirect} depuis "react-router-dom";
const initState = {
  Nom: "",
  prix: "",
  Stock: "",
  shortDesc: "",
  la description: ""
};
La classe AddProduct étend le composant {
  constructeur (accessoires) {
    super (accessoires);
    this.state = initState;
  }
  enregistrer = e => {
    e.preventDefault ();
    const {nom, prix, stock, shortDesc, description} = this.state;
    si (nom et prix) {
      this.props.context.addProduct (
        {
          Nom,
          prix,
          shortDesc,
          la description,
          stock: stock || 0
        },
        () => this.setState (initState)
      );
    } autre {
      this.setState ({erreur: "Veuillez entrer le nom et le prix"});
    }
  };
  handleChange = e =>
    this.setState ({[e.target.name]: e.target.value, erreur: ""});
  render () {
    const {nom, prix, stock, shortDesc, description} = this.state;
    const {user} = this.props.context;
    return! (user && user.accessLevel <1)? (
      
    ): (
      
        

          

            
 Connexion