#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:
#VemProReact
Eventos
Por falar em eventos...
Neste sábado (18/05), vai rolar o 14º Encontro - ReactJS Florianópolis
Bora lá? o/
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!
#VemProReact #4
By Softplan Planejamento e Sistemas
