PROGRAMERO

Como visto anteriormente, o fluxo de informações no React é unidirecional, partindo sempre do componente pai para os filhos, logo um componente pai desconhece o que acontece com o estado presente nos seus componentes filhos. Então como é que nós fazemos quando precisamos que com que um componente filho produza ou modifique um valor para que esse possa ser utilizado pelo componente pai? Bom a resposta para essa pergunta esta no titulo da postagem, resolvemos essa questão com a elevação do "state". A elevação do "state" em tese é algo relativamente simples, basta mudar o estado do filho para o pai, logo o filho não mais trabalhará com seu estado, ele receberá o estado do pai por meio das "props" e quando for necessário alterar o estado o componente filho deve chamar um método do pai, que também estará presente em "props". Exemplo No exemplo abaixo criaremos um componente "filho" que oferece uma lista de opções de acordo com

No React, utilizamos listas e chaves para renderizar vários componentes de uma vez, onde as listas nos fornecem os dados necessários para criar os componentes e as chaves identificarão de forma unica cada um deles. Quando falamos em listas estamos nos referindo a qualquer "array" que será percorrido por meio de uma estrutura de repetição, um "map" por exemplo. Já quando falamos em uma "chave" nos referimos a uma "string" que irá identificar de forma unica o componente visual sendo criado. Essa "chave" ajuda o React a identificar esses elementos, permitindo controlar e identificar alterações. As chaves são identificadas pela propriedade "key", sendo essa propriedade reservada exclusivamente ao React, se for necessário recuperar a mesma deve-se criar uma nova propriedade no elemento. Outro ponto importante sobre chaves é que devemos sempre dar preferencia para valores que representem de forma unica os itens de nosso

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

Dando continuidade aos métodos de "array" veremos hoje como iterar para processar itens e filtrá-los: map Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array" essa função será executada uma vez, tem como finalidade retornar um novo "array" com base nos itens do "array" original, sem alterá-lo, isso nos garante a possibilidade de processar os valores tratando os mesmos de alguma forma: var numeros = [1,2,3,4,5,6]; var map = numeros.map(function(item, index, array) {   return item + 10; }); filter Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array

Nesse post veremos alguns métodos que nos permitem realizar iterações em nossos "arrays", esses métodos devem ser utilizados para percorrer os itens, diferente do que temos feito até agora com os laços. forEach Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array" essa função será executada uma vez, tem como finalidade substituir os laços comuns vistos até aqui, já que o "forEach" além de mais elegante é mais performático: var numeros = [1,2,3,4,5,6,7,8]; numeros.forEach(function(item, index, array) {   console.log(item); }); every Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber um parâmetro, sendo ele o item atual, sua finalidade é retornar um valor booleano baseado

Hoje veremos dois métodos muito poderosos dos "arrays" que poderão facilitar muito nossa vida no futuro, esses dois métodos são responsáveis por retornar partes especificas de um "array" e remover ou incluir itens de posições especificas de um "array".  slice Retorna um "array" "recortado" com base nos índices informados, é possível informar ao método o índice de inicio e o de término da manipulação, também é possível passar valores negativos para que o "recorte" ocorra no final, é importante salientar que esse método não altera o "array" original: var numeros = [1, 2, 3, 4, 5, 6, 7]; numeros.slice(1);  retorna o array [2, 3, 4, 5, 6, 7] numeros.slice(1, 3); retorna o array [2, 3]  numeros.slice(-2); retorna o array [6, 7]  splice Altera um "array" de forma definitiva, onde o primeiro parâmetro desse método é o índice de inicio, o segundo é a quantidade a ser eliminada, opciona

Dando continuidade a nossa exploração aos recursos que os "arrays" nos proporcionam, hoje veremos mais quatro métodos interessantes, onde seremos capazes de converter o conteúdo para texto, concatenar itens e outros "arrays", incluir e remover itens do inicio do "array". toString A exemplo do "join" o "toString" converte os valores de um "array" em texto, separando cada um por virgula, a grande diferença aqui é que o "toString" não permite informar um novo separador: var numeros = [1, 2, 3]; numeros.toString(); concat Inclui um novo valor ao "array" e retorna o resultado final desse processo, também é possível concatenar outros "arrays", isso sem alterar o valor original do "array": numeros.concat(4); numeros.concat([10, 100, 1000]); unshift Adiciona um item no inicio do "array" e retorna o total de itens do mesmo, anteriormente vimos o "pu

Hoje veremos alguns métodos básicos para se trabalhar com "arrays", capazes de incluir e remover itens do final do "array", transformar os itens de um "array" em uma "string", inverter a ordem dos itens de um "array" e ordenar de forma alfabética um "array". push Adiciona um item ao final do array, esse método retorna o total de itens do "array" atualizado: var frutas = ['uva', 'manga', 'laranja']; frutas.push('maracujá'); pop Remove um item do final do "array", esse método retorna o item removido: frutas.pop(); join Juntar itens de um "array" retornando uma "string", é possível indicar qual o separador desejado, se nada for informado é assumido a virgula: frutas.join(); frutas.join(' - '); reverse Inverte os itens de um array, atenção pois esse método realmente altera a posição dos itens dentro do array.

