Name: React 与 GraphQL：使用 Hygraph 构建电商应用
Availability: InStock

React 与 GraphQL：使用 Hygraph 构建电商应用

本课程将教你从零开始使用 React 构建一个电商应用。接着，你将学习如何使用 Hygraph 存储和管理电商产品数据，并将这些内容集成到你的电商应用中。最后，你将使用 Snipcart 实现购物车管理功能，并将应用部署到 Netlify。完成本课程后，你将具备在 React 中使用各种路由方式的实际经验。此外，你将了解什么是无头内容管理系统（CMS），它的工作原理，以及如何创建一个存储产品文本和图片的项目；你还将学会如何通过 GraphQL 从 Hygraph 获取数据。你还将深入理解 Snipcart 的功能及其如何帮助你轻松管理购物车，而无需从零开始开发。同时，你将学习如何将代码推送到 GitHub，并利用 Netlify 部署应用。最终，你将能够让你的应用上线，让他人查看你的成果。

8 Lessons

WHAT YOU'LL LEARN

通过实际项目构建使用 GraphQL 的电子商务应用

熟悉 Hygraph 以及如何使用 GraphQL 获取数据

在 React 中集成 Snipcart 以管理购物车操作

了解如何使用 GraphQL 从 Hygraph 获取数据并引入 React

掌握 GitHub 的基本使用以及部署 React 应用程序的相关知识

通过实际项目构建使用 GraphQL 的电子商务应用

Content

8 Lessons • 0 Quizzes • 0 Challenges

简介

1
入门

使用 React 构建电商应用前端

1
React 入门
2
设置电子商务应用程序
3
创建 React 组件
4
在 React 应用中设置页面
5
在电商应用中实现路由
6
React 中单个产品的动态路由
7
挑战：使用 React 构建电商应用的前端
8
解决方案：使用 React 构建电子商务应用的前端
9
React 中每个类别的动态路由
10
完整的电子商务应用
11
测验：使用 React 构建电商应用的前端

使用 Hygraph 进行内容管理

1
Hygraph 是一个现代化的、基于 GraphQL 的内容管理平台，专为开发者设计，用于构建和管理结构化内容。它提供了一个灵活的内容建模系统，支持实时数据同步、多环境部署、版本控制以及强大的 API 功能，适用于网站、移动应用和各种前端项目。通过其直观的界面和强大的 GraphQL 接口，开发者可以高效地创建、更新和查询内容，同时实现与前端框架（如 React、Next.js 等）的无缝集成。
2
开始使用 Hygraph
3
为产品创建数据模型
4
创建分类的模式
5
创建并发布内容到 Hygraph
6
探索与配置 Hygraph API
7
挑战：使用 Hygraph 进行内容管理
8
解决方案：使用 Hygraph 进行内容管理
9
测验：使用 Hygraph 管理内容

从 Hygraph 获取内容（使用 GraphQL）

1
GraphQL 简介
2
在 React 中使用 GraphQL 和 Hygraph
3
从 Hygraph API 通过 GraphQL 获取所有产品
4
使用 GraphQL 实现动态路由
5
挑战：使用 GraphQL 从 Hygraph 获取内容
6
解决方案：使用 GraphQL 从 Hygraph 获取内容
7
使用 GraphQL 和 Hygraph 的数据完成应用程序
8
测验：使用 GraphQL 从 Hygraph 获取内容

使用 Snipcart 实现购物车系统

1
将电商应用连接到 Snipcart
2
使用 Snipcart 将商品添加到购物车
3
将 Snipcart 数据添加到我们应用的导航栏
4
在 Snipcart 中添加支付网关
5
挑战：使用 Snipcart 实现购物车系统
6
解决方案：使用 Snipcart 实现购物车系统
7
完成应用的购物车功能实现
8
测验：使用 Snipcart 实现购物车系统

部署电子商务应用

1
什么是部署？
2
将我们的源代码推送到 GitHub
3
使用 Netlify 部署
4
挑战：在 GitHub 上部署一个电商应用
5
解决方案：在 GitHub 上部署电子商务应用
6
测验：部署电商应用

结论

1
课程挑战
2
解决方案
3
总结！

附录

1
本地安装 React
2
本地安装 Git

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:Anonymous User

React 与 GraphQL：使用 Hygraph 构建电商应用

WHAT YOU'LL LEARN

Content

1. 简介熟悉使用 React 和 Hygraph 构建电商应用。

入门

2. 使用 React 构建电商应用前端逐步构建一个基于 React 的前端应用，包含可复用的组件、导航功能以及动态路由。

React 入门

设置电子商务应用程序

创建 React 组件

在 React 应用中设置页面

在电商应用中实现路由

React 中单个产品的动态路由

挑战：使用 React 构建电商应用的前端

解决方案：使用 React 构建电子商务应用的前端

React 中每个类别的动态路由

完整的电子商务应用

测验：使用 React 构建电商应用的前端

3. 使用 Hygraph 进行内容管理使用 Hygraph 进行内容管理，创建模型、定义数据结构（Schema），并集成 API。

开始使用 Hygraph

为产品创建数据模型

创建分类的模式

创建并发布内容到 Hygraph

探索与配置 Hygraph API

挑战：使用 Hygraph 进行内容管理

解决方案：使用 Hygraph 进行内容管理

测验：使用 Hygraph 管理内容

4. 从 Hygraph 获取内容（使用 GraphQL）运用你的技能，通过 GraphQL 和 Hygraph 获取、展示并动态路由数据。

GraphQL 简介

在 React 中使用 GraphQL 和 Hygraph

从 Hygraph API 通过 GraphQL 获取所有产品

使用 GraphQL 实现动态路由

挑战：使用 GraphQL 从 Hygraph 获取内容

解决方案：使用 GraphQL 从 Hygraph 获取内容

使用 GraphQL 和 Hygraph 的数据完成应用程序

测验：使用 GraphQL 从 Hygraph 获取内容

将电商应用连接到 Snipcart

使用 Snipcart 将商品添加到购物车

将 Snipcart 数据添加到我们应用的导航栏

在 Snipcart 中添加支付网关

挑战：使用 Snipcart 实现购物车系统

解决方案：使用 Snipcart 实现购物车系统

完成应用的购物车功能实现

测验：使用 Snipcart 实现购物车系统

6. 部署电子商务应用按照以下流程，通过 GitHub 和 Netlify 无缝部署一个电商应用：

什么是部署？

将我们的源代码推送到 GitHub

使用 Netlify 部署

挑战：在 GitHub 上部署一个电商应用

解决方案：在 GitHub 上部署电子商务应用

测验：部署电商应用

7. 结论通过 Snipcart 测试你对实时数据、React Hooks 和购物车管理的理解。

课程挑战

解决方案

总结！

8. 附录尝试在本地安装 React 和 Git，以实现高效的应用开发。

本地安装 React

本地安装 Git

Certificate of Completion

Reviews

Reviews & Comments (0)