Cara menggunakan React untuk membangunkan tapak web beli-belah dalam talian yang ringkas dan mudah digunakan

Cara menggunakan React untuk membangunkan laman web beli-belah dalam talian yang ringkas dan mudah digunakan

Tinjauan:
React ialah kaedah untuk membina pengguna Perpustakaan JavaScript untuk antara muka yang membantu kami membangunkan aplikasi web yang kompleks dengan cara yang boleh digubah. Dalam artikel ini, kita akan belajar cara membangunkan tapak web beli-belah dalam talian yang ringkas dan mudah digunakan menggunakan React. Kami akan menggunakan konsep teras seperti komponen React dan pengurusan negeri untuk melaksanakan tapak web ini.

Persediaan persekitaran:
Mula-mula, pastikan Node.js dan pengurus pakej NPM dipasang pada komputer anda. Kemudian, pasang aplikasi create-react-app yang diperlukan untuk mencipta apl React dengan arahan berikut:

npx create-react-app shopping-site

Cipta komponen React:
Buat komponen baharu bernama Produk , yang akan mewakili produk di tapak web kami. Cipta fail baharu Product.js dalam direktori src dan tambah kod berikut: 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方法作为属性传递给Productrreee

Komponen ini akan menerima nama, perihalan dan harga sebagai atribut dan memaparkannya pada halaman. Terdapat juga butang "Tambah ke Troli".

Buat data produk:

Buat fail bernama products.js dalam direktori src dan tambahkan kod berikut:

import React from 'react';
import ReactDOM from 'react-dom';
import Cart from './Cart';

ReactDOM.render(
    <React.StrictMode>
        <Cart />
    </React.StrictMode>,
    document.getElementById('root')
);

#🎜🎜 #Buat komponen troli beli-belah:

Buat komponen baharu bernama Cart yang akan mewakili troli beli-belah pengguna. Buat fail baharu Cart.js dalam direktori src dan tambah kod berikut:

npm start

Perhatikan bahawa kami menggunakan Produk dalam komponen komponen Cart , dan dengan menghantar kaedah addToCart sebagai atribut kepada komponen Product, fungsi menambah item pada troli beli-belah dilaksanakan apabila pengguna mengklik "Tambah ke Troli" butang .

Aplikasi rendering:

Sekarang, dalam fail index.js dalam direktori src, komponen Cart akan diberikan, menggantikan kod rendering lalai:

rrreee
Dalam contoh ini, kami menggunakan kaedah ReactDOM.render() React untuk memaparkan komponen Cart kepada elemen akar pada halaman.

#🎜🎜#Jalankan aplikasi: #🎜🎜#Mulakan pelayan pembangunan dengan arahan berikut: #🎜🎜#rrreee#🎜🎜#Sekarang, anda boleh melawati http://localhost:3000 dalam penyemak imbas anda. Lihat tapak membeli-belah dalam talian anda! Apabila anda mengklik butang "Tambah ke Troli" untuk item, item tersebut akan ditambahkan pada troli beli-belah. #🎜🎜##🎜🎜#Kesimpulan: #🎜🎜# Dengan menggunakan React, kami boleh membina laman web beli-belah dalam talian yang ringkas dan mudah digunakan. Menggunakan komponenisasi React dan keupayaan pengurusan keadaan, kami boleh membina dan menyelenggara aplikasi web yang kompleks dengan cekap. Di atas ialah contoh mudah yang boleh anda lanjutkan dan sesuaikan untuk memenuhi keperluan projek sebenar. Harap artikel ini membantu anda! #🎜🎜#

Atas ialah kandungan terperinci Cara menggunakan React untuk membangunkan tapak web beli-belah dalam talian yang ringkas dan mudah digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!