Week4 solutions

[bhas]

This PR contains the solutions to the exercises we did during our React week 4 session May 4th.

Exercise 1 - Context

Refactored the theme system to remove prop drilling. isDark and toggleTheme were previously passed as props from App to all the other components.

Remember when working with contexts we need to do 3 things:

1. create the context in a new file with createContext(...)
2. Provide the context using <MyContext.Provider value={...}> in the App.jsx
3. Use the context in any component that needs the value by using useContext(...)

---

Exercise 2 - Routing

Added React Router so each page lives at its own URL. The navbar links and sub-nav links are all functional, and the active link is highlighted.

Remember:

• <NavLink> is used when we want custom styling the menu indicating the active page
• <Link> when we don't need any custom styling.
• <a> technically works too, but it causes the entire page to load which is both slow and makes us loose all temporary state such as values in fields.

---

Exercise 3 - Material UI

Replaced all plain HTML form elements and layout primitives with MUI components across the application. Also includes both bonus tasks.

Remember:

• Component libraries such as Material UI gives fully functional components for common UI needs out-of-the-box. It requires very little code to start using, but it can also be harder to customize to your desired look.
• CSS frameworks such as TailwindCSS helps you style components easier and faster, but does not provide any new components. It is only meant to help you write CSS faster.
• Building everything yourself is also fine as it gives you full control and reduced complexity of adding external packages. However, more often than not you will see significant development speed using one of the above.

Before vs After

3.1

3.2

3.3

3.4

3.6

[bhas]

Here I add toggleTheme as a part of the context so that components also have a way to change the theme

[bhas]

We can freely put NavLinks and Links wherever we want on our page. So we can have several menus and sub menus

[bhas]

Placing a <Route path="*" ...> at the end will match for any url that did not match one of the above routes.

[bhas]

Running npm install <package-name> for instance npm install @mui/material @emotion/react @emotion/styled will automatically add these lines to package.json so you don't have to modify the file yourself.

[bhas]

Material UI uses its own context to provide the theme for all UI components