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:
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:
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 .
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:
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:
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:
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:
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:
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:
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
);
}
}
exporter par défaut avecContext (AddProduct);
Ce composant affiche un formulaire pour collecter les informations nécessaires et également pour s'assurer que l'utilisateur est connecté et dispose du niveau d'accès requis pour créer un produit. Il a une méthode save qui utilise l'entrée de l'utilisateur pour créer un objet produit et appelle la méthode addProduct à partir du contexte et transmet le produit et une méthode de rappel pour réinitialiser les champs de saisie. [19659003]
Nous pouvons maintenant ajouter ce composant au composant App pour son routage:
// ./src/App.js
...
importer la connexion depuis "./components/AddProduct";
...
...
...
Ensuite, nous procédons à la création du composant Productlist comme illustré ci-dessous:
// ./src/components/ProductList
importer React, {Component, Fragment} à partir de "react";
importer ProductItem depuis "./ProductItem";
importer withContext depuis "../withContext";
const ProductList = props => {
const {products} = props.context;
revenir (
);
};
exporter par défaut avecContext (ProductList);
Puisque la liste dépend du contexte des données, nous l'enveloppons également avec la fonction withContext . Ce composant rend les produits à l'aide du composant ProductItem que nous devons encore créer. Il transmet également une méthode addToCart du contexte (que nous devons également définir) au ProductItem . Cela élimine le besoin de travailler directement avec le contexte dans le composant ProductItem . Ensuite, nous créons le composant ProductItem :
Cet élément affiche le produit sur une boîte et fournit également un bouton d'action pour ajouter le produit au panier de l'utilisateur.
Ensuite, nous créons l'objet panier et la page panier . Tout d'abord, créons le chariot dans le composant App et vérifions également que nous chargeons le chariot existant à partir du stockage local sur la charge du composant App :
Cette méthode ajoute l'article en utilisant l'ID d'article comme clé pour l'objet chariot. Nous utilisons un objet plutôt qu'un tableau pour le panier pour permettre une récupération facile des données. Cette méthode vérifie l'objet panier s'il existe un article avec cette clé. Si c'est le cas, augmentez le montant; sinon, il crée une nouvelle entrée. La deuxième instruction if garantit que l'utilisateur ne peut pas ajouter plus d'éléments que les éléments disponibles. La méthode enregistre ensuite le panier à l'état, qui est transmis à d'autres parties de l'application via le contexte. Enfin, la méthode enregistre le panier mis à jour dans le stockage local pour la persistance.
Ensuite, nous définissons la méthode removeFromCart pour supprimer un produit spécifique du panier utilisateur et clearCart pour supprimer. tous les produits du panier de l'utilisateur:
La méthode removeCart supprime un produit à l'aide de la clé de produit fournie. Il met ensuite à jour l'état de l'application et le stockage local en conséquence. La méthode clearCart réinitialise le chariot à un objet vide sur l'état et supprime l'entrée du chariot sur le stockage local.
Maintenant, nous procédons à la fabrication du chariot interface utilisateur. Semblable à la liste des produits, nous y parvenons en utilisant deux éléments: le premier, Cart.js qui rend la mise en page, et une liste des éléments du panier en utilisant le deuxième composant, CartItem.js :
Le composant Cart transmet également une méthode du contexte au CartItem . Le composant Cart fait une boucle à travers un tableau des valeurs d'objet de panier de contexte et renvoie un CartItem pour chacun. Il fournit également un bouton pour effacer le panier de l'utilisateur. Vient ensuite le composant CartItem qui ressemble beaucoup au composant ProductItem mais pour quelques modifications subtiles:
Ce composant affiche les informations sur le produit et le nombre d'articles sélectionnés. Il fournit également un bouton pour retirer le produit du panier. Nous devons maintenant importer le composant Cart dans le composant App et le router comme indiqué ci-dessous:
// ./src/App.js
...
import Login depuis "./components/Cart";
...
...
...
Enfin, nous devons ajouter la méthode de paiement dans le composant App :
Cette méthode vérifie qu'un utilisateur est connecté avant de continuer. Si l'utilisateur n'est pas connecté, il le redirige en utilisant la référence de routeur que nous avons attachée au composant Router .
Généralement, dans un site de commerce électronique classique, c'est là que le processus de facturation a lieu, mais pour notre application, nous supposerons simplement que l'utilisateur a payé et donc supprimer ses articles achetés de la liste des articles disponibles.
Avec cela, nous avons réussi à compléter notre panier de base.
Conclusion
Au cours de cet article, nous avons utilisé React Context pour déplacer des données et des méthodes sur plusieurs composants. Bien que nous aurions pu obtenir le même résultat en transmettant ces données comme accessoires, il peut devenir fastidieux de déplacer des données sur plusieurs éléments imbriqués. Cette application n'est en aucun cas un produit fini et pourrait être améliorée. Par exemple, davantage d'efforts pourraient être déployés pour alerter un utilisateur lorsqu'une opération est terminée ou en cours. L'application ne fait que montrer à quel point il est facile de créer une application de commerce électronique à l'aide de React.
Le code de cette application est disponible sur GitHub .
