Comment développer un site Web d'achat en ligne simple et facile à utiliser avec React
Présentation :
React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur, qui peuvent nous aider à développer des applications Web complexes de manière composable. Dans cet article, nous apprendrons comment développer un site Web d'achat en ligne simple et facile à utiliser à l'aide de React. Nous utiliserons des concepts de base tels que les composants React et la gestion des états pour mettre en œuvre ce site Web.
Préparation de l'environnement :
Tout d'abord, assurez-vous que Node.js et le gestionnaire de packages NPM sont installés sur votre ordinateur. Ensuite, installez le create-react-app nécessaire pour créer une application React avec la commande suivante :
npx create-react-app shopping-site
Créez le composant React :
Créez un nouveau composant appelé Product
qui représentera les produits sur notre site web. . Créez un nouveau fichier Product.js dans le répertoire src et ajoutez le code suivant : Product
的新组件,它将表示我们网站上的商品。在src目录下创建一个新文件Product.js,并添加以下代码:
import React from 'react'; class Product extends React.Component { render() { return ( <div> <h2>{this.props.name}</h2> <p>{this.props.description}</p> <p>${this.props.price}</p> <button>Add to Cart</button> </div> ); } } export default Product;
这个组件将接受name
,description
和price
作为属性,并将它们显示在页面上。同时还有一个"Add to Cart"按钮。
创建商品数据:
在src目录下创建一个名为products.js
的文件,并添加以下代码:
const products = [ { id: 1, name: 'Product 1', description: 'This is product 1', price: 10 }, { id: 2, name: 'Product 2', description: 'This is product 2', price: 20 }, { id: 3, name: 'Product 3', description: 'This is product 3', price: 30 } ]; export default products;
创建购物车组件:
创建一个名为Cart
的新组件,它将表示用户的购物车。在src目录下创建一个新文件Cart.js,并添加以下代码:
import React from 'react'; import Product from './Product'; import products from './products'; class Cart extends React.Component { constructor(props) { super(props); this.state = { cartItems: [] }; } addToCart(product) { this.setState(prevState => ({ cartItems: [...prevState.cartItems, product] })); } render() { return ( <div> <h1>Shopping Cart</h1> {products.map(product => ( <Product key={product.id} name={product.name} description={product.description} price={product.price} addToCart={() => this.addToCart(product)} /> ))} <h2>Cart Items</h2> {this.state.cartItems.map(item => ( <div key={item.id}> <p>{item.name}</p> <p>${item.price}</p> </div> ))} </div> ); } } export default Cart;
注意,我们在Cart
组件中使用了Product
组件,并通过将addToCart
方法作为属性传递给Product
import React from 'react'; import ReactDOM from 'react-dom'; import Cart from './Cart'; ReactDOM.render( <React.StrictMode> <Cart /> </React.StrictMode>, document.getElementById('root') );
name
, description
et price
comme attributs et les afficher sur la page. Il existe également un bouton « Ajouter au panier ».
Créez les données produit :
products.js
dans le répertoire src et ajoutez le code suivant : npm start
Créez un fichier nommé Cart , qui représentera le panier d'achat de l'utilisateur. Créez un nouveau fichier Cart.js dans le répertoire src et ajoutez le code suivant : <br>rrreee
Product
dans le composant Cart
et l'avons ajouté en ajoutant addToCart est transmise au composant Product
en tant qu'attribut, qui implémente la fonction d'ajout de produits au panier lorsque l'utilisateur clique sur le bouton « Ajouter au panier ». Application de rendu :Maintenant, dans le fichier index.js du répertoire src, le composant Cart sera rendu, remplaçant le code de rendu par défaut :
rrreee
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!