mainReactCourse.txt

FAKE SEPARATION OF CONCERNS
Template in the logic > logic in the Template
    You get a real language (JavaScript for the better and the worse), linter, static types, reusable logic, etc.
    Angular templates (and others) are just weird DSLs to do stuff that you can do in JS
Separating technologies is not separating concerns.
    // https://www.youtube.com/watch?v=x7cQ3mrcKaY
    You want to decoupled your views from your data management, your UI from your domain, HTML/JS
    You'll actually see that often with this separation you'll have to duplicate value/logic
        e.g. values defined in CSS and JS (colours, see vamos themes), or both your template and logic having an impact on your template


React building block is the Component. It declares the DOM it should render. Declare is the word,
you don't work on the DOM in an imperative way: you say what you want, React makes it work for you.


Example: intro, don't focus on the detail/syntax

----End intro----

A component can render other components or directly HTML elements (see react-native that render native code).
A component is a function, so an HTML element needs to be one too. They work the same way, they can be nested
and configured (a component takes props, as an HTML element does <input value="awesome" />).

Calling functions with props, children and stuff works well, but not that readable (purely subjective).
There's a lot of way to make it, React.createElement, hyperscript, or simply, JSX.
See https://facebook.github.io/react/docs/react-without-jsx.html

LET'S DIG IN
How to write JSX
It's just a JS function call. Once you realise that, how to do stuff, what you can do gets logical
    evaluating a value => {}
    conditional => ternary (or bool && val)
    loop => Iterable.map
    keys
    partials => function calls/other component
    html props are a bit different => some exceptions (className) and camelCase
    bool default to true
Example


COMPOSITION
// https://www.youtube.com/watch?v=wfMtDGfHWpA
No need for inheritance => the gorilla and the banana problem
Compose several functions together to create more powerfull/specialised ones (remember, a component is a function)
Example
Advice about composition
    In react, if your JSX is severely nested, it probably shows that you're not using enough
    components. You should compose components together

STYLING
Example

Practice -> intro

Component API
default props
propTypes
children        it's just a prop
hooks
    useState
        - how it works => updates the state and triggers a rerender of the component
        - It's about render, not used in render, does not belong in the state
        - what if is the component is unmounted ? State is lost
        - parent's state is kept => lift the state up
    useReducer
        - more powerful than useState. Use whatever you want, it doesn't really matter
        - useState is implemented with useReducer
        - each useState trigger a rerender, so it might be better to use a useReducer when there
            are several things related in the state
    useEffect
        - Doing side-effects -> Anything that is not purely related to rendering


Reconciliation
The great thing with React is that your app is entirely rerendered all the time. You app is a tree (use whiteboard).
When you rerender you app (or a section of the tree, with a local useState for instance)
React tries to see if an element can simply be updated (or ignored).
For instance, if there was a div and a component in it, now a p and the same component, the component is recreated from scratch
Same thing with keys in list.