Estrutura de Dados com JavaScript: Lista Encadeada

Listas encadeadas são estruturas de dados feitas de grupos de nós que juntos representam uma sequência. Você notará que a Fila e a Pilha foram criadas usando a ideia básica de uma lista encadeada. No entanto, eles têm regras especiais que os tornam diferentes em funcionalidade.

function ListaEncadeada() {
    let contador = 0;
    let head = null;

    this.GetCount = function(){
        return countador;
    }

} 

Nossa lista encadeada terá 6 métodos adicionais: DisplayAll (), DisplayAt (índice), AddFirst (dados), Add (dados, índice), RemoveFirst (), RemoveAt() .

DisplayAll():

Descrição:

O nome já diz tudo. Retorna um array com os dados ou, se vazio, retorna nulo.

this.DisplayAll = function() {
    // se está vazio
    if (head === null) {
        return null;
    } else {
        //senão, percorre a lista e a coloca em um array.
        let arr = new Array();
        let atual = head;

        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.próximo;
        }
        return arr;
    }
}

DisplayAt():

Descrição:

Como o método PeekAt (indice) anterior da Fila, é exibido em um índice específico ou, fora dos limites, ele retorna null.

this.DisplayAt = function(indice) {
    // verifique se há valores fora dos limites
    if (indice > -1 && indice < contador) {
        let atual = head;
        let i = 0;

        // não fui eu, é da nczonline (veja fonte).
        // É uma maneira diferente de implementar o FOR que estamos usando
        // e eu queria que todos tivessem a chance de conhecê-lo.
        while (i++ < indice) {
            atual = atual.proximo;
        }

        return atual.dado;
    } else {
        return null;
    }
}

AddFirst():

Descrição:

Adiciona à frente da lista. Se você está se perguntando, frente é onde o índice é 0 e referenciado pelo cabeçalho.

this.AddFirst = function(dado) {
    // Cria um novo nó
    let node = {
        dado: dado,
        proximo: head
    };

    head = node;
    contador++;
}

Add()

Descrição:

Adiciona um item à lista na posição especificada.