Nesse post veremos alguns métodos interessantes de objetos do Javascript, que nos permitem manipular propriedades, verificar a herança, transformar um objeto em texto e converter um texto em objeto. Object.keys Cria um "array" com os nomes das propriedades de um objeto: var animal = { nome: 'Totó', idade: 12}; var propsAnimal = Object.keys(animal); Object.isPrototypeOf Indica se um objeto é um protótipo de outro, ou seja, se um objeto (parâmetro do método) herda características de outro (usando o método): var cachorro = Object.create(animal); cachorro.buscaGraveto = true; cachorro.isPrototypeOf(animal); animal.isPrototypeOf(cachorro); JSON.stringify Transforma um objeto em texto: var animalTxt = JSON.stringify(animal); JSON.parse  Transforma uma string (JSON) em um objeto: var outroAnimal = JSON.parse(animalTxt); JSON JSON (JavaScript Object Notation - Notação de Objetos JavaScript) é uma formatação leve de troca

Operador unário que consegue nos dizer qual é o tipo de dados de uma variável, logo, ao testar com o "typeof" cada tipo de dados temos como resultado: Valores primitivos typeof undefined => undefined typeof true => boolean typeof 99 => number typeof NaN => number typeof 'Teste' => string Objetos diferentes de funções typeof {} => object typeof [] => object typeof null => object (aqui temos um conhecido erro de implementação do Javascript) Funções typeof functio() {} => function Exemplos Como vimos o "typeof" não é indicado para testar valores do tipo "object", "array" e "null", já que todos eles nos retornam "object", por isso é mais comum utiliza-lo com os tipos primitivos referentes a número, texto e booleano: (typeof 1234); (typeof 1234 ? 'Número' : '?'); (typeof 'Xisto'); (typeof 'Xisto' ? 'Texto' : &#

No Javascript um "array" é na verdade um objeto, que possui suas propriedades e métodos, independente de seu conteúdo, e hoje falaremos de uma propriedade para recuperar o total de itens e de um método para incluir novos elementos. Propriedade length É a propriedade de um "array" que nos indica a quantidade de itens que existem atualmente nesse "array", com essa informação poderíamos, por exemplo, percorrer todos os elementos de um "array" por meio de um "loop": var arr = [ 10, 20, 30, 40, 50, 'Teste', true]; var pos = 0; while (pos < arr.length) {    console.log(arr[pos]);    pos++; } Método push Método usado para incluir elementos no final de um "array", sendo esses elementos números, textos, objetos, outros arrays ou até mesmo funções: arr.push(999); arr.push('Novo teste'); arr.push( { pessoa: 'Teresa'} ); arr.push( function primo(x) { return x % 2 === 0; }

Vimos no post sobre funções que uma função pode possuir parâmetros e retornar valores, e na ocasião trabalhamos apenas com tipos primitivos da linguagem, e hoje veremos como receber e retornar arrays e objetos. Retorno Uma função que retorna um tipo mais complexo como um array ou um objeto pode nos ajudar, dentre outras coisas, a evitar a declaração de variáveis globais, também pode diminuir a complexidade de uma operação, vejamos alguns exemplos: function nomes() { return ['maria', 'teresa', 'flávia']; }; (essa rotina nos retorna uma lista de nomes); nomes()[1]; (como o retorno é um array conseguimos acessar um elemento conhecido por meio de seu indice); function recuperarPessoa() { var pessoa = { nome: 'Filisteu', idade: 89, sobre: function(){ return pessoa.nome + ', ' +  pessoa.idade + ' anos'} }; return pessoa; }; (essa rotina retorna um objeto, sendo que esse objeto possui propriedades e métodos); recuperarPessoa().n

Antes de mais nada precisamos ter em mente que uma variável é uma área em memoria capaz de armazenar por tempo determinado um valor, sendo que esse valor pode ser de diferentes tipos, de acordo com a necessidade da aplicação. As variáveis são identificadas por um nome, sendo por meio desse nome que os valores são manipulados. Agora que temos uma ideia do que vem a ser uma variável vamos começar a testar, como dito anteriormente, nossas variáveis podem ter tipos específicos e no Javascript realizamos essa declaração a partir da atribuição do valor, ou seja, ao colocar um valor em uma variável estamos dizendo que essa variável é do mesmo tipo do valor sendo atribuído, logo, quando atribuímos um numero para uma variável essa passa a ser do tipo numérico. Agora aos exemplos (na duvida de como testar, veja aqui uma opção simples), primeiro iremos declarar uma variável: Se analisarmos a imagem anterior vemos a palavra reservada "var", que é quem indica a criação d