# React

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

| Week | Topic                                                                                                                                    | Preparation                                                                                                                       | Homework                                                                                                                        | Session plan                                                                                                                        |
| ---- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| 1.   | [Rendering a Single Component](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week1)   | [Preparation](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week1/preparation) | [Assignment](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week1/assignment) | [Session plan](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week1/session-plan) |
| 2.   | [Understanding State Management](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week2) | [Preparation](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week2/preparation) | [Assignment](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week2/assignment) | [Session plan](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week2/session-plan) |
| 3.   | [Hooks and Fetching Data](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week3)        | [Preparation](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week3/preparation) | [Assignment](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week3/assignment) | [Session plan](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week3/session-plan) |
| 4.   | [Context, Routing & Libraries](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week4)   | [Preparation](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week4/preparation) | [Assignment](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week4/assignment) | [Session plan](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week4/session-plan) |
| 5.   | [Hello Next.js & Vercel](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week5)         | [Preparation](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week5/preparation) | [Assignment](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week5/assignment) | [Session plan](https://program.hackyourfuture.dk/~/revisions/n2RGk5og1pvUUWu5OSlj/course-content/frontend/react/week5/session-plan) |

## Module Learning Goals

By the end of this module, you will be able to:

* [ ] Understand when and why to use React to build modern web applications
* [ ] Build user interfaces using reusable, component-based architecture
* [ ] Manage data and interactivity using props, state, and hooks
* [ ] Handle user input, forms, and events in React applications
* [ ] Load and display data from external APIs
* [ ] Structure complex, multi-page applications with routing and shared state
* [ ] Understand what a Component Library is, along with the pros and cons
* [ ] Build, deploy, and share a production-ready React app using Next.js