如何与React创建电子商务网站

该教程通过使用React构建一个简单的电子商务Web应用程序来指导您。 虽然不是成熟的Shopify竞争对手，但它有效地展示了React创建动态用户界面的功能。

该应用程序具有基本的购物车系统和用户身份验证。 它利用了反应上下文，而不是复杂的状态管理库，例如Redux或Mobx。 使用

和json-server创建模拟后端。 完整的代码可在github上找到。json-server-auth

关键功能和技术：

>
• >反应上下文：简化的状态管理，避免了Redux或Mobx的开销。
用户身份验证：
• >使用>和JWTS模拟，用于现实的身份验证流。 json-server-auth> React路由器：
处理应用程序导航。
• > axios：
管理AJAX请求有效数据获取。
• > Bulma CSS：
提供了响应迅速且具有视觉吸引力的UI。
• > jwt-decode：
对安全身份验证的解析JWT。
• 本地存储：
在会话之间持续了用户数据和购物车内容。
>先决条件：

本教程假定基本的JavaScript和React知识。 如果您是新手反应，请考虑审查初学者指南。

>您需要安装node.js和npm（节点软件包管理器）。使用：

验证安装

项目设置：

<code class="language-bash">node -v
npm -v</code>

>使用Create React App：创建一个新的React项目：

1. 安装必要的软件包：

   <code class="language-bash">npx create-react-app e-commerce
   cd e-commerce</code>

2. 添加Bulma Stylesheet到

   <code class="language-bash">npm install react-router-dom axios json-server json-server-auth jwt-decode bulma</code>

   ：

3. src/index.js

   <code class="language-javascript">import "bulma/css/bulma.css";</code>

   上下文和组件结构：
>
>教程使用反应上下文进行状态管理。 a

文件创建上下文，>提供了一个更高阶的组件，可以轻松地将上下文注入组件。 创建了基本组件（，

，

，Context.js）来构建应用程序。 withContext.jsAddProduct假后端设置：Cart Login ProductLista

>文件（位于

目录中）为用户和产品定义模拟数据库。 使用身份验证启动>：

这可以在db.json>中设置REST API。 backendjson-server>身份验证实现：

<code class="language-bash">./node_modules/.bin/json-server-auth ./backend/db.json --port 3001</code>

App.js组件使用axios和jwt-decode处理用户身份验证。 login方法将发布请求提交到/login>，解码JWT，并将用户信息存储在州和本地存储中。 logout方法清除了此数据。 Login组件提供了登录的用户界面。

产品视图和购物车管理：

ProductList组件获取并显示产品。 ProductItem>渲染单个产品卡。 addToCart，removeFromCart和clearCart方法管理购物车，在本地存储中持续存在数据。 Cart组件使用CartItem用于单个项目显示卡车内容。 该方法通过更新模拟后端中的产品库存来模拟结帐。 checkout组件允许管理用户添加新产品。 AddProduct

结论：

>本教程提供了一个由React构建的基本电子商务应用程序。 进一步的改进可能包括强大的后端，服务器端身份验证和更复杂的功能。 请记住，完整的代码可在GitHub上找到。 有关更高级的反应开发，请探索站点Premium上的React设计模式和最佳实践。

以上是如何与React创建电子商务网站的详细内容。更多信息请关注PHP中文网其他相关文章！