diff --git a/SUMMARY.md b/SUMMARY.md index e83ea34e..ae582ce9 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -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) diff --git a/courses/frontend/react/README.md b/courses/frontend/react/README.md index 3f9e60a1..29c94055 100644 --- a/courses/frontend/react/README.md +++ b/courses/frontend/react/README.md @@ -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) | diff --git a/courses/frontend/react/week5/assignment.md b/courses/frontend/react/week5/assignment.md index 894b0aaa..78cff5e7 100644 --- a/courses/frontend/react/week5/assignment.md +++ b/courses/frontend/react/week5/assignment.md @@ -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 diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index 39335524..6521bfab 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -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 @@ -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 +### Advanced: Server Functions & API Routes + +#### 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 `
`s on the internet that can be sent to a server for processing (we could call them "server functions"!) +- Explain how attaching a Server _Function_ to a (form) `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 specialization)_](/courses/backend/node/README.md) ## 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 a good fit 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 ones 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 probably 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 @@ -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