this.Add = function(dado, indice) {
    // se o índice escolhido for 0, faça o método AddFirst (dado).
    if (indice === 0) {
        this.AddFirst(dado);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {
        let node = {
            dado: dado,
            proximo: null
        };

        let anterior;
        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        anterior.proximo = node;
        node.proximo = atual;

        contador++;
    } else {
        alert("fora de alcance");
    }
}

RemoveFirst()

Descrição:

Remove o primeiro item.

this.RemoveFirst = function() {
    // se não há itens na lista, retorna nulo
    if (head === null) {
        return null;
    } else {
        let out = head;
        head = head.proximo;

        if (contador > 0) {
            contador--;
        }

        return out.dado;
    }
}

RemoveAt()

Descrição:

Remove um item de um índice específico.

this.RemoveAt = function(indice) {
    if (indice === 0) {
        return this.RemoveFirst(indice);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {

        let atual = head;
        let anterior;
        let i = 0;

        // encontre a localização correta
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        // pule o item para remover
        anterior.proximo = atual.proximo;

        // diminuir o comprimento
        contador--;
    } else {
        return null;
    }

    // retorna o valor
    return atual.dado;
}
  • DISPLAYALL():
  • DISPLAYAT(INDICE):
  • ADDFIRST(DADO):
  • ADD(DADO,INDICE):
  • REMOVEFIRST():
  • REMOVEAT(INDICE):

Gostou deste artigo? Comente abaixo!

Novidades Angular 8.3

A alguns dias saiu a release 8.3.12 do Angular. Segundo alguns tweets, o time focou em algumas novidades como: um novo comando no CLI, correção de bugs e ajustes no novo render que deve entrar como default na versão 9, o Ivy.

Caso tenha interesse em saber mais sobre esse compilador, eu recomendo a leitura do seguinte artigo: Angular: Conhecendo Ivy.

Bom, mas quais foram os novidades dessa versão?

Novo layout

Caso você já tenha atualizado o seu CLI e criado um novo projeto , deve ter notado o novo layout dessa versão.

Além do novo layout, note que nessa etapa nos temos algumas sugestões de próximos passos.

Deploy

Nessa versão foi adicionado um novo comando no CLI, o ng deploy. Agora com apenas alguns comandos no terminal, e possível publicar o nosso app no Azure, Firebase, Zeit, Netlify, ou GitHub.

Em um próximo artigo eu irei criar um passo a passo de como publicar o nosso utilizando esse novo comando do CLI.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/novidades-angular-8-3

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 8.3: publicando projeto com o Angular CLI em 5 passos

Veja nesse artigo como publicar o seu projeto no GitHub pages em 5 passos

Dando continuidade ao meu artigo anterior: novidades do Angular 8.3, hoje eu irei demonstrar como publicar um projeto no GitHub pages, utilizando o novo comando que foi adicionado na versão 8.3 do CLI, o ng deploy.

Para os próximos passos será necessário estar com a versão 8.3.12 do Angular CLI no seu computador. Caso essa não seja a sua versão, abra um terminal e execute o comando abaixo:

npm install -g @angular/cli

Com a versão do CLI atualizada, vamos aos 5 passos de criação e deploy do projeto.

1- Passo: Criação de um novo projeto

Abra um terminal no seu computador e execute o seguinte comando para criação de um novo projeto:

ng new (nome do seu projeto)

2- Adicionando pacote ghpages

Com o projeto criado, volte no seu terminal, navegue até ele e execute o comando abaixo:

ng add angular-cli-ghpages

3- Criação de um novo repositório no GitHub

Com o projeto criado e o pacote importado, vamos criar um novo repositório no GitHub. Para isso, siga os passos abaixo:

Acesse o link: https://github.com/, vá até o canto superior e clique no icone do lado do simbolo de notificações:

Em seguida clique em new repository:

Agora volte no seu terminal e execute os comandos abaixo para versionar ele no GitHub:

git add *
git commit -m "first commit"
git remote add origin https://github.com/{seu usuario}/{seu repositorio}.git
git push -u origin master

4- Alterando a base url do projeto

Como o projeto será publicado em um subdiretório, será necessário alterar a base url dele. Para isso, vá até o arquivo index.html do seu projeto e altere ele conforme abaixo:

<base href="/nome do seu repositório no git/">

5-Deploy do projeto

Com todos os passos anteriores OK, execute o comando abaixo no seu terminal para publicar o projeto:

ng deploy

Esse comando irá publicar o seu projeto no GitHub Pages no seguinte link: https://github.com/<username>/<repositoryname>.git

  • username: o seu usuário do GitHub
  • nome do seu repositório

Para verificar se o seu projeto foi publicado com sucesso, acesse a url mencionada acima no seu navegador. No meu exemplo ficou a seguinte url: https://programadriano.github.io/angulardeploy/

Bom, a ideia desse artigo era de ser algo rápido demonstrando uma das novidades do Angular 8.3.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-8-3-publicando-projeto-com-o-angular-cli-em-5-passos

Gostou deste artigo? Comente abaixo!

[Dica rápida]TypeScript: map()

Dando continuidade a minha série de artigos sobre TypeScript, hoje eu irei apresentar o map. Caso você tenha interesse em ler os primeiros artigos dessa serie, segue o link de cada um deles abaixo:

Bom, para quem não conhece o Map ele é uma das novidades do ES6, ele nos permite trabalhar com o conceito de coleção com chave e valor. Sua sintaxe é bem simples, basta instanciar ele e utilizar o get e o set para manipular os seus valores. Para ficar mais claro, vamos a alguns exemplos práticos:

Para criar um novo map basta utilizar o operador new:

let exMap = new Map();

E para popular ele nós devemos utilizar o operador set:

exMap.set("casa", 2);

Agora para resgatar um valor, nós podemos utilizar o get:

exMap.get('casa') // 2

Mas como eu passei acima, o map nos permite trabalhar com coleções. Abaixo você tem um trecho de código com um exemplo de um map com uma coleção.

let languages = new Map();
languages.set("C#", 1);
languages.set("JavaScript", 2);
languages.set("PHP", 3);


languages.forEach((value: string, key: number) => {
    console.log(key, value);
});

Resultado do código acima:

Além dos operadores get e set, map tem outros operadores que nos permitem: deletar uma chave, limpar todos os registros de uma coleção e verificar a quantidade de itens inseridos. Abaixo você tem um trecho de código demonstrando cada um deles:

Bem legal né?

Bom, a ideia desse artigo era demonstrar mais uma das funcionalidades do TS que podem nos ajudar no nosso dia dia 😉

Espero que tenham gostado e até um próximo artigo pessoal.

Fonte: https://medium.com/@programadriano/dica-r%C3%A1pida-typescript-conhecendo-o-ts-ignore

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 7: novas funcionalidades

Veja nesse artigo como atualizar o seu ambiente de trabalho com a versão 7 do Angular e duas de suas novas funcionalidades

Já faz um bom tempo que eu estou focando os meus estudos no Angular, tive a oportunidade de participar de projetos com ele nas versões 2, 5 e 6. Hoje irei apresentar 2 novidades do que vieram nessa nova versão: o Drag and Drop e o Scrolling.

O primeiro passo será atualizar os nosso ambiente. Para isso, siga um dos passos abaixo de acordo com a versão que você tem instalada no seu computador:

Versão < 6

npm uninstall -g angular-cli
npm cache clean 
npm install -g @angular/cli@latest

Versão 6

ng update @angular/cli @angular/core

Para verificar se ele foi atualizado com sucesso, execute o comandong — versionno seu terminal. Abaixo você tem uma imagem demonstrando esse passo:

Atualizando o Angular para versão 7

Para ficar um passo a passo legal, vamos criar um novo projeto. Para isso, abra um terminal no seu computador e execute o comando ng new, note que você irá receber uma mensagem perguntando qual e o nome do seu projeto.

Essa é uma das novidades dessa nova versão. Abaixo você tem uma imagem demonstrando esse passo:

Novo projeto Angular versão 7

Informe o nome do seu projeto, em seguida note que você irá receber uma outra mensagem perguntando se deseja adicionar um arquivo de rotas. Eu irei informar Y para que ele adicione.

Adicionando rotas no Angular 7
O próximo passo será informar como você deseja trabalha com os estilos no seu projeto. Eu irei selecionar SCSS:

Adicionando rotas no Angular 7

Depois desse passo o seu projeto será criado. Para os próximos passos será necessário um editor de textos, eu irei utilizar o VS Code, mas você pode utilizar um de sua preferência.

Antes de nós começarmos a codar, vamos adicionar o Angular Material no nosso projeto. Para isso, execute o comando abaixo no seu terminal:

ng add @angular/material

Esse comando irá solicitar que você selecione um template para o seu projeto. Para esse artigo eu irei selecionar o indigo-pink.

Para as próximas perguntas eu irei informar N (não) para o HammerJS e Y (sim) para browser animations.

Com o projeto aberto no seu editor de textos, vamos conhecer as duas funcionalidades mencionadas no inicio desse artigo.

Drag and Drop

Nessa versão nós temos um módulo chamado DragDropModule. Para utilizar ele, basta adicionar a chamada abaixo no módulo que deseja utilizá-lo.

import {DragDropModule} from '@angular/cdk/drag-drop';

Em seguida atualize o arquivo app.component.html com o trecho de código abaixo:

<div class="example-box" cdkDrag>
  I can only be dragged using the handle

  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

E o arquivo app.component.scss com o trecho de código abaixo:

.example-box {
    width: 200px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  
  .example-box:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .example-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ccc;
    cursor: move;
    width: 24px;
    height: 24px;
  }

Abaixo você tem uma imagem demonstrando o resultado dessa implementação:

Scrolling

Um outro módulo que chegou nessa nova versão foi o ScrollDispatchModule, ele nos permite trabalhar com virtual scroll.

Para implementá-lo vamos criar um novo componente chamado VirtualScroll. Para isso, execute o comando abaixo no seu terminal:

ng g c virtualScroll

Em seguida atualize o seu arquivo app.component.html com o trecho de código abaixo:

<router-outlet></router-outlet>

E o novo componente no arquivo de rotas: app-routing.module.ts:

{ path: ‘scroll’, component: VirtualScrollComponent }

Agora para implementar o Virtual Scroll, vamos atualizar os arquivos: virtual-scroll.component.ts, virtual-scroll.component.scss e virtual-scroll.component.hml com os trechos de código abaixo:

virtual-scroll.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})
export class VirtualScrollComponent implements OnInit {

  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  
  constructor() { }

