.ts
, .tsx
We shall see that using TypeScript will give us very helpful Intellisense.
Why should we use JS frameworks?
To deal with mutations: You need to read the entire code to know what a node represents.
Why React?
What is React?
.innerHTML
etc.)
npm create vite@latest <project_name>
.React
as a framework and TypeScript
as a variant.npm install
in the newly created directory.Set up React using the instructions above
Here is a simple example of React code. Components are simply function, and props
is an object that contains the component's attributes.
The HTML you see in the return clauses in in reality syntactic sugar called JSX.
A tool called Babel compiles it to Javascript.
camelCase
class -> className
)style
is an objectCreate a CVLine
component, and use it to create your CV
This is how your component should be used like this:
useState
hookuseState:
for variables that affect the UI. Provides a setter function that triggers a rerender to update the DOM.
variable
will not update the UI, you need to use the setter function if you want the change to be reflected.useState
is an example of React hookWhy do we need setCount
?
I highly encourage you to have a look at other frameworks. Svelte is known for being extremely readable.
Create a todo app with React
Props (properties) generalize HTML attributes.
Components are rerendered at every prop change
Write a component that shows a clock in the hh:mm:ss format and a counter that increases every second.
Unless you've done some React before, your first attempt will most likely be wrong. Can you explain why?
setInterval
function.useEffect
hook.useEffect
hook
callback
is called every time one of the dependencies changes. It needs to be a synchronous function.
If dependencies
is an empty array, the callback will be executed once (on mount).
Newer versions of React introduce Suspense
to deal with async
Implement the following:
Use the PokéAPI.
Implement the word game wordle
We'll implement together a signal implementation of useEffect
and useState
.
This implementation has a lot of advantages because we need not follow the rules of hooks, and can create effects with asynchronous functions.