Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gregbrimble/react-server-components-workshop
https://github.com/gregbrimble/react-server-components-workshop
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/gregbrimble/react-server-components-workshop
- Owner: GregBrimble
- Created: 2023-11-02T04:28:51.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-29T08:52:31.000Z (4 months ago)
- Last Synced: 2024-10-25T22:53:57.973Z (20 days ago)
- Language: JavaScript
- Size: 4.04 MB
- Stars: 36
- Watchers: 2
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Slides
[Google Slides](https://docs.google.com/presentation/d/1nS69MFKWgzd9vWWPybAe9NhjUtX9IoazB1MHutCdsI8/edit?usp=sharing)
# Prerequisites
- [Node.js 20.11.0 and npm 10.2.4](https://nodejs.org/en/download)
I recommend using a version manager like [Volta](https://volta.sh/), [asdf](https://asdf-vm.com/) or [nvm](https://github.com/nvm-sh/nvm).
- [Git](https://git-scm.com/downloads)
- A code editor
I recommend [Visual Studio Code](https://code.visualstudio.com/Download).
- A [Cloudflare account](https://dash.cloudflare.com/sign-up/workers)
Sign up and verify your email address.
# Getting started
1. Clone the workshop repository with Git:
```sh
git clone https://github.com/GregBrimble/react-server-components-workshop.git
```
Or if you prefer using SSH:
```sh
git clone [email protected]:GregBrimble/react-server-components-workshop.git
```
1. Open this folder in your favorite code editor. I recommend VSCode.
1. Install the dependencies using `npm`:
```sh
npm install
```
1. Log in with Wrangler:
```sh
npx wrangler login
```
1. Populate the `CLOUDFLARE_WORKERS_SUBDOMAIN` value in `./constants.ts`. You can find your subdomain in the sidebar of [the Cloudflare Workers & Pages dashboard](https://dash.cloudflare.com/?to=/:account/workers-and-pages).
1. Get started with the first exercise in `./exercises/1-client-side-rendering`. Check out the `README.md` file for instructions!
## Contents
1. [Client-side rendering](./exercises/1-client-side-rendering)
1. [Intro to Workers](./exercises/2-intro-to-workers)
1. [Server-side rendering](./exercises/3-server-side-rendering)
1. [RSC data loading](./exercises/4-rsc-data-loading)
1. [RSC compiler](./exercises/5-rsc-compiler)
1. [Loading data from a database](./exercises/6-loading-data-from-a-database)
1. [Smart Placement](./exercises/7-smart-placement)
## What's next?
**Thank you for participating in this React Server Components 2024 workshop! I hope you found it valuable and had fun. If you're interested in being notified when my next workshop will be available, please [sign up here](https://bit.ly/taking-off-sign-up)!**
After you've completed this workshop, there is much more you can explore with React Server Components and the Cloudflare Developer Platform. Some other topics of interest may include:
- [Server Actions](https://react.dev/reference/react/use-server#server-actions-in-forms)
- Module splitting
- Lazy-loading on the client (and server!)
- [AsyncLocalStorage](https://github.com/wintercg/proposal-common-minimum-api/blob/main/asynclocalstorage.md)
- [Cloudflare Durable Objects](https://developers.cloudflare.com/durable-objects)
- [Flight ESM fixture](https://github.com/facebook/react/tree/main/fixtures/flight-esm)
- [Aviation](https://twitter.com/aviationdotapp)