  ngOnInit() {
  }

}

Analisando esse trecho de código nós temos:

  • 1: Estamos adicionando a chamada do ChangeDetectionStrategy para detectar as alterações no nosso componente
  • 12: estamos criando um array com 100000 itens para passar para nossa view

virtual-scroll.component.hml

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

virtual-scroll.component.scss

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }
  
  .example-item {
    height: 50px;
  }

Abaixo você tem uma imagem demonstrando o resultado desse passo:

Os exemplos demonstrados nesse artigo foram retirados do site oficial do Angular. Caso tenham interesse em saber mais sobre essa nova versão, eu recomendo a leitura do seguinte link: Angular.io.

Fonte: medium.com/angularbr/angular-7-novas-funcionalidades

 

Versão do Electron 7.0.0 disponível!

O Electron 7.0.0 foi lançado! Ele inclui atualizações para o Chromium 78, V8 7.8 e Node.js 12.8.1. Foi adicionado uma versão do Window on Arm 64, métodos IPC mais rápidos, uma nova API nativeTheme, entre outros.

A equipe do Electron está animada com o anúncio do lançamento do Electron 7.0.0! Você pode instalá-lo com o npm via npm install electron ou fazer o download no site de lançamentos.

O lançamento está repleto de atualizações, correções e novos recursos.

