React & Node 教程 - 5 小时完成完整的电子商务 [2020]

欢迎学习我的 React 和 Node 教程，学习如何在 5 小时内构建一个功能齐全的电商网站。打开你的代码编辑器，在接下来的几个小时里跟着我一起用 React 和 Node.JS 构建一个电商网站吧。

源代码和演示

它为您概述了构建像亚马逊这样的电子商务网站的教程。

您需要安装代码编辑器和 Web 浏览器才能开始 Web 开发。在本部分中，我们将准备开始编码的环境。

在本部分中，您将为电子商务网站创建一个网页模板。

我们将创建一个产品列表作为静态 HTML 元素。

我们将创建一个汉堡菜单，用于显示和隐藏侧边栏。此外，我们还将设计产品的详情页面。

这部分是关于前端的。我们使用 React 库来构建 UI 元素。

这是电子商务的主页。它显示了产品列表。

当用户点击某个产品时，应该会出现一个页面来显示该产品的详细信息。本课将教你如何制作一个吸引人的详情页面。

本部分介绍 Node 和 Express。它们是使用 JavaScript 语言创建 Web 服务器的流行框架。我们将创建一个 MongoDB 数据库，并保存和检索管理员用户。

在本课中，我们将使用 React Hooks 从服务器获取数据。我们使用 axios 库，以现代的 async/await 风格完成这项工作。

在处理多个表单及其数据时，没有什么比状态管理更好了。在本课中，我们使用 Redux 来处理复杂的状态，并确保应用行为可预测。

在本部分中，我们将详情页的状态迁移到 Redux。首先，我们创建 Reducer，然后定义 Action，并将它们连接到详情组件。

购物车是任何电商网站的核心。我们专注于使用 React 和 Redux 打造用户友好的购物车。

本课讲解如何在 MongoDB 数据库中持久化数据。我们使用 mongoose 包来创建模型，并在数据库中保存和检索数据。

在将用户重定向到结账页面之前，我们需要注册用户。在本部分中，我们将创建表单来获取用户信息并将其保存到数据库中。

管理员应该能够定义产品并随时更新库存数量。本页面介绍如何管理电商产品。

在这一部分，我们实现了结帐向导，包括登录、运输信息、付款方式和下订单。

在本教程中，我们创建了一个类似亚马逊的电商网站。您可以根据自己的需求修改此项目，并将其添加到您的作品集中。
此外，我非常期待您对本教程的 React 和 Node 版本发表任何评论。请在这里分享您的想法。