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

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

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

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

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

node -v
npm -v

bulma styleSheetを
1. ：

   に追加します

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

2. コンテキストとコンポーネント構(gòu)造：

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

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

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

   、

   import "bulma/css/bulma.css";

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

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

   a

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

   認(rèn)証実裝：

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

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

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

   結(jié)論：

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

   以上がReactでeコマースサイトを作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。