Mudanças notáveis da atualização:

  • Stack Upgrades:

  • Adicionada versão do Windows on Arm (64 bits);
  • Adicionados ipcRenderer.invoke() e ipcMain.handle() para solicitações/estilo assíncronos de resposta para IPC. Estes são fortemente recomendados no módulo remoto;
  • Adicionada API nativeTheme para ler e responder a alterações no tema e esquema de cores do sistema operacional;
  • Mudou para um novo gerador de definições de TypeScript. As definições resultantes são mais precisas. Portanto, se sua compilação TypeScript falhar, essa é a causa provável.

Consulte as notas de versão 7.0.0 para obter uma lista mais longa de alterações.

Breaking Changes:

Mais informações sobre essas e futuras alterações podem ser encontradas na página Alterações planejadas de interrupção.

  • APIs descontinuadas removidas:
    • Versões de funções baseadas em retorno de chamada que agora usam o Promises;
    • setHighlightMode() (macOS);
    • enableMixedSandbox();
    • getApplicationMenu();
    • setApplicationMenu();
    • querySystemIdleState();
    • querySystemIdleTime();
    • setIsolatedWorldContentSecutiryPolicy();
    • setIsolatedWorldHumanReadableName(),
    • setIsolatedWorldSecurityOrigin().
  • clearAuthCache() não permite mais filtrar as entradas de cache limpas.
  • As interfaces nativas no macOS (menus, caixas de diálogo etc.) agora correspondem automaticamente à configuração do modo escuro na máquina do usuário.
  • Atualizado o módulo electron para usar @electron/get. A versão mínima do node suportado agora é o Node 8.
  • O arquivo electron.asar não existe mais. Quaisquer scripts de empacotamento que dependem de sua existência devem ser atualizados.

Fim do suporte para 4.x.y:

O Electron 4.x.y atingiu o fim do suporte de acordo com a política de suporte doprojeto. Os desenvolvedores e aplicativos são incentivados a atualizar para uma versão mais recente do Electron.

Programa de comentários sobre o APP:

Os projetos que participam deste programa testam os betas de Electron em seus aplicativos, e, em troca, os novos bugs encontrados são priorizados na versão estável.

O que vem por aí:

No curto prazo, a equipe continua a se concentrar em acompanhar o desenvolvimento dos principais componentes que compões o Electron, incluindo Chromium, Node e V8. O plano é lançar novas versões principais do Electron com novas versões desses componentes. O cronograma experimental 8.0.0 mapeia datas importantes no ciclo de vida de desenvolvimento do Electron 8. Consulte o documento do controle de versão para obter informações detalhadas sobre o controle de versão do Electron. Para mais informações, consulte o documento Breaking Changes.

Para mais informações veja o post original no link abaixo:
fonte: https://electronjs.org/blog/electron-7-0

Hackers comprometem mais 80 sites de comércio eletrônico

Pesquisadores de segurança cibernética descobriram mais de 80 sites de comércio eletrônico comprometidos de Magecart que estavam enviando ativamente informações de cartão de crédito de compradores on-line aos servidores controlados por invasores.

Operando seus negócios nos Estados Unidos, Canadá, Europa, América Latina e Ásia, muitos desses sites comprometidos são marcas respeitáveis ​​na indústria de motorsports e high fashion, revelaram hoje pesquisadores do Aite Group e da Arxan Technologies em um relatório compartilhado com o The Hacker News.

Em um mundo cada vez mais digital, os ataques Magecart surgiram como uma ameaça importante de segurança cibernética para sites de comércio eletrônico.

Magecart é um termo genérico dado a diferentes grupos de criminosos cibernéticos especializados em implantar secretamente skimmers on-line de cartões de crédito em sites de comércio eletrônico comprometidos com a intenção de roubar detalhes de cartões de pagamento de seus clientes.

