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

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

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

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

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

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

驗(yàn)證安裝

項(xiàng)目設(shè)置：

node -v
npm -v

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

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)：
>
>教程使用反應(yīng)上下文進(jìn)行狀態(tài)管理。 a

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

，

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

>文件（位于

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

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

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

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

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

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

結(jié)論：

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

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