GraphQL + React Apollo + React Hook 大型项目实战

你会学到什么？

• 登录注册
• 登录信息持久化
• 创建 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 原理 ```

等等

线上 preview（可能要科学上网）: https://gracious-shannon-271ede.netlify.com/

最终源码看最后一集

适宜人群

学习过 React 和 GraphQL 的同学

GraphQL 的课程 https://www.qiuzhi99.com/playlists?utf8=%E2%9C%93&q%5Bnode_id_eq%5D=7&q%5Bserial_id_eq%5D=&q%5Bis_paid_true%5D=&q%5Bprogress_eq%5D=&q%5Bdifficult_eq%5D=

你需要准备什么？

• 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://github.com/hfpp2012/hello-GraphQL

https://github.com/hfpp2012/hello-apollo

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