Fullstackopen Summary Part 1

This post contains the summary of what I learnt in fullstackopen (Part 1)

• Creating a react app

npm create vite@latest appname -- --template react

• Running vite application

npm run dev

• Export Component

[...create component...]
export default ComponentName

• Import component

import ComponentName from '../component.jsx'

• What to render
  The react app cannot render objects

• How to render objects
  using the map function:
  

object.map(item => <p>{item}<p>)

works if each item in the object is not an object itself as well.

• this keyword
  this tells us about what context it was called from.
  if this is called from a reference, it becomes a global object, and if it is called within a function, this refers to the scope of the function.

• Using props
  Pass it through the component:
  

<Component prop={variable} />

Using props on the components:

const Component = ({prop1,prop2}) => {
...
}

• Updating object

const items = {
right: 0,
left: 0
}
const updated = {
...items,
left: items.left + 1
}