#VemProReact #4

#VemProReact

#VemProReact #3

Arrow Functions

const App = () => (
  <div className="App">
    <Header>
      <Logo />
      <Text />
      <Link />
    </Header>
  </div>
);
const Header = (props) => <header className="App-header">{props.children}</header>;
const Link = () => (
    <a 
        className="App-link" 
        href="https://reactjs.org" 
        target="_blank" 
        rel="noopener noreferrer"
    >
        Learn React
    </a>
);

#VemProReact

#VemProReact #3

Header.js

const App = () => (
  <div className="App">
    <Header>
      <Logo />
      <Text />
      <Link />
    </Header>
  </div>
);
const Header = (props) => (
    <header className="App-header">
        {props.children}
    </header>
);

#VemProReact

#VemProReact #3

#Desafio!

const Logo = (props) => {
    let items = []

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

    return (
        <div>
            {items}
        </div>
    )
};

Logo.defaultProps = {
    repeat: 1
}

Logo.js

#VemProReact

#VemProReact #3

#Desafio!

.App-logo {
  animation: App-logo-spin infinite 10s linear reverse;
  height: 40vmin;
  pointer-events: none;
}

.App-logo:nth-child(even) {
  animation-direction: normal;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Logo.css

#VemProReact

#VemProReact #3

#Desafio!

const App = () => (
  <div className="App">
    <Header>
      <Logo repeat={50} />
      <Text />
      <Link />
    </Header>
  </div>
);

App.js

#VemProReact

#VemProReact #3

E o tal do Destructuring Assignment?

#VemProReact

Destructuring Assignment

  • É um tipo de declaração de variáveis
  • Permite extrair propriedades específicas de objetos
  • Permite extrair itens específicos de arrays
  • Permite a definição de valores padrão

Exemplos:

const { children } = props;
const [ first, second ] = [ 1, 2 ];
const { limit = 50 } = config;
const [ first, second = 2 ] = [ 1 ];

#VemProReact

Destructuring Assignment

Como declarar variáveis com destructuring assignment?

#VemProReact

Destructuring Assignment

Considerando a declaração abaixo:

Seria, simplesmente, envolver o children entre "{}" e remover o ".children" do objeto props:

const { children } = props;

Na prática:

Nós simplesmente criamos uma variável children e atribuímos o valor de props.children a ela.

const children = props.children;

#VemProReact

Destructuring Assignment

Agora, considerando a declaração abaixo:

Seria, simplesmente, envolver as variáveis first e second entre "[]" e atribuir o array diretamente:

const [first, second] = [ 1, 2, 3, 4, 5 ];

Na prática:

Nós simplesmente criamos duas variáveis (first e second) e atribuímos o valor do primeiro e segundo item do array à elas.

const numbers = [ 1, 2, 3, 4, 5 ];
const first = numbers[0];
const second = numbers[1];

#VemProReact

state

  • Nos permite criar componentes mais inteligentes
  • Ao contrário das props, podemos modificar seus valores
  • É privado, ou seja, só "existe" dentro do componente
  • É totalmente controlado pelo próprio componente
  • Inicialmente, só usaremos state dentro de componentes de classe

Na teoria:

#VemProReact

state

É um objeto JavaScript com várias propriedades, que tem um funcionamento específico e algumas regras

Na prática:

Exemplo:

import React from 'react';

class Text extends React.Component {
  state = {
    code: "src/App.js"
  }

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

    return <p>Edit <code>{code}</code> and save to reload.</p>;
  }
}

export default Text;

#VemProReact

state

Como definir o state de um componente?

#VemProReact

state

Adicionamos um objeto state dentro da classe e antes do método render:

class Text extends React.Component {
  state = {}

  render() {
class Text extends React.Component {
  state = {
    code: "src/App.js"
  }

  render() {

Adicionamos as propriedades desejadas com seus valores default:

E para utilizar:

<p>Edit <code>{this.state.code}</code> and save to reload.</p>

#VemProReact

state

Como atualizar o state de um componente?

#VemProReact

state

A função setState nos permite fazer isto

this.setState({
    code: "src/App.js"
})

Basta chamá-la (dentro do método render, por exemplo) informando um objeto com a propriedade a ser alterada e seu novo valor

Ou, informando uma nova função com o state atual como parâmetro, que retorna um novo objeto com a propriedade alterada:

this.setState((state) => ({
  code: state.code + 'BLABLA'
}));

#VemProReact

Event handlers

  • Nos permite realizar ações baseados nas interações do usuário
  • São muito semelhantes aos eventos nativos (DOM)
  • São nomeados com camelCase
  • Recebem uma função JavaScript

Exemplos:

const Button = () => <button onClick={() => { console.log('Clicked') }}>Click here!</button>;
class Button extends Component {
    clickHandler = () => {
        console.log('Clicked');
    }

    render() {
        return <button onClick={clickHandler}>Click here!</button>
    }
}

#VemProReact

Event handlers

Como tratar um evento no componente?

#VemProReact

Event handlers

Declaramos uma função para realizar o tratamento:

const clickHandler = () => {
  console.log('Click');
}

Informamos ao componente/tag qual será o evento "escutado" e atribuímos a função:

<Button onClick={clickHandler}>Click here!</Button>

Simplesmente isto!

Eventos suportados pelo React:

https://pt-br.reactjs.org/docs/events.html

#VemProReact

Eventos

Por falar em eventos...

Neste sábado (18/05), vai rolar o 14º Encontro - ReactJS Florianópolis 

Bora lá? o/

https://www.meetup.com/pt-BR/ReactJS-Floripa/events/260886872/

Sugestão do nosso colega softplayer Eduardo Kraus Nunes

#VemProReact

Dúvidas?

#VemProReact

Dever de casa!

  • Converter para classe o componente Logo
     
  • Remover a prop "repeat" do desafio e recriá-la como uma propriedade do estado do componente, com o valor padrão = 1
     
  • Criar dois botões na tela, um para incrementar e outro para decrementar o repeat. Implementado as funções necessárias
     
  • Estudar o conceito de Spread Operator e trazer o que entendeu para o nosso próximo encontro

#VemProReact

Obrigado!

Made with Slides.com