Skip to content

Add content to week 5 of React module #228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adamblanchard merged 9 commits into from
Nov 25, 2025
Merged

Add content to week 5 of React module #228

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a4b44fc
feat(react): Remove TODO: comment from assignment, it looks good!
te-online Nov 5, 2025
d018f4c
feat(react): Fill blank sections for Server Functions and Vercel chap…
te-online Nov 5, 2025
d720192
fix(react): Lesson plan -> Session plan
te-online Nov 5, 2025
e79d292
fix(react): Prettier issue
te-online Nov 5, 2025
853a120
fix(react): Linter complaining about duplicate headlines
te-online Nov 5, 2025
502a603
updated gitbook sidebar and fixed links
adamblanchard Nov 10, 2025
0cfdaef
fix(react): Remove "optional" prefix from server functions section
te-online Nov 17, 2025
aee228f
fix(react): Adjust wording in Week 5 session plan
te-online Nov 17, 2025
4f38292
feat(react): Week 5: Add link to backend course where it's mentioned
te-online Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,26 @@
- [Session Plan](courses/frontend/advanced-javascript/week4/session-plan.md)
- [Assignment](courses/frontend/advanced-javascript/week4/assignment.md)
- [React](courses/frontend/react/README.md)
- [Week 1](courses/frontend/react/week1/README.md)
- [Preparation](courses/frontend/react/week1/preparation.md)
- [Session Plan](courses/frontend/react/week1/session-plan.md)
- [Assignment](courses/frontend/react/week1/assignment.md)
- [Week 2](courses/frontend/react/week2/README.md)
- [Preparation](courses/frontend/react/week2/preparation.md)
- [Session Plan](courses/frontend/react/week2/session-plan.md)
- [Assignment](courses/frontend/react/week2/assignment.md)
- [Week 3](courses/frontend/react/week3/README.md)
- [Preparation](courses/frontend/react/week3/preparation.md)
- [Session Plan](courses/frontend/react/week3/session-plan.md)
- [Assignment](courses/frontend/react/week3/assignment.md)
- [Week 4](courses/frontend/react/week4/README.md)
- [Preparation](courses/frontend/react/week4/preparation.md)
- [Session Plan](courses/frontend/react/week4/session-plan.md)
- [Assignment](courses/frontend/react/week4/assignment.md)
- [Week 5](courses/frontend/react/week5/README.md)
- [Preparation](courses/frontend/react/week5/preparation.md)
- [Session Plan](courses/frontend/react/week5/session-plan.md)
- [Assignment](courses/frontend/react/week5/assignment.md)
- [Final Frontend Project](courses/frontend/final-project/README.md)

- [Backend](courses/backend/README.md)
Expand Down
14 changes: 7 additions & 7 deletions courses/frontend/react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

In this class, trainees will learn how to use [React](https://react.dev/) to build web applications

| Week | Topic | Preparation | Homework | Lesson plan |
| ---- | --------------------------------------------------- | ------------------------------------- | ----------------------------------- | ------------------------------------- |
| 1. | [Rendering a Single Component](./week1/README.md) | [Preparation](./week1/preparation.md) | [Assignment](./week1/assignment.md) | [Session plan](week1/session-plan.md) |
| 2. | [Understanding State Management](./week2/README.md) | [Preparation](./week2/preparation.md) | [Assignment](./week2/assignment.md) | [Session plan](week2/session-plan.md) |
| 3. | [Hooks and Fetching Data](./week3/README.md) | [Preparation](./week3/preparation.md) | [Assignment](./week3/assignment.md) | [Session plan](week3/session-plan.md) |
| 4. | [Context, Routing & Libraries](./week4/README.md) | [Preparation](./week4/preparation.md) | [Assignment](./week4/assignment.md) | [Session plan](week4/session-plan.md) |
| 5. | [Hello Next.js & Vercel](./week5/README.md) | [Preparation](./week5/preparation.md) | [Assignment](./week5/assignment.md) | [Session plan](week5/session-plan.md) |
| Week | Topic | Preparation | Homework | Session plan |
| ---- | --------------------------------------------------- | ------------------------------------- | ----------------------------------- | --------------------------------------- |
| 1. | [Rendering a Single Component](./week1/README.md) | [Preparation](./week1/preparation.md) | [Assignment](./week1/assignment.md) | [Session plan](./week1/session-plan.md) |
| 2. | [Understanding State Management](./week2/README.md) | [Preparation](./week2/preparation.md) | [Assignment](./week2/assignment.md) | [Session plan](./week2/session-plan.md) |
| 3. | [Hooks and Fetching Data](./week3/README.md) | [Preparation](./week3/preparation.md) | [Assignment](./week3/assignment.md) | [Session plan](./week3/session-plan.md) |
| 4. | [Context, Routing & Libraries](./week4/README.md) | [Preparation](./week4/preparation.md) | [Assignment](./week4/assignment.md) | [Session plan](./week4/session-plan.md) |
| 5. | [Hello Next.js & Vercel](./week5/README.md) | [Preparation](./week5/preparation.md) | [Assignment](./week5/assignment.md) | [Session plan](./week5/session-plan.md) |
4 changes: 1 addition & 3 deletions courses/frontend/react/week5/assignment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# Assignment

TODO: Proposal: Verify if this would be ok?

- Deploy a Next.js app in which you cover the exercises from Week 5 to Vercel
- Deploy a Next.js app, in which you cover the exercises from Week 5, to Vercel
- Make sure you push to a new GitHub repository and that it is public
- Connect the repository to Vercel and fix any potential deployment issues
- Share the working deployment URL in the team Slack channel
49 changes: 42 additions & 7 deletions courses/frontend/react/week5/session-plan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,14 @@
- Discuss when to use SSR (dynamic data, personalization, etc.)
- Discuss when to use SSG (static content, blogs, documentation, etc.)

#### Server Components for SSR

- Explain how [Server Components](https://react.dev/reference/rsc/server-components) can speed up load times by directly sending HTML to the browser
- Introduce the `"use server"` directive, allowing React components to be rendered on the server

### When to Use Client vs. Server Components?

- Explain how Next.js distinguishes client and server components
- Re-iterate how Next.js distinguishes client and server components (`"use server"` and `"use client"`)
- Illustrate how these fit into the SSR and SSG concepts

### Introduction to Next.js App Router
Expand Down Expand Up @@ -64,23 +69,53 @@
- Explain how to access various router properties (push, replace, etc.)
- Demonstrate programmatic navigation using `router.push` and `router.replace`

### Optional Advanced: Server Functions (or Server Actions) & API Routes
### Optional Advanced: Server Functions & API Routes
Copy link
Contributor

@adamblanchard adamblanchard Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What makes this optional?

I don't think i'm the biggest fan of optional content, since it's not very explicit to a mentor whether they should cover it or not.

I'd either commit to it, or write clear expectations underneath to explain why or why not to teach it. But i lean to the former option, if possible.

Copy link
Contributor Author

@te-online te-online Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One argument for optional content is that time during a lesson can fly. Or there can be time left in the end. Both happened to me before. In that case an optional topic is nice.

But I agree with the sentiment. The program should feel complete and ideally shouldn't have variables.

Perhaps I was lacking confidence making it required, because it is kind of a backend topic. I removed the optional prefix. I think that's the best "fix" for now.

You will not be impressed though doing a repository-wide search for "optional" 😅

Copy link
Contributor

@adamblanchard adamblanchard Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, sorry to hold you to that standard then, if we have done it in so many other places! Appreciate your perspective on it, that's a fair point. Let's move it forward for now anywayz.


#### Server Functions

- Explain Server Functions _(previously "Server Actions")_ as a mechanism to run JavaScript code on the server that hosts the website
- Discuss how this is different from running JavaScript in the user's browser
- Reference [the React docs for Server Functions](https://react.dev/reference/rsc/server-functions) demonstrating how to use them

#### Server Components

- Discuss how Server Components allow the use of Server Functions inside the component
- Explain that client components can use Server Functions by importing them from a file with the `"use server"` directive

TODO: …
#### Server Actions

- Introduce "Server Actions" as a specific type of Server Function
- Provide context by mentioning plain old `<form>`s on the internet that are historically sent to a server for processing (we could say a "server function"!)
- Explain how attaching a Server _Function_ to an `action` makes it a Server _Action_

#### API Routes

- Explain how Next.js supports Server Actions and Server Components as React features
- Introduce API routes as a concept from the backend side of web development
- Provide an overview of [Route Handlers](https://nextjs.org/docs/app/getting-started/route-handlers) and how they allow to create an API route that returns JSON
- _(The concept of APIs is covered in detail in the backend specialisation)_

## Vercel

### Introducing Vercel & Good Use Cases

TODO: …
- Introduce Vercel as the company behind Next.js, as well as a provider of cloud infrastructure
- Explain how Vercel's hosting options allow developers to host Next.js applications with very little effort
- Highlight that hosting on Vercel is perfect for a prototype or portfolio website built with React and/or Next.js

### Connecting a GitHub Repository With Vercel

TODO: …
- Demonstrate in the browser how a **public** GitHub repository from your account can be connected to Vercel and deployed with the click of a button
- Illustrate one way to get started with Vercel by installing the Vercel CLI globally `npm -g vercel`
- Show logging in to Vercel using `vercel login` and using ones GitHub account
- Show how one can deploy a local folder with a Next.js app using the `vercel deploy` CLI command

### Limitations of Vercel

TODO: …
- Mention that Vercel apparently works best for hosting Next.js applications or static websites
- Discuss how other frameworks are supported, but that the focus is likely on Next.js
- Mention that knowledge about DNS, domains, npm, dependencies etc. is not required, but useful when managing a site on Vercel
- Highlight that Vercel is well-suited for production applications, but that prices can apparently vary a lot based on usage

## Exercises

Expand Down Expand Up @@ -151,7 +186,7 @@ TODO: …
- Does it show the time?
- [Refer to the docs when in doubt](https://nextjs.org/docs/app/getting-started/updating-data#creating-server-functions)

#### API Routes
#### Trying out API Routes

- Create a Hello World API route at `/api/hello` that returns the following JSON

Expand Down