learning react

todo

roadmap

<ul>
	{bookList.map(book => <Book title={book.title} />)}
</ul>

state

hooks

Functions that start with use are called hooks. useState is one.
other Hooks are:

data flow

to pass data between components you use props. Parent component passes props to child components. if these props data change, state changes and trigger a reactive refresh / component rerender.

function Header(props) {
    console.log(props) // { title: "React 💙" }
}```
since it is an **object** you can do **object destructuring**: 
```jsx
function Header({ title }) {
    console.log(title) // "React 💙"
}```
* parent components import child components. pass in custom parameters as props.

---
* React runs a virtual DOM, 

when state of a component changes, that components gets flagged for a possible rerender. this is done with the virtual DOM, the virtual DOM is compared with the real DOM with a 'reconsciliation' algorithm to determine whether the page has to be updated or not.
DOM representation of a page's html as a hierarchical tree of objects. this structure allows devs to access and manipulate elements of the web page using languages like JavaScript.

## life cycle effects.
these are functions that are triggered when a component mounts, props or status updates or component unmounts.

These are managed with the `React.useEffect()` hook. 
- first arg is a function that runs when the component mounts, 
- if it ever runs again is determined with the second argument, which is an array of 'trigger' variables, that when their value changes, trigger the function call. 
- finally, you can return a function inside the function that will run when the component unmounts. (yikes).

## Context, application state
when app gets too big and you are passing state 5 leves deep, you use app state.
use React Context or the Redux lib for this.

Context lets a parent component provide data to the entire tree below it.

example:
![Pasted image 20230818020730.png](/img/user/00-09%20System/09%20resources/Pasted%20image%2020230818020730.png)
* redux is a library that helps manage state. seems to be less useful nowdays bc of the release of the React Context API. in most cases devs used to use redux to pass data around their app's componenets. This can be done by React Context and no need to learn extra concepts that Redux introduce.
if you need to change or update state in many different parts of your app, there are many Redux competitors that don't require learning new concepts. consider **zutand**, jotai, recoil.

context works similar to CSS property inheritance. no matter how deep, will an element will inherit that property unless some other DOM node in the middle overrides it. In react the only way to override some context coming from above is to wrap children into a context provider with a different value.

https://react.dev/learn/passing-data-deeply-with-context#use-cases-for-context
- I could use context to pass the currently logged in user.
- Routing
### steps to implement context
1. Create and export it with `export const MyContext = createContext(defaultValue)`
2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
3. Wrap children into `<MyContext.Provider value={...}>` to provide it from a parent.

```jsx 
//Section.js
import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

reducers

https://react.dev/learn/scaling-up-with-reducer-and-context

rendering lists

use the map() function to transform an array into an array of <li> elements.

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

responding to events / event handling

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

my notepad

react.dev/learn
a React component are JS functions that return markup. Components must be named starting with a capital letter.

in JSX you have to close tags like <br>
components can't return multiple JSX tags. you have to wrap them in a shared parent, like a div or an empty <>...</> wrapper.

to specify a CSS class name you use className="", it works just like the class attribute.

{} to 'escape' into javascript.

conditional rendering

naming conventions

inmutability

by default when the state of a parent component changes, the parent as well as children re-render. even child components that weren't affected by the change.

special props

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

jsx attributes

refs

when you want components to remember something but don't want to trigger a re-render.

import {useRef} from 'react';
const ref = useRef(0);

useRef return an object like this: {current:0}
so you can access the current value of your ref with ref.current this value is mutable.

you would often use ref when your component needs to "step outside" React and communicate with external APIs.

best practices:

the most common use is to access a DOM element.
You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a ref attribute in JSX, like <div ref={myRef}>, React will put the corresponding DOM element into myRef.current.Once the element is removed from the DOM, React will update myRef.current to be null

// uses refs to focus a text input
import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

custom hooks

useDebounce

for making an input wait
if the debounce isn't retriggered before the timeout, it returns a value after a certain amount of time.
useful for like search input useEffects that trigger a http request. using the debounce value it would trigger the effect after the user finished typing instead of after every keystroke.