React を使用してシンプルで使いやすいオンライン ショッピング ウェブサイトを開発する方法

React を使用してシンプルで使いやすいオンライン ショッピング Web サイトを開発する方法

概要:
React は、次のようなユーザー インターフェイスを構築するための JavaScript ライブラリです。複雑な Web アプリケーションを構成可能な方法で開発するのに役立ちます。この記事では、React を使用してシンプルで使いやすいオンライン ショッピング ウェブサイトを開発する方法を学びます。この Web サイトを実装するには、React コンポーネントや状態管理などの中心的な概念を使用します。

環境の準備:
まず、Node.js と NPM パッケージ マネージャーがコンピューターにインストールされていることを確認します。次に、次のコマンドを使用して、React アプリの作成に必要な create-react-app をインストールします。

npx create-react-app shopping-site

Create React Component:
製品を表す 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## を受け入れます。 # を属性として指定し、ページに表示します。 「カートに入れる」ボタンもあります。

商品データの作成:

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 コンポーネントを使用し、Pass を渡したことに注意してください。 addToCart メソッドを Product コンポーネントの属性として使用して、ユーザーが「カートに追加」ボタンをクリックしたときにショッピング カートに商品を追加する機能を実装します。

アプリケーションのレンダリング:

これで、src ディレクトリの Index.js ファイルで、Cart コンポーネントがレンダリングされ、デフォルトのレンダリング コードが置き換えられます:

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

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

この例では、 use React の ReactDOM.render() メソッドを使用して、Cart コンポーネントをページ上のルート要素にレンダリングします。

アプリケーションを実行します:

次のコマンドで開発サーバーを起動します:

npm start

これで、ブラウザで http://localhost:3000 にアクセスして、オンライン ショッピング Web サイトを表示できます。 ！商品の「カートに入れる」ボタンをクリックすると、商品がショッピングカートに追加されます。

結論:

React を使用すると、シンプルで使いやすいオンライン ショッピング サイトを簡単に構築できます。 React のコンポーネント化機能と状態管理機能を使用すると、複雑な Web アプリケーションを効率的に構築および維持できます。上記は、実際のプロジェクトのニーズに合わせて拡張およびカスタマイズできる簡単な例です。この記事がお役に立てば幸いです!

以上がReact を使用してシンプルで使いやすいオンライン ショッピング ウェブサイトを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。