So entwickeln Sie mit React eine einfache und benutzerfreundliche Online-Shopping-Website

So entwickeln Sie mit React eine einfache und benutzerfreundliche Online-Shopping-Website

Übersicht:
React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, die uns dabei helfen kann, komplexe Webanwendungen auf zusammensetzbare Weise zu entwickeln. In diesem Artikel erfahren Sie, wie Sie mit React eine einfache und benutzerfreundliche Online-Shopping-Website entwickeln. Wir werden Kernkonzepte wie React-Komponenten und Zustandsverwaltung verwenden, um diese Website zu implementieren.

Umgebungsvorbereitung:
Stellen Sie zunächst sicher, dass Node.js und der NPM-Paketmanager auf Ihrem Computer installiert sind. Installieren Sie dann die zum Erstellen einer React-App erforderliche Create-React-App mit dem folgenden Befehl:

npx create-react-app shopping-site

React-Komponente erstellen:
Erstellen Sie eine neue Komponente mit dem Namen Product, die die Produkte auf unserer Website darstellt. Erstellen Sie eine neue Datei Product.js im src-Verzeichnis und fügen Sie den folgenden Code hinzu: 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')
);

Diese Komponente akzeptiert name, beschreibung und preis als Attribute und zeigen Sie sie auf der Seite an. Es gibt auch einen „In den Warenkorb“-Button.

Produktdaten erstellen:

Erstellen Sie eine Datei mit dem Namen products.js im src-Verzeichnis und fügen Sie den folgenden Code hinzu:

npm start

Erstellen Sie eine Warenkorbkomponente:

Erstellen Sie eine Datei mit dem Namen Cart , die den Warenkorb des Benutzers darstellt. Erstellen Sie eine neue Datei Cart.js im Verzeichnis src und fügen Sie den folgenden Code hinzu: <br>rrreee

Beachten Sie, dass wir die Komponente Product in der Komponente Cart verwendet und durch Hinzufügen hinzugefügt haben addToCart wird als Attribut an die Komponente Product übergeben, die die Funktion implementiert, Produkte zum Warenkorb hinzuzufügen, wenn der Benutzer auf die Schaltfläche „In den Warenkorb“ klickt.

Rendering-Anwendung:

Jetzt wird in der Datei index.js im src-Verzeichnis die Cart-Komponente gerendert und ersetzt den Standard-Rendering-Code:
rrreee

In diesem Beispiel haben wir die ReactDOM.render()-Methode von React, Render, verwendet die Cart-Komponente in das Stammelement auf der Seite. 🎜🎜Führen Sie die Anwendung aus: 🎜Starten Sie den Entwicklungsserver mit dem folgenden Befehl: 🎜rrreee🎜 Jetzt können Sie http://localhost:3000 in Ihrem Browser aufrufen und sehen Ihre Online-Shopping-Website! Wenn Sie bei einem Artikel auf die Schaltfläche „In den Warenkorb“ klicken, wird der Artikel in den Warenkorb gelegt. 🎜🎜Fazit:🎜Durch die Verwendung von React können wir ganz einfach eine einfache und benutzerfreundliche Online-Shopping-Website erstellen. Mithilfe der Komponentisierungs- und Zustandsverwaltungsfunktionen von React können wir komplexe Webanwendungen effizient erstellen und warten. Das Obige ist ein einfaches Beispiel, das Sie erweitern und anpassen können, um den Anforderungen realer Projekte gerecht zu werden. Ich hoffe, dieser Artikel hilft Ihnen! 🎜

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie mit React eine einfache und benutzerfreundliche Online-Shopping-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!