# Notes

## Props

Props stands for properties.
A system for passing data from a parent component to a child component. The goal is to customize or configure the child component.

Props are objects so the fields have to be called as methods: `props.author` for instance.

It is possible to use `defaultProps` to instantiate the default behaviour of a component.

* In case of `not a function` type of error when passing props, you need to turn the props into an arrow function for this to work.

* It is possible to refector elements of a props by destructuring the props, so:
```js
const images = props.images.map((image) => {
        return <img key={image.id} src={image.urls.regular} alt={image.description} />
    })

```
would become:

``` js
const images = props.images.map((description, urls, id) => {
    return <img key={id} src={urls.regular} alt={description} />
})
```

## Functional components

Used anytime to show simple content to the user. (the card for example -- create
JSX pass some props and return it).

Alternative writing:
```js
const SearchBar = () => (
    <div></div>
)
```

## Class components

For complex content, respond to user input, network request. Can use the state
input.

Class components are not classes in terms of Ruby or Python, they are a Javascript Class. They also must be extended to a subclass (react component). And they must define a `render` method that returns some amount of JSX.

When components are reloaded they are also reloading the child components.gt

## State

### Rules

* Only usable with class components (not always true)
* state =/= props
* `State` is a JS object that contains data relevant to a component
* Updating  `state` on a component causes the component to almost instantly rerender
* `State` must be initialized when a component is created
* `State` can *only* be updated with the `setState` function

Video 61: refactorisation on state and constructors, you can remove the whole constructor by passing a state to the class. => what is the state in a react application? Code is passed to Babel and understand the code that is compiled and extends + implements the constructor function.
``` js
     constructor(props) {
         super(props)
         this.state = { lat: null, errorMessage: '' }
     }
```
* always try to have one statement in the render method, in case it isn't possible try to use a helper function with the complex cases and returning to the render method. see video 70

* `onInputChange`: In that case:
``` js
    <input type="text" onChange={this.onInputChange}>
```
The function `onInputChange` is not called as a function (`onInputChange()`) but as a callback so the function is not run everytime the component is rendered but when the component is called.
Other functions: `onClick`, `onSubmit` and `onChange`

* replace handlers by arrow functions, insead of:

``` js
    <input type="text" onChange={this.onInputChange}>
```

you get:

``` js
    <input type="text" onChange={(e) => console.log(e.target.value)}>
```

# React Ref

* gives you direct access to DOM elements
* we create refs in the constructor, asssigne them to instance variables and then pass to a particular JSX element as props

```js
  constructor(props) {
        super(props)

        this.imageRef = React.createRef()
    }
```

# Redux
* state management library
* makes creating complex application easier
* not required to create a react app
* not explicitly designed to work with React
* the redux cycle:
    * action creator
    * action
    * dispatch
    * reducers
    * state
