Comment utiliser React pour développer un site Web d'achat en ligne simple et facile à utiliser-js tutoriel-php.cn

Comment utiliser React pour développer un site Web d'achat en ligne simple et facile à utiliser

PHPz

Libérer： 2023-09-27 08:36:11

original

999 Les gens l'ont consulté

Comment utiliser React pour développer un site Web dachat en ligne simple et facile à utiliser

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

Copier après la connexion

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;

Copier après la connexion

这个组件将接受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;

Copier après la connexion

创建购物车组件:
创建一个名为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;

Copier après la connexion

注意，我们在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')
);

Copier après la connexion

Ce composant acceptera 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 :

Créez un fichier nommé products.js dans le répertoire src et ajoutez le code suivant :

npm start

Copier après la connexion

Créez un composant de panier :

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

Notez que nous avons utilisé le composant 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

Dans cet exemple, nous avons utilisé la méthode ReactDOM.render() de React, Render le composant Cart dans l’élément racine de la page. 🎜🎜Exécutez l'application : 🎜Démarrez le serveur de développement avec la commande suivante : 🎜rrreee🎜 Vous pouvez maintenant visiter http://localhost:3000 dans votre navigateur et vous verrez votre site d'achat en ligne ! Lorsque vous cliquez sur le bouton « Ajouter au panier » pour un article, l'article sera ajouté au panier. 🎜🎜Conclusion :🎜En utilisant React, nous pouvons facilement créer un site Web d'achat en ligne simple et facile à utiliser. Grâce aux capacités de création de composants et de gestion d'état de React, nous pouvons créer et maintenir efficacement des applications Web complexes. Ce qui précède est un exemple simple que vous pouvez étendre et personnaliser pour répondre aux besoins de projets réels. J'espère que cet article vous aidera ! 🎜

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!