learning react

my notepad

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

cheat sheet

https://github.com/typescript-cheatsheets/react

courses

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

common project structure

before it was common to have react single page applications, where you serve a single index.html file that loads all the React js and render everything client side.
now it is more common to use Nextjs (or other meta frameworks) to route URLs and render server side.

create-react-app project structure:

concepts

state

hooks

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

you cannot call hooks inside conditional or loop, after a conditional return statement, in event handlers, in class components, inside functions passed to useMemo, useReducer or useEffect.

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
React context and app state

## 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 =>

  • {product.title}
    • );

    return (

    ); ```

    event handling

    full list here

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

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

    conditional rendering

    that dude at Hearst kept recommending using the ternary operator instead of && and linking a blog post what bug it prevents.

    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

    refs reffer to actual dom elements (not virtual dom).
    most common use case is 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>
    </>
  );
}

    API

    useful for defining components

    ForwardRef

    allows your component to expose a DOM node as a reference to the parent. Used alongside useRef.
    you create a ref in parent component and if you want a child component that uses that ref (have the thing that the ref will point to) you use refForwarding by wrapping the component in React.forwardRef()

    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.

    Libraries

    These are compatible with React

    forms
    Forms in JS

    querying