Reactでeコマースサイトを作成する方法

このチュートリアルは、Reactを使用してシンプルなeコマースWebアプリケーションを構築することをガイドします。 本格的なShopifyの競合他社ではありませんが、動的なユーザーインターフェイスを作成するためのReactの能力を効果的に実証しています。

アプリケーションには、基本的なカートシステムとユーザー認証があります。 ReduxやMobxなどの複雑な状態管理ライブラリの代わりに、Reactコンテキストを活用します。 模擬バックエンドは、

および

を使用して作成されます。 完全なコードはgithubで利用できます。json-server json-server-auth

主要な機能とテクノロジー：

Reactコンテキスト：
• reduxまたはmobxのオーバーヘッドを避けて、簡略化された状態管理。 ユーザー認証：
現実的な認証フローのために
• およびJWTSを使用してシミュレートされます。 React Router：json-server-authアプリケーションナビゲーションを処理します
• axios：ajaxリクエストを管理して、効率的なデータフェッチを行います
bulma css：
• 応答性のある視覚的に魅力的なUIを提供します jwt-decode：
Secure Authenticationのためにjwtsを解析します
• ローカルストレージ：セッション全体でユーザーデータとカートコンテンツを継続します。
• 前提条件：
このチュートリアルは、基本的なJavaScriptとReactの知識を想定しています。 反応が初めての場合は、初心者向けガイドをレビューすることを検討してください。
• node.jsとnpm（ノードパッケージマネージャー）がインストールされる必要があります。 ：を使用してインストールを確認します

プロジェクトのセットアップ：

Create Reactアプリを使用して新しいReactプロジェクトを作成します：

node -v
npm -v

必要なパッケージをインストール：

bulma styleSheetを
1. ：

   に追加します

   npx create-react-app e-commerce
   cd e-commerce

2. コンテキストとコンポーネント構造：

   npm install react-router-dom axios json-server json-server-auth jwt-decode bulma

チュートリアルでは、国家管理にReactコンテキストを使用します。
3. ファイルはコンテキストを作成し、

   はコンポーネントにコンテキストを簡単に注入するための高次コンポーネントを提供します。 基本的なコンポーネント（src/index.js、

   、

   import "bulma/css/bulma.css";

   、）は、アプリケーションを構成するために作成されています。

   偽のバックエンドのセットアップ：

   a

   ファイル（A Context.jsを開始します：withContext.js AddProduct Cartこれにより、Login ProductList

   認証実装：

   App.jsコンポーネントは、axiosおよびjwt-decodeを使用してユーザー認証を処理します。 loginメソッドは、/loginへの投稿リクエストを行い、JWTを解読し、州およびローカルストレージにユーザー情報を保存します。 logoutメソッドはこのデータをクリアします。 Loginコンポーネントは、ログイン用のユーザーインターフェイスを提供します。

   製品ビューとカート管理：

   ProductListコンポーネントは製品を取得して表示します。 ProductItem個々の製品カードをレンダリングします。 addToCart、removeFromCart、およびclearCartメソッドは、ショッピングカートを管理し、ローカルストレージでデータを持続します。 Cartコンポーネントには、個々のアイテムにCartItemを使用して、カートの内容が表示されます。 checkoutメソッドは、モックバックエンドの製品ストックを更新することにより、チェックアウトをシミュレートします。 AddProductコンポーネントにより、管理者ユーザーは新製品を追加できます。

   結論：

   このチュートリアルは、Reactで構築された基礎eコマースアプリケーションを提供します。 さらなる改善には、堅牢なバックエンド、サーバー側の認証、およびより洗練された機能が含まれる場合があります。 完全なコードはGitHubで利用できることを忘れないでください。 より高度な反応開発については、SitePoint PremiumでReact Design PatternsとBest Practicesを探索してください。

   以上がReactでeコマースサイトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。