#VemProReact #5

#VemProReact

#VemProReact #4

Logo.js

import { Component } from 'react'

class Logo extends Component {
    render() {
        const { repeat } = this.props;

        let items = []
    
        for (let i = 0; i < repeat && i < 6; i++) {
            items.push(<img key={i} src={logo} className="App-logo" alt="logo" />)
        }
    
        return (
            <div>
                {items}
            </div>
        )
    }
};

#VemProReact

state.repeat

class Logo extends Component {
    state = {
        repeat: 1
    }

    render() {
        const { repeat } = this.state;

        let items = []
    
        for (let i = 0; i < repeat && i < 6; i++) {
            items.push(<img key={i} src={logo} className="App-logo" alt="logo" />)
        }
    
        return (
            <div>
                {items}
            </div>
        )
    }
};

#VemProReact #4

#VemProReact

incrementar / decrementar

...
// Exemplo que funciona para este caso
<button
    disabled={repeat >= 6}
    onClick={() => this.setState((() => ({ repeat: repeat + 1 })))}
>
    Add Logo
</button>
// Melhor prática
<button
    disabled={repeat <= 1}
    onClick={() => this.setState((({ repeat }) => ({ repeat: repeat - 1 })))}
>
    Remove Logo
</button>
...

#VemProReact #4

#VemProReact

Mas o que é Spread Operator mesmo?

#VemProReact #4

#VemProReact

Spread Operator

É uma sintaxe
Faz a atribuição dinâmica de valores
Forma mais prática de trabalhar com arrays/objetos

Na teoria:

#VemProReact

Spread Operator

Na prática:

É um trecho do código que parece não fazer sentido e começa com "..."
Na maioria das vezes, vai estar dentro de um array "[]" ou objeto "{}"
Extrai o conteúdo do objeto que segue os "..."

Exemplo:

[...array, 3, 4, 5]

{
    ...myObj,
    prop: newValue
}

#VemProReact

Como usar o spread operator?

Spread Operator

#VemProReact

Considerando a declaração abaixo:

Seria, simplesmente, declarar um novo array, contendo array1 e array2, precedidos por "...":

const array3 = [...array1, ...array2]; // [1, 2, 3, 4]

const array1 = [1, 2];
const array2 = [3, 4];

const array3 = array1.concat(array2); // [1,2,3,4]

Spread Operator

Observe a diferença:

const array3 = [...array1, ...array2]; // [1, 2, 3, 4]

const array3 = [array1, array2]; // [[1, 2], [3, 4]]

#VemProReact

Imagine o seguinte:

Seria, simplesmente, receber o objeto dentro dele mesmo (com "...") e sobrescrever a prop desejada:

const user = {
    first_name: 'Daniel',
    last_name: 'Xavie',
    age: 26
};

user.last_name = 'Xavier';

user.first_name + user.last_name + (user.age) // Daniel Xavier (26)

Spread Operator

Para objetos, seguimos a mesma ideia...

user = {
    ...user,
    last_name: 'Xavier'
};

user.first_name + user.last_name + (user.age) // Daniel Xavier (26)

#VemProReact

Component Lifecycle

Existem 3 métodos principais:

componentDidMount()
componentDidUpdate()
componentWillUnmount()

Nos permite manipular o componente em determinadas situações

São métodos da classe Component (React)

#VemProReact

componentDidMount()

É executado quando o componente é montado na tela!

Exemplo:

class MyComponent extends Component {
    state = {
        name: ''
    }    

    componentDidMount() {
        console.log('MyComponent mounted');

        this.setState({ name: 'Daniel' });
    }

    render() {
        const { name} = this.state;        

        return <p><b>My name is:</b> {name}</p>
    }
}

HTML:

console:

#VemProReact

componentDidUpdate()

É executado a cada vez que alguma prop/state do componente é alterado!

Exemplo:

        ...
    componentDidUpdate() {
        console.log('MyComponent updated');
    }

    render() {
        ...

HTML:

console:

#VemProReact

componentDidUpdate()

Dica MUITO IMPORTANTE:

Se você fizer um setState dentro do componentDidUpdate, sem qualquer tipo de condição, vai acontecer um loop "infinito"

Como o React é "bonzinho", ele vai interromper a execução e te mostrar um belíssimo erro:

#CuidadoComOcomponentDidUpdate()

#VemProReact

componentWillUnmount()

É executado quando o componente é desmontado!

Exemplo:

        ...
    componentWillUnmount() {
        console.log('MyComponent unmounted');
    }

    render() {
        ...

HTML:

console:

#VemProReact

SASS / LESS

São pré-processadores de CSS

Não adicionam nada novo no CSS, simplesmente nos permite escrever CSS de forma mais prática

Podem ser comparados ao JSX, ou seja, nos permitem escrever código numa sintaxe mais prática.
Que depois será transpilado em um CSS puro (aquele que o browser entende).

#VemProReact

SASS

Na prática:

.App-logo-header button:disabled {
  box-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.App-logo-header button:first-of-type {
  background-color: #4caf50;
}

.App-logo-header button:last-of-type {
  background-color: #f44336;
}
...

...
.App-logo-header button:hover {
  box-shadow: none;
}

.App-logo-header button:disabled {
  box-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.App-logo-header button:first-of-type {
  background-color: #4caf50;
}

.App-logo-header button:last-of-type {
  background-color: #f44336;
}

Considere que esta declaração CSS, confusa e repetitiva:

#VemProReact

SASS

.App-logo-header {
  margin: 30px auto;
  display: inline-grid;
  grid-template-columns: 200px 200px;
  column-gap: 30px;

  button {
    padding: 6px 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    border: none;
    border-radius: 6px;
    box-shadow: 0 3px 6px 1px #000;
    cursor: pointer;
    outline: none;

    &:hover, &:disabled {
      box-shadow: none;
    }
    ...

    ...
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:first-of-type {
      background-color: #4caf50;
    }

    &:last-of-type {
      background-color: #f44336;
    }
  }
}

Poderia ser simplesmente assim:

#VemProReact

SASS

Como usar SASS num projeto React?

#VemProReact

SASS

Instalamos o pacote node-sass: