PROGRAMERO

O uso de eventos no React é muito parecido com o que já fazemos em html, a diferença fica por conta da nomeação, que deve ser em "camelCase" e no luga de texto sempre é passado uma função como manipulador. Além disso, para evitar o comportamento padrão de um evento, antes era informado o "return false", e no React devemos sempre usar o "preventDefault". Evento padrão "< button onclick="salvar(); return false; > Salvar < / button >" Evento React "< button onclick="{salvar}" > Salvar < / button > function salvar(e) {     e.preventDefault(); } Passagem de argumentos Como não poderia de deixar de ser, é perfeitamente possível passar argumentos para os manipuladores de eventos, podemos usar "arrow functions" ou "bind": "< button onclick={(e) = > this.remover(id, e)} > Remover < / button >" "< button onclick={this.remover.bi...

Uma das características no desenvolvimento com o React é a capacidade de construir componentes, capazes de serem reutilizados em diversas partes do sistema. Os componentes nos permitem dividir o sistema em pequenas partes, reutilizáveis e independentes, proporcionando uma grande capacidade de reutilização e isolamento, evitando replicação de código e dores de cabeça com a substituição ou mesmo manutenção em partes do sistema. Em resumo, componentes são rotinas Javascript, capazes de receber propriedades e devolver elementos HTML. Exemplo Vamos agora ao exemplo, criaremos uma aplicação e a seguir iremos desenvolver um componente que irá representar um cliente, com nome e endereço: Criando a aplicação npx create-react-app componentes-propriedades Criando o novo componente Vamos criar o componente cliente, que retornará informações do mesmo, a ideia aqui é retornar uma "div" com um parágrafo com o nome e um texto com o endereço. No diretório ...

Diretiva que tem como objetivo controlar o escopo de variáveis, prevenindo que as variáveis sejam criadas de forma global, ou seja, que as variáveis possam impactar em escopos que não lhes dizem respeito, em resumo ele bloqueia declarações sem o "var". Para usar essa diretiva basta incluir a "string" 'use strict' no inicio do escopo que se deseja controlar, vamos aos exemplos: (function(){   var teste1 = 'abc';   teste2 = 'def'; })(); console.log(teste1); //gera erro pois não pertence a esse escopo console.log(teste2); //mostra o valor pois pertence ao escopo global Para prevenir o problema: (function(){   'use strict';   var teste3 = 'abc';   teste4 = 'def'; //aqui já ocorre o erro })(); with Esse comando cria um escopo que nos permite acessar propriedades de um objeto de forma direta. Por convenção seu uso é desaconselhável por poder gerar problemas com outras ...

O objeto "arguments" é uma variável local disponível em todas as funções, ele representa todos os parâmetros de uma função, e funciona como se fosse um "array", permitindo acessar os parâmetros por meio de índice, ele não pode ser considerado um "array" pois não possui todas as funcionalidades que um "array" convencional possui. Exemplo function testando(arg01, arg02) {   return arguments; } testando('valor 01'); testando('valor 01', 'valor 02'); testando('valor 01', 'valor 02')[0]; No exemplo acima temos uma função que retorna "arguments", onde podemos ver todos os valores dos parâmetros informados, inclusive podemos acessar esses valores por meio de índices.

Em Javascript o objeto "this" pode assumir valores distintos de acordo com o local onde é invocado, e agora veremos alguns exemplos. Métodos de objetos O "this" aparece em métodos de objetos como uma referencia ao objeto principal, ou seja, ele representa o próprio objeto que possui o método: var pessoa = {   nome: 'Teresa',   recuperarNome: function() { return this.nome; } }; No exemplo acima "this" representa o objeto "pessoa", logo possui acesso a propriedade "nome". Em funções Em funções o objeto "this" pode ter dois valores, quando em uma função que não pertence a um objeto "this" retorna o objeto global, que no caso no browser é o "window", já o outro valor é a referencia ao objeto instanciado: Função que não pertence a um objeto function funcaoTeste() {   return this; } No exemplo acima temos como resultado da função o objeto global do br...

A partir de agora vamos ver exemplos de como usar nosso código Javascript em páginas web, hoje veremos as possibilidades para isso e também aproveitaremos o momento para exemplificar a questão do escopo de variáveis. Estrutura minima do html Sabemos que a estrutura base para uma página web são as tags "html", dentro dela "head" e "body", nosso código Javascript deve estar na tag "script". A tag "script" pode ser incluída tanto dentro da tag "head" quanto dentro da tag "body", a diferença é que, quando nosso código estiver na "head" ele será carregado antes do conteúdo da página e quando nosso código estiver no "body" primeiro serão carregados os elementos "html" para em seguida nosso Javascript ser carregado. Como podemos imaginar o forma mais indicada atualmente é a inclusão no "body", pois caso nossos scripts sejam "pesados" eles não impactarão no car...

Os métodos que serão vistos hoje possuem como finalidade reduzir os valores do "array" para um único valor, onde todos os elementos são percorridos para podermos realizar algum processamento. reduce Reduzir um "array" para um único valor acumulado, esse método não altera o valor original do "array", a função desse método pode ter quatro parâmetros, sendo eles o valor acumulado, o item atual, o índice e o próprio "array". Além da função é possível passar outro parâmetro para o método, que representa o valor inicial para a redução, no exemplo abaixo faremos a redução de um "array" de números e outro de texto: Exemplo com números var numeros = [1,2,3,4,5]; var reduceNum = numeros.reduce(function(acumulado, item, index, array) {   return acumulado + item; }, 0); O resultado será 15, pois ocorre uma soma conforme o quadro abaixo: Iteração Acumulado Item Resultado (novo acumulado) 1 0 1 1 2 1 2 ...