Learning react gists

https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs

https://favicon.io/emoji-favicons/bread/
https://zedbi.azurewebsites.net/View-a-websites-color-scheme#!url=www.badi.com&css=https%3A%2F%2Fd1v3slut4s2mfy.cloudfront.net%2F0d3f0cc189602fedba492526607b10ebc7bc8678%2Fstyles.css&ignore=0

***Destructuring 
props.data.title
const { data } = props;
data.title

const { data: { title, href, thumbnail }} = props;

***Initial setup styles.css
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}


overflow: auto- scroll horizontal

***egghead react course 
<button onClick={() => setState({eventCount: state.eventCount + 1})}>⚛️</button>

 <button onClick={increment}>⚛️</button>
 
 function increment() {
    setState({eventCount: state.eventCount + 1})
};


We could do onMouseOver - every time I mouse over the button, we're going to increment that event. There's also even onFocus - Every time I focus on the input, it gets incremented. 

Inputs are a little bit unique in that they provide an onChange event. Every single time the input changes, immediately we'll get this function called. 

If we want to update the state.username, then we're going to need what the value of the input is.

We're going to say onChange={event => setState({username: event.target.value})}. That'll be referencing the inputNode.value. That'll get the value from the input node.

<input onChange={event => setState({username: event.target.value})} />


class NameForm extends React.Component {
    handleSubmit = event => {
        event.preventDefault()
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name: 
                    <input type="text" />
                </label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}


handleSubmit = event => {
    event.preventDefault()
    console.log({target: event.target})
    console.log(event.target[0].value)
}


Props vs State:

https://kentcdodds.com/blog/props-vs-state/

https://codesandbox.io/s/props-state-practice-cx1fg

Redux yo lo aprendí con Dan Abramov, separando incluso la práctica de React (Redux funciona sólo también):


https://egghead.io/courses/getting-started-with-redux

https://egghead.io/courses/building-react-applications-with-idiomatic-redux

Te puede ir bien para props y state hacer un ejercicio de componentes padre-hijo, ahora cuando llegue a casa te preparo uno que envie props en las dos direcciones (de fuera a dentro, de dentro a fuera, y haga set de state con props)

https://codesandbox.io/s/props-state-practice-cx1fg

Input es un input de tipo "controlled" que se dice, es decir, el value del input viene controlado por el estado del componente

El estado inicial de Input viene definido por props del componente App, el padre

Y a su vez hay variables que se mandan desde el hijo hacia arriba, al padre. Estas props son:

onInputChange   (se utiliza para cambiar el estado de App para title y así cambiar el texto del h1

Es un playground para que juegues con los 2 componentes. Si el código lo ves claro te voy a pedir que me hagas un Counter 🤓

Counter es un componente que tiene 2 botones, uno para + otro para -

Y por props quiero que pases el número hacia App y lo renderices de tal forma que el Counter modifique ese estado

Luego lo complicaremos pasando el state a Redux

Te buscaré también artículos de teoría para eso. Le pegaré un repaso a lo que hay por Egghead. Este por ejemplo explicaba muy bien la base y luego entraba en detalle en patterns propios de React:

https://egghead.io/courses/the-beginner-s-guide-to-react

https://egghead.io/courses/advanced-react-component-patterns


***Safe state updates

ARRAY:
removing an element from an array: 

- bad
state.pop()

- good 
state.filter(item => item !== "hi")

adding and element to an array

- bad
state.push("hi")

- good 
[...state, 'hi']


replacing an element in an array

- bad
state[0] = 'hi'

- good
state.map(el => el === 'hi' ? 'bye' : el)


OBJECT:
updating a property in an object

- bad
state.name = 'Sam'

- good 
{...state, name: 'Sam'}

adding a property to an object

- bad 
state.age = 30

- good 
{...state, name: 'Sam'}

removing a property from an object 

- bad 
delete state.name

- good 
{...state, age: undefined}
_.omit(state, 'age')

_.omit from lodash - a very popular library for working with objects and arrays