Pular para o conteúdo principal

Postagens

Mostrando postagens de novembro, 2019

React - Eventos

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

React - Componentes e propriedades

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 &quo

JS - use strict

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