Esses skimmers virtuais de cartão de crédito, também conhecidos como ataque de formjacking, são basicamente códigos JavaScript que os hackers inserem secretamente em um site comprometido, geralmente na página do carrinho de compras, projetados para capturar informações de pagamento dos clientes em tempo real e enviá-las a um servidor invasor-remoto  controlado.

Ultimamente, Magecart é notícia por conduzir vários assaltos de alto nível contra grandes empresas, incluindo British Airways, Ticketmaster, Newegg e outras.

A campanha recém-divulgada não pertence a um único grupo de hackers Magecart; em vez disso, os pesquisadores usaram um mecanismo de busca de código-fonte para procurar por JavaScript ofuscado na Internet com padrões maliciosos que eram vistos anteriormente nos skimmers virtuais de cartões de crédito do Magecart.

De acordo com os pesquisadores, a técnica permitiu que eles descobrissem rapidamente mais de 80 sites de comércio eletrônico comprometidos por grupos Magecart, a maioria encontrados em versões desatualizadas do Magento CMS, vulneráveis ​​a um carregamento não autenticado e a vulnerabilidades de execução remota de código.

 

“A ausência de proteção no aplicativo, como ofuscação de código e detecção de violação, torna os aplicativos da Web vulneráveis ​​a um tipo de ataque cibernético chamado formjacking”, disseram os pesquisadores.

 

“Muitos dos sites comprometidos estão executando as versões 1.5, 1.7 ou 1.9. As vulnerabilidades arbitrárias de upload de arquivos, execução remota de código e falsificação de solicitação entre sites afetam o Magento versão 2.1.6 e inferior. Embora não possa ser declarado com autoridade que foi isso que levou à violação desses sites, são versões vulneráveis ​​do Magento que permitem que os adversários injetem o código de formjacking no site “.

Continue lendo “Hackers comprometem mais 80 sites de comércio eletrônico”

O custo do JavaScript 2019

Se você tem interesse em saber mais sobre os impactos de performance do JavaScript nos navegadores, esse artigo é para você.

Este post é uma adaptação do meu entendimento do vídeo e artigo sobre o custo do JavaScript que foi apresentado por Addy Osmani (Link no final do post) que fala sobre as mudanças que ele observou no custo do JavaScript entre o ano 2018 e 2019.

De acordo com ele, uma das grandes mudanças no custo do JavaScript nos últimos anos se deve nas melhorias como os navegadores conseguem processar scripts. Em 2019 o custo foco está no tempo de download e execução dos scripts.

O que isso quer dizer para os desenvolvedores?

Como a compilação e analise de dados não é mais tão lenta com antes, atualmente é importante considerar 3 coisas nos bundles de JavaScript

  1. Melhorar o tempo de download: Evite ter bundles maiores que 100kb (50kb para dispositivos móveis) pois eles consomem muito a rede e memória do dispositivo. Aproveite as funcionalidades do HTTTP2 para reduzir o overhead de chamadas adicionais.
  2. Melhorar o tempo de execução: Evite tarefas que consomem muito da thread principal. A execução do script após o download é um dos custos dominantes.
  3. Evite scripts inline muito grandes: Uma boa regra genérica e evitar scripts inline que sejam superiores a 1kb pois eles são processados pela thread principal e podem atrasar interatividade da página.

Custo do JavaScript para smartphones.


Tarefas longas monopolizam a thread principal. Tente quebra-las.

Por que a o download e a execução do código são importantes?

Apesar de estarmos começando no mundo do 5G e existirem smartphones com alta capacidade de processamento, a média da capacidade de download (mesmo em países de primeiro mundo) ainda se compara ao 3G. Junto com o fato que muitos destes dispositivos não terem o poder de processamento necessário para rodar eficiente alguns aplicativos, temos ai a receita para uma péssima experiencia para o usuário.

O que o V8 fez para melhorar o tempo de processamento?

O V8 reduziu a quantidade de trabalhos de análise e compilação na thread principal em uma média de 40% (por exemplo, 46% no Facebook, 62% no Pinterest) com a maior melhoria sendo 81% (YouTube), analisando e compilando um trabalhador fio. Isso é um acréscimo ao parsing / compilação de fluxo de threads fora da linha principal existente.

Conclusões

O download e o tempo de execução são os principais bottlenecks para o carregamento de scripts em 2019. Divida pacotes de forma que o usuário só baixe aquilo que precisa quando for necessário. No celular, você deve enviar muito menos script devido à rede, ao consumo de memória e ao tempo de execução para CPUs serem mais lentas.

