国外课栈 - 跨学科知识视角栈
全栈 React、Python 和 GraphQL
全栈 React、Python 和 GraphQL
类别 : 视频教程
咨询
概述

本课程面向热衷于构建具有尖端 React 用户界面、由强大的 Python 后端提供支持并在服务器和客户端上使用 GraphQL 的完整、全栈应用程序的开发人员。


本课程专为热衷于在最新 Web 技术方面走在前沿的开发人员而设计,重点介绍如何从前到后使用 GraphQL、React 中的最新技术和工具(包括 React Hooks、Apollo Boost 和 Material UI ),以及如何将它们与 Python、Django 和 Graphene 结合起来,形成一个惊人的堆栈。


您将使用 Python(Django 和 Graphene)制作的 GraphQL API 从头开始构建全栈应用程序; 使用React Hooks 和 Apollo Boost 的 React 客户端应用程序; 具有状态管理 React Context(使用 useContext)和 Apollo Client State的使用 Cloudinary的媒体文件上传。


这个应用程序将是一个名为 ReactTracks 的社交音乐共享应用程序,用户可以在其中上传和共享他们喜欢的任何音乐,通过喜欢各种曲目并将其添加到他们的个人资料中,搜索曲目,添加有关他们的音乐的信息和编辑。


内容

  • 入门

  • GraphQL 介绍/回顾

    • 查询,使用 GraphiQL,GraphQL 与 REST 的比较

    • GraphQL 类型系统/模式、对象与标量类型、参数

    • 在 GraphQL 中创建、更新、删除数据的变异

    • 带有 GraphQL 变量的查询/变异中的动态值


  • Python 中的 Graphene / GraphQL 介绍

    • Graphene中的你好世界

    • Graphene / Snakecase vs Camelcase 中的语法

    • 对象类型,查询中的参数

    • 突变/默认值

    • 查询/突变中的变量

    • self和信息值


  • 使用 Django / Graphene 构建 GraphQL 后端

    • 创建基础 Django 项目

    • 制作曲目应用程序/建模曲目数据

    • 使用 Graphene-Django 添加曲目数据/创建模式

    • 集成 GraphiQL 以与应用程序数据交互

    • 添加突变/创建新曲目

    • 创建新用户

    • 通过ID查询用户

    • 使用 Django-GraphQL-JWT 进行用户身份验证

    • 获取当前身份验证用户的授权标头

    • 将用户与曲目联系起来

    • 更新曲目

    • 删除曲目

    • 添加赞模型/创建赞

    • 查询喜欢 / 查询带有关联喜欢的曲目

    • 使用 GraphQLError 进行错误处理

    • 将全文搜索添加到我们的曲目中


  • 为后端开发 React 客户端应用程序

    • 添加我们的 React 客户端应用程序

    • 探索 React 源代码

    • 使用 React Apollo 设置 Apollo 客户端/执行查询

    • 启用 django-cors-headers 以连接到我们的后端

    • 创建我们的注册表

    • 使用 Apollo Dev Tools 在客户端执行 GraphQL Operations

    • 使用 useState 存储表单状态

    • 使用变异组件执行变异/注册用户变异

    • 完成注册(成功对话框、切换身份验证组件、转换)

    • 自定义错误组件/改进的错误处理

    • 为 JWT 构建登录表单/执行登录变异

    • 使用 Apollo 客户端状态管理身份验证状态

    • 使用 Apollo 客户端将 JWT 添加到我们的授权标头

    • 使用 React Router 4 添加路由

    • 样式化我们的标题

    • 使用注销按钮注销用户

    • 创建加载组件

    • 用曲目列表显示曲目

    • 构建 CreateTrack 按钮/对话框

    • 改进 CreateTrack 对话框

    • 音频上传/创建新曲目

    • RefetchQueries 在变异后更新 UI

    • 不受控制与受控制的组件/设置文件上传限制

    • 添加播放/下载上传的音频文件的能力

    • 添加搜索跟踪组件/功能

    • 根据搜索结果更新曲目列表

    • 更新曲目

    • 使用 React Context / useContext 避免 Props Drilling

    • 删除曲目

    • 创建喜欢/喜欢的曲目

    • 禁用每个曲目的多个喜欢

    • 了解 Apollo 缓存/更新与 RefetchQueries

    • 在创建曲目时更新我们的缓存

    • 删除曲目时更新缓存

    • 使用 Fetch-Policy 修改查询的获取行为

    • 建立用户的个人资料页面

    • 完成我们的应用程序