GraphQL + React Apollo + React Hook 大型项目实战(21 个视频)

#1

你会学到什么?

* 登录注册
* 登录信息持久化
* 创建 post
* 喜欢 post
* 评论 post
* React-hook 
* 自定义 react hook
* jsonwebtoken
* Context
* useContext
* useQuery 查询 api
* useMutation 修改数据
* 使用 localStorage 持久化数据
* react router 保护路由
* useReducer
* react-router
* semantic-ui
* react semantic 的使用
* @apollo/react-hooks
* apollo-link-context 的用法
* React-hook 与 GraphQL 的结合
* apollo 的 cache 原理

GraphQL + React Apollo + React Hook 大型项目实战(21 个视频)

GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「03:42」

GraphQL + React Apollo + React Hook 大型项目实战 #2 搭建 Apollo 客户端「15:44」

GraphQL + React Apollo + React Hook 大型项目实战 #3 写好路由「04:07」

GraphQL + React Apollo + React Hook 大型项目实战 #4 用 semantic-ui-react 写好导航 (三更)「13:25」

GraphQL + React Apollo + React Hook 大型项目实战 #5 使用 useQuery 查询数据「Pro」「09:59」

GraphQL + React Apollo + React Hook 大型项目实战 #6 使用 semantic Card 显示 Post「Pro」「05:38」

GraphQL + React Apollo + React Hook 大型项目实战 #7 完成显示 Post 列表「Pro」「06:18」

GraphQL + React Apollo + React Hook 大型项目实战 #8 注册页面「Pro」「05:48」

GraphQL + React Apollo + React Hook 大型项目实战 #9 完成注册「Pro」「14:37」

GraphQL + React Apollo + React Hook 大型项目实战 #10 重构代码 - 自定义 hook「Pro」「05:34」

GraphQL + React Apollo + React Hook 大型项目实战 #11 登录功能「Pro」「02:08」

GraphQL + React Apollo + React Hook 大型项目实战 #12 使用 context 和 useReducer 处理登录登出功能「Pro」「12:05」

GraphQL + React Apollo + React Hook 大型项目实战 #13 使用 useContext 处理登录登出功能「Pro」「06:19」

GraphQL + React Apollo + React Hook 大型项目实战 #14 根据登录状态修改菜单「Pro」「03:54」

GraphQL + React Apollo + React Hook 大型项目实战 #15 使用 localStorage 持久化登录状态「Pro」「11:12」

GraphQL + React Apollo + React Hook 大型项目实战 #16 自制 authRoute 保护路由「Pro」「07:41」

GraphQL + React Apollo + React Hook 大型项目实战 #17 创建 Post「Pro」「10:32」

GraphQL + React Apollo + React Hook 大型项目实战 #18 使用 apollo-link-context 给每次请求加上头部认证信息「Pro」「11:08」

GraphQL + React Apollo + React Hook 大型项目实战 #19 mutation 更新 apollo 的 cache「Pro」「10:52」

GraphQL + React Apollo + React Hook 大型项目实战 #20 apollo 的 cache「Pro」「06:51」

GraphQL + React Apollo + React Hook 大型项目实战 #21 删除 Post 按钮「Pro」「04:22」

等等

适宜人群

学习过 React 和 GraphQL 的同学

GraphQL 的课程 https://www.qiuzhi99.com/playlists?utf8=✓&q[node_id_eq]=7&q[serial_id_eq]=&q[is_paid_true]=&q[progress_eq]=&q[difficult_eq]=

你需要准备什么?

  • React 基础知识

  • 一台电脑一杯咖啡

  • 电脑上装有 Nodejs 和一个你所喜欢的编辑器

  • 一颗热爱编程的心

课上的资源链接

https://www.qiuzhi99.com/playlists/graphql-application.html 后端课程

https://www.qiuzhi99.com/knowledges 学习顺序

https://www.apollographql.com/docs/react/get-started/ 官方 GraphQL 和 React 结合的文档

https://gitlab.rails365.net/hfpp2012/merng 后端的源码

https://semantic-ui.com/introduction/getting-started.html

https://react.semantic-ui.com/

编辑器插件

code --install-extension 74th.vimStyle
code --install-extension bajdzis.vscode-database
code --install-extension CoenraadS.bracket-pair-colorizer-2
code --install-extension DiamondYuan.umi-pro
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension fosshaas.fontsize-shortcuts
code --install-extension kumar-harsh.graphql-for-vscode
code --install-extension overtrue.miniapp-helper
code --install-extension qiu8310.minapp-vscode
code --install-extension Shan.code-settings-sync
code --install-extension steoates.autoimport
code --install-extension TabNine.tabnine-vscode
code --install-extension wix.vscode-import-cost