#VemProReact #JEP #4

#VemProReact

#VemProReact #JEP #3

Logo.js

const [repeat, setRepeat] = useState();

useEffect(() => {
  setRepeat(1);
}, []);

useEffect(() => {
  console.log('repeat updated');
}, [repeat]);

#VemProReact

#VemProReact #JEP #3

...
const [countPlus, setCountPlus] = useState(0);
const [countMinus, setCountMinus] = useState(0);
...

...
const handleClickPlus = () => {
  setRepeat((repeat) => repeat + 1);
  setCountPlus((count) => count + 1);
}

const handleClickMinus = () => {
  setRepeat((repeat) => repeat - 1);
  setCountMinus((count) => count + 1);
}
...

Logo.js

#VemProReact

#VemProReact #JEP #3

...
<div className="App-logo-buttons">
  <button disabled={repeat === 6} onClick={handleClickPlus}>
    Logo +
  </button>
  <button disabled={repeat === 1} onClick={handleClickMinus}>
    Logo -
  </button>
</div>
<div>
  <p><b>Logo +</b> button was clicked {countPlus} times</p>
  <p><b>Logo -</b> button was clicked {countMinus} times</p>
</div>
...

Logo.js

#VemProReact

#VemProReact #JEP #3

O que são Template Strings?

#VemProReact

Template Strings

É uma string "turbinada"
Permite interpolar variáveis
Permite concatenar valores
Permite quebrar a string em várias linhas

Exemplos:

`Olá,
Tudo bem?`

`Olá, ${name}!`

`Olá, eu sou o ${first_name}${last_name}!`

#VemProReact

Live Code!

🤘

#VemProReact

Revisão

O que é React?

#VemProReact

Revisão

O que é JSX?

#VemProReact

Revisão

O que diferencia uma arrow function de uma function expression?

#VemProReact

Revisão

Pra que servem as props?
Como podemos modificá-las?

#VemProReact

Revisão

O que é Destructuting Assignment?

#VemProReact

Revisão

Como criamos um state em um componente?

#VemProReact

Revisão

Como tratamos os eventos em uma aplicação React?

#VemProReact

Revisão

Pra que serve a hook useEffect?

Quais são os principais casos de uso dela?

#VemProReact

Revisão

O que é Spread Operator?

#VemProReact

FLUX

O que é FLUX?

#VemProReact

FLUX

Foi criado pelo Facebook
É uma arquitetura para aplicações web
É um modelo de fluxo dados
É dividido, basicamente, em: action, dispatcher, store e view

Na teoria:

#VemProReact

FLUX

Na prática:

Action é simplesmente um objeto que define o que será modificado

Dispatcher é o intermediador de tudo, define o que, onde e como será alterado

Store é o que define a estrutura e os valores dos nossos dados, ou seja, é onde os dados estão de fato

View é onde será exibido qualquer dado para o usuário

#VemProReact

FLUX

Na prática:

Com FLUX, temos um fluxo de dados unilateral:

No mundo React, o view nada mais é do que um componente

#VemProReact

FLUX

O mais importante!

Você não vai precisar implementar o FLUX!

Isto é um conceito muito importante para se entender como funciona sua aplicação React

Não tenha medo! Agora tudo parece muito abstrato, mas no fim, tudo faz sentido!

#EuAgarantio

#VemProReact

Dúvidas?

#VemProReact

Bayon

Framework React desenvolvido pela UNJ
Usado em praticamente todos os projetos
Todos podem contribuir
Mantido oficialmente pelo time Netuno
Hoje é composto por vários projetos

http://bayon.softplan.com.br/

#VemProReact

Bayon

O nome Bayon é referente a um conjunto de templos no Camboja, que se chamam Bayon.

A ideia por trás da escolha desse nome é que esses templos são formados por várias rochas que geram templos iguais, trazendo a ideologia de componentização.

#VemProReact

Bayon Commons

O principal projeto do Bayon
Baseado no Material UI
Uma lib de componentes
É o projeto que utilizaremos com mais frequência

http://bayon.softplan.com.br/commons/

#VemProReact

Atividade!

Instalar o @bayon/commons no projeto seguindo a documentação
Substituir o button de adicionar por um Button primary
Substituir o button de remover por um Button default
Remover o componente Text, todos os p (se existirem) e substituí-los pelo Typography
Remover o componente Link e substituí-lo por um Button subtle
Exibir um Toast de erro quando o repeat chegar a 6 e desabilitar o botão de adicionar

#VemProReact

Correção da atividade!

yarn.lock

<Button variant="primary" disabled={repeat === 6} onClick={handleClickPlus}>
  Logo +
</Button>

Logo.js

<Button disabled={repeat === 1} onClick={handleClickMinus}>
  Logo -
</Button>

#VemProReact

Correção da atividade!

App.js

<Typography lineHeight={2} size={16}>
  <b>Logo +</b> button was clicked {countPlus} times
</Typography>
<Typography lineHeight={2} size={16}>
  <b>Logo -</b> button was clicked {countMinus} times
</Typography>

Logo.js

<Typography lineHeight={3} size={18}>
  Edit <code>src/App.js</code> and save to reload.
</Typography>

<Button href="https://reactjs.org" variant="subtle">
  Learn React
</Button>

#VemProReact

Correção da atividade!

Logo.js

<Button variant="primary" disabled={repeat >= 6} onClick={handleClickPlus}>
  Logo +
</Button>

<Toast
  open={repeat === 6}
  type="error"
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  message="O valor máximo permitido é 6!"
/>

#VemProReact

Obrigado!

#VemProReact #JEP #4

By Softplan Planejamento e Sistemas

#VemProReact #JEP #4

Template strings; Live code; Revisão; FLUX; Bayon; @bayon/commons

Softplan Planejamento e Sistemas

dxdanielxavier

#VemProReact #JEP #4

#VemProReact #JEP #4

More from Softplan Planejamento e Sistemas