Vai Na Web
O Vai na Web é um movimento de alta tecnologia e impacto social que amplia as capacidades humanas e requalifica a força de trabalho para encarar os desafios da Indústria 4.0.
Eventos no React
Revisão Arrays
Revisão Funções
Debugando funções
Manipulando eventos
Agenda
arrays
O JavaScript fornece um tipo de dados especificamente para armazenar sequências de valores.
const frutas = ['pera', 'uva', 'maçã']arrays
const frutas = ['pera', 'uva', 'maçã']
console.log(frutas[0])
// 'pera'
0
1
2
arrays
const frutas = ['pera', 'uva', 'maçã']
console.log(frutas.length)
// 3arrays
const frutas = ['pera', 'uva', 'maçã']
console.log(frutas.indexOf('uva'));1
arrays
let frutas = [ 'pera', 'uva', 'maçã'];
let legumes = [ 'batata', 'cenoura', 'repolho' ];
// Junta tudo!
let cesta = frutas.concat(legumes);
// ['pera', 'uva', 'maçã', 'batata', 'cenoura', 'repolho']
1
2
3
4
0
5
arrays
let amor = [ "nala", "uni", "safira", "tibirico",
"leleco", "mia" ];
let frase = amor.join();
// nala,uni,safira,tibirico,leleco,miaarrays
let doguinhos = ['Nala', 'Uni']
doguinhos.push('Safira')
// ["Nala", "Uni", "Safira"]
Vamos praticar!
funções
"Uma definição de função nada mais é do que uma definição normal de uma variável, na qual o valor recebido pela variável é uma função."
— Eloquente Javascript
No Javascript!
funções
function mensagem() {
return 'Oláaa'
};
mensagem();funções
const mensagem = function(texto) {
return texto;
};
mensagem('Oláa')Funções
function saudacao(pessoa) {
console.log("Olá " + pessoa);
}
saudacao("Kamile");
console.log("Tchauzinho");funções
const mensagem = function(texto) {
return texto;
};
console.log(mensagem('Oláa'));funções
const soma = function(x, y) {
return x + y;
};
console.log(soma(12));Vamos praticar!
Debugando funções
console.log(❤)Debugando funções
const soma = function(numero) {
return 2 + 1;
};
const divide = function(numero) {
console.log('numero', numero)
const resultado = 2 / 1;
console.log('resultado', resultado)
return result;
};
soma(2)
divide(2)Manipulando eventos
<button onclick="abrirModal()">
Abrir modal
</button>html
<button onClick={abrirModal}>
Abrir modal
</button>react
Entendendo o Bind
class Botao extends React.Component {
constructor(props) {
super(props);
// Essa sintaxe garante que o `this` seja vinculada ao this.
// Por padrão, o JS não faz isso para você. :)
this.clicar = this.clicar.bind(this);
}
clicar() {
console.log('foi clicado!')
}
render() {
return (
<button onClick={this.clicar}>
Clica em mim!
</button>
);
}
}
Arrow funtions
class Botao extends React.Component {
// Essa sintaxe também garante que o `this` seja vinculada ao this.
clicar = () => {
console.log('foi clicado!');
}
render() {
return (
<button onClick={this.clicar}>
Clique em mim!!
</button>
);
}
}
feedback é um presente
referências
Até a próxima!
Manipulando eventos no React
By Vai Na Web
