useState
: create a state variable with a setter that triggers the UI to rerenderuseEffect(callback, [...dependencies])
: callback is only run when one of the dependencies change
A single page application (SPA) is a website that interacts with the user by dynamically mutating the current page instead of loading entire new pages. The goal is faster transitions.
React (and Angular, Svelte, Vue, etc.) make SPA easy to write because we don't have to deal with mutations.
Why are we doing this? Can you think of any features that only work with SPA?
Two key ingredients: fetch and Client-Side routing.
Using single page, we'd lose key functionalities like:
These issues can all be solved with Client-Side Routing
window.location.href
to choose what to display on the page.history.pushState
APIReact Router will handle all of this for you.
Follow the tutorial
Create a Google Calendar clone that shows your timetable (use the link to your ICS file). You might find libraries such as MUI and FullCalendar useful.
Your app should use React Router.
Here are some tips for better DX
We will implement a Signal-based version of React's hooks. Formally, It will be different in at least two aspects (under the hood, it's as different as can be).
state
is a function.