Fonte:

Blog

Youtube

React avançado — Utilizando “props.children” como função de primeira classe

O coração do React são componentes. Você pode aninhar esses componentes do mesmo modo que você aninha tags HTML, o que torna tudo mais fácil quando escrevemos JSX, afinal, lembra muito o bom e velho HTML.

Quando eu comecei com React, eu pensei “Basta usar props.children e pronto. Eu sei tudo sobre o objeto .children”. Te digo, como eu estava errado! 🙂

Como estamos trabalhando com JavaScript, nós podemos mudar o .children. Nós podemos passar propriedades para ele, decidir se queremos que ele renderize algo ou não, usá-lo do jeito que quisermos. Vamos mergulhar no poder do .children em React!

Abaixo, segue os tópicos que iremos abortar nesse artigo:

Tabela de conteúdo:

  • Elementos filhos
  • Tudo pode ser um elemento filho
  • Função como elemento filho
  • Manipulando .children
  • Usando loops em .children
  • Contando .children
  • Convertendo .children em um array
  • Permitir apenas um elemento filho
  • Editando .children
  • Mudando as propriedades dos elementos filhos
  • Clonando imutavelmente os elementos filhos
  • É isso aí!

Elementos filhos

Vamos dizer que temos um componente , que contém componentes como elementos filhos. Usamos da seguinte maneira:

<Grid>
  <Row />
  <Row />
  <Row />
</Grid>

Demo: http://www.webpackbin.com/Ekg_vyjPz

Esses três componentes Row são passados para o Grid como props.children. Usando um container como expressão (expression container, termo técnico do JSX para os colchetes), componentes pais podem renderizar os elementos filhos:

class Fullstop extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

Não importa quantos elementos filhos você passe, ele sempre irá renderizar “Hello world!”, e nada mais.

Nota: O h1 no exemplo acima (assim como todas as tags HTML primitivas), está renderizando seu elemento filho, nesse caso, o nó de texto “Hello world!”

Continue lendo “React avançado — Utilizando “props.children” como função de primeira classe”

Diferenças entre innerHTML, innerText e textContent.

Você conhece a diferença entre innerText, textContent e innerHTML?

São utilizados na manipulação do DOM (Document Object Model). Cada uma destas propriedades retorna algo, e descobriremos o que elas retornam neste artigo.

Diferenças:

Utilizando o exemplo a seguir, criaremos as propriedades:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exemplo innerHTML, innerText e textContent</title>
</head>
<body>
    <!-- Criando um parágrafo com formatação CSS inline nos textos -->
    <p id="textoHtml">
        <span style="display: none">Hakuna</span><strong>Matata</strong>
        <span style="visibility: hidden;">Mundo</span>
        <span>JS</span>
    </p>

    <script src="main.js"></script>
</body>
</html>

innerHTML:

Utilizado na manipulação do DOM, o innerHTML retorna todo o texto e o html que existem no elemento. Ele retorna todo o html existente, retornando também às tags, e não somente o texto.

// Criando uma variável que irá buscar o elemento HTML pelo Id
let exemploInner = document.getElementById("textoHtml");
        
console.log("------ USANDO innerHTML ------");
console.log(exemploInner.innerHTML);

Importante:

O innerHTML pode ser usado para inserção de tags, textos e imagens em uma página web, gerando um risco de segurança. Parecido com um cross-site scripting, mas inofensivo, pois o HTML5 especifica que uma tag <script> inserida via innerHTML em uma página web não deve ser executada. Entretanto, existem formas de executar JavaScript sem usar <script>, portanto, ainda há um risco de segurança ao utilizar o innerHTML. Por esta razão, recomenda-se não utilizar o innerHTML para inserção de texto puro.

innerText:

Já o innerText retorna apenas o texto. Ele ignora todas as tags HTML que estão dentro do elemento, mas ainda assim, “entende” o css do elemento, retornando apenas textos visíveis. Utiliza-se quando queremos buscar apenas o texto visível disponível no elemento.

console.log("------ USANDO innerText ------");
console.log(exemploInner.innerText);

textContent:

O textContent funciona de forma muito semelhante ao innerText, porém, retornando todo o conteúdo de texto, incluindo o texto oculto pelo css, bem como as quebras de linha (\n). Utilizamos o textContent quando queremos buscar todo o texto disponível no elemento.

console.log("------ USANDO textContent ------");
console.log(exemploInner.textContent);

Gostou deste artigo? Compartilhe com seus amigos e comente abaixo!