該教程通過使用React構(gòu)建一個簡單的電子商務Web應用程序來指導您。 雖然不是成熟的Shopify競爭對手，但它有效地展示了React創(chuàng)建動態(tài)用戶界面的功能。

和json-server創(chuàng)建模擬后端。 完整的代碼可在github上找到。json-server-auth

關(guān)鍵功能和技術(shù)：

>
• >反應上下文：簡化的狀態(tài)管理，避免了Redux或Mobx的開銷。
用戶身份驗證：
• >使用>和JWTS模擬，用于現(xiàn)實的身份驗證流。 json-server-auth> React路由器：
處理應用程序?qū)Ш健?li>> axios：管理AJAX請求有效數(shù)據(jù)獲取。
• > Bulma CSS：
提供了響應迅速且具有視覺吸引力的UI。
• > jwt-decode：
對安全身份驗證的解析JWT。
• 本地存儲：
在會話之間持續(xù)了用戶數(shù)據(jù)和購物車內(nèi)容。
>先決條件：

本教程假定基本的JavaScript和React知識。 如果您是新手反應，請考慮審查初學者指南。

>您需要安裝node.js和npm（節(jié)點軟件包管理器）。使用：

驗證安裝

項目設置：

node -v
npm -v

>使用Create React App：創(chuàng)建一個新的React項目：

1. 安裝必要的軟件包：

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

2. 添加Bulma Stylesheet到

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

   ：

3. src/index.js

   import "bulma/css/bulma.css";

   上下文和組件結(jié)構(gòu)：
>
>教程使用反應上下文進行狀態(tài)管理。 a

文件創(chuàng)建上下文，>提供了一個更高階的組件，可以輕松地將上下文注入組件。 創(chuàng)建了基本組件（，

，

，Context.js）來構(gòu)建應用程序。 withContext.jsAddProduct假后端設置：Cart Login ProductLista

>文件（位于

目錄中）為用戶和產(chǎn)品定義模擬數(shù)據(jù)庫。 使用身份驗證啟動>：

這可以在db.json>中設置REST API。 backendjson-server>身份驗證實現(xiàn)：

./node_modules/.bin/json-server-auth ./backend/db.json --port 3001

App.js組件使用axios和jwt-decode處理用戶身份驗證。 login方法將發(fā)布請求提交到/login>，解碼JWT，并將用戶信息存儲在州和本地存儲中。 logout方法清除了此數(shù)據(jù)。 Login組件提供了登錄的用戶界面。

產(chǎn)品視圖和購物車管理：

ProductList組件獲取并顯示產(chǎn)品。 ProductItem>渲染單個產(chǎn)品卡。 addToCart，removeFromCart和clearCart方法管理購物車，在本地存儲中持續(xù)存在數(shù)據(jù)。 Cart組件使用CartItem用于單個項目顯示卡車內(nèi)容。 該方法通過更新模擬后端中的產(chǎn)品庫存來模擬結(jié)帳。 checkout組件允許管理用戶添加新產(chǎn)品。 AddProduct

結(jié)論：

>本教程提供了一個由React構(gòu)建的基本電子商務應用程序。 進一步的改進可能包括強大的后端，服務器端身份驗證和更復雜的功能。 請記住，完整的代碼可在GitHub上找到。 有關(guān)更高級的反應開發(fā)，請?zhí)剿髡军cPremium上的React設計模式和最佳實踐。

以上是如何與React創(chuàng)建電子商務網(wǎng)站的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！