https://github.com/moonhighway/react-data
A React workshop at SeattleJS - August 7, 2023
https://github.com/moonhighway/react-data
Last synced: about 1 year ago
JSON representation
A React workshop at SeattleJS - August 7, 2023
- Host: GitHub
- URL: https://github.com/moonhighway/react-data
- Owner: MoonHighway
- Created: 2023-07-16T18:29:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-11T19:44:09.000Z (over 2 years ago)
- Last Synced: 2025-02-16T18:44:20.719Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://moonhighway.com
- Size: 16.9 MB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Managing Data in a React Application
Thanks so much for being part of this workshop. I'm really glad that you're here. Below you'll find links for each section of the class.
## Agenda
1. [React Data Fetching](https://github.com/MoonHighway/react-data/blob/main/README.md#react-data-fetching)
2. [GraphQL Clients](https://github.com/MoonHighway/react-data#graphql-clients)
3. [@defer & @stream](https://github.com/MoonHighway/react-data#defer--stream)
4. [Server Components Intro](https://github.com/MoonHighway/react-data#server-components-intro)
5. [Next.js App Router](https://github.com/MoonHighway/react-data#nextjs-app-router)
6. [Data Fetching with Next.js](https://github.com/MoonHighway/react-data#data-fetching-with-nextjs)
7. [Server Components-ifying Libraries](https://github.com/MoonHighway/react-data#server-components-ifying-libraries)
## Instructor Info
- **Eve Porcello**: [Twitter](https://twitter.com/eveporcello) | [Email](mailto:eve@moonhighway.com)
- **Moon Highway Training**: [Moon Highway Website](https://www.moonhighway.com) | [Mailing List](http://bit.ly/moonhighway) | [Articles](https://www.moonhighway.com/articles)
## 1. React Data Fetching
- [Slides](https://slides.com/moonhighway/react-data/)
- [useEffect](https://codesandbox.io/s/use-effect-demo-3z93wk?file=/src/App.js)
- [useEffect States](https://codesandbox.io/s/data-states-9hwg4?file=/src/App.js)
- [Fetch on render](https://codesandbox.io/s/fetch-on-render-46pk6w?file=/src/App.js)
- [Fetch then render](https://codesandbox.io/s/fetch-then-render-s74kmn?file=/src/App.js)
- [Suspense - Render as you fetch](https://codesandbox.io/s/suspense-httkvr?file=/src/App.js)
## 2. GraphQL Clients
- [Exercise Start](https://github.com/MoonHighway/react-data/tree/main/02-graphql-clients/start)
- [Exercise Complete](https://github.com/MoonHighway/react-data/tree/main/02-graphql-clients/complete)
- [Apollo Client Docs](https://www.apollographql.com/docs/react)
- [Table JSX](https://gist.github.com/eveporcello/fa683859b9dc1934a0543677dbceac10)
## 3. @defer & @stream
- [Slides](https://slides.com/moonhighway/defer-stream/)
- [@defer and @stream Docs](https://www.apollographql.com/docs/react/data/defer/)
- [Demo](https://studio.apollographql.com/public/hack-the-e-commerce/variant/main/explorer?_gl=1%2A1lqqa8n%2A_ga%2AMTY3Nzk4MDgyNy4xNjkwNDkxMDQ0%2A_ga_0BGG5V2W2K%2AMTY5MTM4NjQ1OS41LjEuMTY5MTM4NjgzNy4wLjAuMA..)
## 4. Server Components Intro
- [Slides](https://slides.com/moonhighway/rsc/)
- [RSC from Scratch](https://github.com/reactwg/server-components/discussions/5)
- [Server Components with Next Documentation](https://nextjs.org/docs/getting-started/react-essentials)
- [Patterns.dev Article](https://www.patterns.dev/posts/react-server-components)
- [Demystifying Server Components Tutorial](https://demystifying-rsc.vercel.app/)
## 5. Next.js App Router
- [Snowtooth UI - Project Start](https://github.com/MoonHighway/react-data/tree/main/05-next-app-router/snowtooth-ui)
```
npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
```
At the root of the project -- `.env.local`
## 6. Data Fetching with Next.js
- [Snowtooth UI - Project Complete](https://github.com/MoonHighway/react-data/tree/main/06-next-data-fetching/snowtooth-ui)
- [Data Fetching Patterns](https://nextjs.org/docs/app/building-your-application/data-fetching/patterns)
- [Caching Docs](https://nextjs.org/docs/app/building-your-application/caching)
## 7. Server Components-ifying Libraries
- [Rendering Third Party Context Providers](https://vercel.com/guides/react-context-state-management-nextjs)
- [Apollo Case Study](https://www.apollographql.com/blog/apollo-client/next-js/how-to-use-apollo-client-with-next-js-13/)