04 React IV

• Learning objectives for the week

Topics covered in this week are:

1. CSS 101 - Flexbox, Grid, and CSS Variables
2. CSS Modules
3. Light and dark theming with CSS Modules
4. The UseContext hook
5. Architecture of a full stack application
6. Deployment with Github Actions and Caddy

Reviews in groups

We will review the code from the previous week. In particular the Friday Exercise. Make sure you have your code ready for review.

Exam questions that could be relevant for the review:

1. Show and explain the concept of promises in JavaScript (think of the fetch API)
2. Provide examples for different ways of doing conditional rendering.
3. Show and explain of what a JWT token is composed
4. Describe and show the process og login using JWT. What problem does it solve?
5. Show and explain an example of sub-routing.
6. Describe conceptually what Same Origin Policy (SOP) and Cross Origin Ressource Sharing (CORS) are, and how we avoid getting CORS errors when fetching data from your API.

Styling in React with CSS Modules.

• General intro to applying CSS with React (6:22)
• The Best Way To Style Components In React (4:34)
• An Interactive Guide to CSS Grid

• Styling the timer application with CSS Modules

• Practicing styling with CSS Modules and error handling

Deployment with Github Actions and Caddy

Read through the exercise for the day - but wait with the implementation until the class. Get an overall understanding of the steps involved.

See this video about the linux command rsync:

• rsync is a Based File Sync Program

• Deploying React Frontend Applications

• API Hub Vision Website