React Context é uma ferramenta essencial para todo desenvolvedor React conhecer. Ele permite compartilhar facilmente o estado em suas aplicações.

Neste guia, abordaremos o que é o React Context, como usá-lo, quando e quando não usar o context, e muito mais.

Mesmo que você nunca tenha trabalhado com o React context antes, está no lugar certo. Você aprenderá tudo o que precisa saber com exemplos simples e passo a passo.

Vamos começar!

Conteúdo

• O que é o React Context?
• Quando devo usar o React Context?
• Quais problemas o React Context resolve?
• Como eu uso o React Context?
• O que é o hook useContext?
• Você pode não precisar do Context
• Ele substitui o Redux?
• Avisos sobre o React Context

O que é o React Context?

React Context nos permite passar e usar (consumir) dados em qualquer componente que precisamos em nossa aplicação do React sem usar propriedades.

Em outras palavras, o React Context nos permite compartilhar dados (estados) entre nossos componentes de modo mais fácil.

Caso você não saiba o que são estados (states), esse é um termo que se refere a um objeto que armazena dados, que podem mudar ao longo do tempo. É uma maneira de gerenciar e atualizar dados em um componente ou aplicação sem afetar outras partes.

Quando devo usar o React Context?

O React Context é muito bom quando você está transmitindo dados que podem ser usados ​​em qualquer componente da aplicação.

Esses tipos de dados incluem:

• Dados do tema (como modo claro ou escuro)
• Dados do usuário (a autenticação do usuário)
• Dados específicos do local (como idioma ou o local do usuário)

Os dados que devem ser colocados no React Context são aqueles que não precisam ser atualizados com frequência.

Por quê? Porque o Context não foi criado como um sistema completo de gerenciamento de estado. Ele foi feito para facilitar o consumo dos dados.

Você pode pensar no React Context como o equivalente a variáveis ​​globais para nossos componentes do React.

Quais problemas o React Context resolve?

O React Context nos ajuda a evitar o problema de propagação de propriedades (props drilling).

A propagação de propriedades (props drilling) é um termo usado para descrever quando você passa propriedades por vários níveis para um componente aninhado, através de componentes que não precisam delas.

Aqui está um exemplo de propagação de propriedades. Nesta aplicação, temos acesso aos dados do tema que queremos passar como propriedade para todos os componentes.

Como você pode ver, os filhos diretos de App, como o Header, também precisam passar os dados do tema usando propriedades.

export default function App({ theme }) {
  return (
    <>
      <Header theme={theme} />
      <Main theme={theme} />
      <Sidebar theme={theme} />
      <Footer theme={theme} />
    </>
  );
}

function Header({ theme }) {
  return (
    <>
      <User theme={theme} />
      <Login theme={theme} />
      <Menu theme={theme} />
    </>
  );
}

Qual é o problema com este exemplo?

O problema é que estamos passando o theme através de vários componentes que não precisam dele imediatamente.

O componente Header não precisa do theme além de repassá-lo para o seu componente filho. Em outras palavras, seria melhor para User, Login e Menu consumirem os dados de theme diretamente.

Essa é a vantagem do React Context – podemos evitar totalmente o uso de props e, assim, evitar o problema de "props drilling".

Como eu uso o React Context?

O Context é uma API integrada ao React, a partir da sua versão 16.

Isso significa que podemos criar um Context e usá-lo diretamente importando o React em qualquer projeto.

Existem quatro etapas para usar o React Context:

1. Crie o context usando o método createContext
2. Pegue o context criado e envolva a árvore de componentes com o provedor (provider) do context.
3. Coloque qualquer valor que desejar no provedor do React Context usando a propriedade value.
4. Leia esse valor em qualquer componente usando o consumidor do Context.

Tudo isso parece meio confuso? É mais simples do que você pensa.

Vamos dar uma olhada em um exemplo muito básico. No nosso App, vamos passar o nosso próprio nome usando o Context e lê-lo em um componente aninhado: User.

import React from 'react';

export const UserContext = React.createContext();

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}

function User() {
  return (
    <UserContext.Consumer>
      {value => <h1>{value}</h1>} 
      {/* prints: Reed */}
    </UserContext.Consumer>
  )
}

Vamos explicar o passo a passo do que estamos fazendo:

1. Acima do nosso componente App, estamos criando um context com React.createContext() e colocando o resultado em uma variável, UserContext. Geralmente, você vai querer exportá-lo, como estamos fazendo aqui, porque seu componente estará em outro arquivo. Note que podemos passar um valor inicial para a propriedade value quando chamamos React.createContext().
2. No nosso componente App, estamos usando UserContext – especificamente, UserContext.Provider. Ele é um objeto com duas propriedades: Provider e Consumer – ambas são componentes. Para passar nosso valor para todos os componentes em nosso App, colocamos nosso componente Provider ao redor deles (neste caso, User).
3. No UserContext.Provider, colocamos o valor que queremos passar para toda a árvore de componentes. Igualamos à propriedade value para fazer isso. Neste caso, é o nosso nome.
4. No componente User, ou onde queremos consumir (ou usar) o que foi fornecido em nosso contexto, usamos o componente do consumidor: UserContext.Consumer. Para usar nosso valor passado, usamos o que é chamado de padrão de renderização dessas props. É apenas uma função que o componente do consumidor nos dá como sendo uma propriedade. No retorno dessa função, podemos retornar e usar o value.

O que é o hook useContext?

Olhando o exemplo acima, o padrão de renderização de props para usar Context pode parecer um pouco estranho para você.

Outro modo de usá-lo foi disponibilizado no React 16.8 com a chegada dos hooks do React. Agora, podemos usar o Context com o hook useContext.

Em vez de usar as renderizações de propriedades, podemos passar todo o objeto de Context para React.useContext() consumir o contexto na parte superior do nosso componente.

Aqui está o exemplo usando o hook useContext:

import React from 'react';

export const UserContext = React.createContext();

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}

function User() {
  const value = React.useContext(UserContext);  
    
  return <h1>{value}</h1>;
}

O benefício do hook useContext é que ele torna nossos componentes mais concisos, permitindo criar nossos próprios hooks personalizados.

Você pode usar tanto o componente consumidor diretamente quanto o hook useContext, dependendo apenas do padrão de sua preferência.

Você pode não precisar do Context

O erro que muitos desenvolvedores cometem é o de utilizar context quando eles precisam passar propriedades entre vários níveis de componente.

Aqui está uma aplicação com um componente Avatar que requer duas propriedades, username e avatarSrc, do componente App.

export default function App({ user }) {
  const { username, avatarSrc } = user;

  return (
    <main>
      <Navbar username={username} avatarSrc={avatarSrc} />
    </main>
  );
}

function Navbar({ username, avatarSrc }) {
  return (
    <nav>
      <Avatar username={username} avatarSrc={avatarSrc} />
    </nav>
  );
}

function Avatar({ username, avatarSrc }) {
  return <img src={avatarSrc} alt={username} />;
}

Se for possível, queremos evitar passar várias propriedades pelos componentes que não precisam delas.

O que podemos fazer?

Em vez de recorrer imediatamente ao React Context, por estarmos passando muitas propriedades, devemos compor melhor nossos componentes.

Como apenas o componente mais alto, App, precisa saber sobre o componente Avatar, podemos criá-lo diretamente dentro de App.

Isso nos permite passar apenas uma propriedade, avatar, ao invés de duas.

export default function App({ user }) {
  const { username, avatarSrc } = user;

  const avatar = <img src={avatarSrc} alt={username} />;

  return (
    <main>
      <Navbar avatar={avatar} />
    </main>
  );
}

function Navbar({ avatar }) {
  return <nav>{avatar}</nav>;
}

Resumindo: não utilize imediatamente o Context. Veja se é possível organizar melhor seus componentes para evitar a propagação excessiva de propriedades.

Ele substitui o Redux?

Sim e não.

Para muitos iniciantes em React, o Redux é um modo mais fácil de passar dados entre componentes. Isso ocorre porque o Redux já vem com o React Context.

Contudo, se você não está atualizando o estado, mas apenas passando-o pela árvore de componentes, você não precisa de uma biblioteca global de gerenciamento de estado como o Redux.

Avisos sobre o React Context

Por que não é possível atualizar o valor que o React Context repassa?

Mesmo sendo possível combinar React Context com hooks, como useReducer, e criar uma biblioteca improvisada de gerenciamento de estado sem utilizar nenhuma biblioteca de terceiros, geralmente não é recomendado por motivos de desempenho.

O problema com isso está no modo como o React Context desencadeia uma nova renderização.

Se você estiver repassando um objeto no provedor do React Context e qualquer propriedade desse objeto for atualizada, o que acontece? Qualquer componente que o use será renderizado novamente.

Isso pode não gerar um problema de desempenho em aplicações menores com poucos valores de estado que não são atualizados com muita frequência (como dados de tema). Porém, é um problema se você estiver realizando muitas atualizações de estado em uma aplicação com muitos componentes em sua árvore de componentes.

Consideração final

Espero que este guia tenha proporcionado a você uma melhor compreensão de como usar o React Context do início ao fim.

Se você deseja entender melhor como usar o React context para construir projetos incríveis com o React, confira o The React Bootcamp (curso criado pelo autor, em inglês).

Afinal, o que é web scraping? Embora a tradução livre seja algo como "raspagem da rede", ele é bem mais conhecido como sendo a extração de dados da web. É a automatização da tarefa de coletar informações a partir de sites que, se for feita manualmente, é algo bem cansativo.

Podemos utilizar o web scraping de muitas formas: você pode querer pegar os preços de vários sites de compras e fazer um site de comparação de preços. Ou talvez precise dos horários de voos e uma lista de hotéis/AirBNB para colocar num site de viagens. Talvez você queira extrair e-mails de vários diretórios para vendê-los como leads ou usar os dados da internet para treinar modelos de IA/aprendizado de máquina. Você pode até querer construir seu próprio mecanismo de busca, como o Google!

Começar na área de web scraping é fácil e esse processo pode ser dividido em duas partes principais, que são:

• adquirir os dados usando uma biblioteca de requisição de HTML ou um navegador sem a interface gráfica e
• analisar os dados para obter as informações exatas que você deseja.

Este guia conduzirá você nesse processo com as bibliotecas mais populares do Node.js, Request-promise, CheerioJS e Puppeteer. Trabalhando com os exemplos deste guia, você aprenderá todas as dicas e truques necessários para se tornar profissional na extração de dados com o Node.js!

Nota do tradutor: a biblioteca Request-promise encontra-se depreciada (não recebeu melhorias/correção de bugs desde 2020) e pode apresentar problemas. Ela, porém, continua no artigo para aprendermos a lógica de como fazermos o web scraping. A segunda parte do artigo, que utiliza apenas as bibliotecas CheerioJS e Puppeteer, funciona normalmente, sendo o método mais recomendado.

Faremos uma lista de todos os nomes dos presidentes dos EUA, seus respectivos aniversários a partir da Wikipédia e todos os títulos das postagens na primeira página do Reddit.

Para isso, vamos primeiro instalar as bibliotecas que usaremos neste guia (o Puppeteer leva um tempo maior para instalar, pois precisa baixar também o Chromium com ele).

Fazendo sua primeira requisição

npm install --save request request-promise cheerio puppeteer

Em seguida, vamos criar um arquivo com o nome de potusScraper.js, e escrever uma função rápida para obter o HTML da página da "Lista dos presidentes dos EUA", diretamente da Wikipédia em inglês.

const rp = require('request-promise');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';

rp(url)
  .then(function(html){
    //success!
    console.log(html);
  })
  .catch(function(err){
    //handle error
  });

Resultado:

<!DOCTYPE html>
<html class="client-nojs" lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>List of Presidents of the United States - Wikipedia</title>
...

Nota do tradutor: o nome do arquivo, potusScraper.js, tem a ver com o fato de que PotUS, em inglês, é a abreviação para "Presidents of the United States". A segunda parte, "scraper", tem a ver com o mecanismo que realiza o "scraping".

Usando o Chrome DevTools

Certo, temos o HTML bruto da página! Agora, precisamos entender esse bloco gigante de texto. Para fazer isso, precisaremos usar o Chrome DevTools, que nos permite pesquisar facilmente dentro do HTML da página.

Usar o Chrome DevTools é bem fácil: é só abrir o Google Chrome e clicar com o botão direito do mouse no elemento que você deseja extrair (neste caso, estou clicando com o botão direito do mouse em George Washington, pois queremos obter os links das páginas da Wikipédia de cada presidente):

Agora, clicamos em Inspect, ou Inspecionar, e o Chrome exibirá o painel DevTools, permitindo que você inspecione facilmente a estrutura do HTML da página.

Analisando o HTML com Cheerio.js

Agora, o Chrome DevTools nos mostra o padrão exato que devemos procurar no código (uma tag "big" com um hiperlink dentro dela). Vamos usar o Cheerio.js para analisar o HTML que recebemos anteriormente para retornar uma lista com os links de cada página dos presidentes americanos.

const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';

rp(url)
  .then(function(html){
    //success!
    console.log($('big > a', html).length);
    console.log($('big > a', html));
  })
  .catch(function(err){
    //handle error
  });

Resultado:

45
{ '0':
  { type: 'tag',
    name: 'a',
    attribs: { href: '/wiki/George_Washington', title: 'George Washington' },
    children: [ [Object] ],
    next: null,
    prev: null,
    parent:
      { type: 'tag',
        name: 'big',
        attribs: {},
        children: [Array],
        next: null,
        prev: null,
        parent: [Object] } },
  '1':
    { type: 'tag'
  ...

Verificamos se há exatamente 45 elementos retornados (o número de presidentes americanos), o que significa que não há tags "big" extras ocultas em outros lugares da página. Agora, podemos acessar e obter a lista de links para todas as 45 páginas presidenciais da Wikipédia, a partir da propriedade "attribs" de cada elemento, desta forma:

const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';

rp(url)
  .then(function(html){
    //success!
    const wikiUrls = [];
    for (let i = 0; i < 45; i++) {
      wikiUrls.push($('big > a', html)[i].attribs.href);
    }
    console.log(wikiUrls);
  })
  .catch(function(err){
    //handle error
  });

Resultado:

[
  '/wiki/George_Washington',
  '/wiki/John_Adams',
  '/wiki/Thomas_Jefferson',
  '/wiki/James_Madison',
  '/wiki/James_Monroe',
  '/wiki/John_Quincy_Adams',
  '/wiki/Andrew_Jackson',
  ...
]

Agora que temos a lista de todas as 45 páginas presidenciais da Wikipédia, vamos criar um outro arquivo (chamado potusParse.js), que vai ter a função de pegar uma página presidencial da Wikipédia e retornar o nome e o aniversário do presidente. Como exemplo, vamos pegar o HTML bruto da página da Wikipédia de George Washington.

const rp = require('request-promise');
const url = 'https://en.wikipedia.org/wiki/George_Washington';

rp(url)
  .then(function(html) {
    console.log(html);
  })
  .catch(function(err) {
    //handle error
  });

Resultado:

<html class="client-nojs" lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>George Washington - Wikipedia</title>
...

Usaremos, mais uma vez, o Chrome DevTools para encontrar a sintaxe do código que queremos analisar, para que possamos extrair o nome e o aniversário com o Cheerio.js.

Então, vemos que o nome está em uma classe chamada "firstHeading" e o aniversário está em uma classe chamada "bday". Vamos modificar nosso código para usar o Cheerio.js para extrair essas duas classes.

const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/George_Washington';

rp(url)
  .then(function(html) {
    console.log($('.firstHeading', html).text());
    console.log($('.bday', html).text());
  })
  .catch(function(err) {
    //handle error
  });

Resultado:

George Washington
1732-02-22

Juntando tudo

Perfeito! Agora, vamos transformar esse código em uma função e exportá-la do módulo, assim:

const rp = require('request-promise');
const $ = require('cheerio');

const potusParse = function(url) {
  return rp(url)
    .then(function(html) {
      return {
        name: $('.firstHeading', html).text(),
        birthday: $('.bday', html).text(),
      };
    })
    .catch(function(err) {
      //handle error
    });
};

module.exports = potusParse;

No nosso arquivo original, potusScraper.js, vamos importar o módulo potusParse.js e aplicá-lo à lista de wikiUrls que reunimos anteriormente.

const rp = require('request-promise');
const $ = require('cheerio');
const potusParse = require('./potusParse');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';

rp(url)
  .then(function(html) {
    //success!
    const wikiUrls = [];
    for (let i = 0; i < 45; i++) {
      wikiUrls.push($('big > a', html)[i].attribs.href);
    }
    return Promise.all(
      wikiUrls.map(function(url) {
        return potusParse('https://en.wikipedia.org' + url);
      })
    );
  })
  .then(function(presidents) {
    console.log(presidents);
  })
  .catch(function(err) {
    //handle error
    console.log(err);
  });

Resultado:

[
  { name: 'George Washington', birthday: '1732-02-22' },
  { name: 'John Adams', birthday: '1735-10-30' },
  { name: 'Thomas Jefferson', birthday: '1743-04-13' },
  { name: 'James Madison', birthday: '1751-03-16' },
  { name: 'James Monroe', birthday: '1758-04-28' },
  { name: 'John Quincy Adams', birthday: '1767-07-11' },
  { name: 'Andrew Jackson', birthday: '1767-03-15' },
  { name: 'Martin Van Buren', birthday: '1782-12-05' },
  { name: 'William Henry Harrison', birthday: '1773-02-09' },
  { name: 'John Tyler', birthday: '1790-03-29' },
  { name: 'James K. Polk', birthday: '1795-11-02' },
  { name: 'Zachary Taylor', birthday: '1784-11-24' },
  { name: 'Millard Fillmore', birthday: '1800-01-07' },
  { name: 'Franklin Pierce', birthday: '1804-11-23' },
  { name: 'James Buchanan', birthday: '1791-04-23' },
  { name: 'Abraham Lincoln', birthday: '1809-02-12' },
  { name: 'Andrew Johnson', birthday: '1808-12-29' },
  { name: 'Ulysses S. Grant', birthday: '1822-04-27' },
  { name: 'Rutherford B. Hayes', birthday: '1822-10-04' },
  { name: 'James A. Garfield', birthday: '1831-11-19' },
  { name: 'Chester A. Arthur', birthday: '1829-10-05' },
  { name: 'Grover Cleveland', birthday: '1837-03-18' },
  { name: 'Benjamin Harrison', birthday: '1833-08-20' },
  { name: 'Grover Cleveland', birthday: '1837-03-18' },
  { name: 'William McKinley', birthday: '1843-01-29' },
  { name: 'Theodore Roosevelt', birthday: '1858-10-27' },
  { name: 'William Howard Taft', birthday: '1857-09-15' },
  { name: 'Woodrow Wilson', birthday: '1856-12-28' },
  { name: 'Warren G. Harding', birthday: '1865-11-02' },
  { name: 'Calvin Coolidge', birthday: '1872-07-04' },
  { name: 'Herbert Hoover', birthday: '1874-08-10' },
  { name: 'Franklin D. Roosevelt', birthday: '1882-01-30' },
  { name: 'Harry S. Truman', birthday: '1884-05-08' },
  { name: 'Dwight D. Eisenhower', birthday: '1890-10-14' },
  { name: 'John F. Kennedy', birthday: '1917-05-29' },
  { name: 'Lyndon B. Johnson', birthday: '1908-08-27' },
  { name: 'Richard Nixon', birthday: '1913-01-09' },
  { name: 'Gerald Ford', birthday: '1913-07-14' },
  { name: 'Jimmy Carter', birthday: '1924-10-01' },
  { name: 'Ronald Reagan', birthday: '1911-02-06' },
  { name: 'George H. W. Bush', birthday: '1924-06-12' },
  { name: 'Bill Clinton', birthday: '1946-08-19' },
  { name: 'George W. Bush', birthday: '1946-07-06' },
  { name: 'Barack Obama', birthday: '1961-08-04' },
  { name: 'Donald Trump', birthday: '1946-06-14' }
]

Renderizando páginas em JavaScript

Aí está! Uma lista dos nomes e aniversários de todos os 45 presidentes americanos. Usar apenas o módulo request-promise e o Cheerio.js já permitirá a você extrair informações da grande maioria dos sites na internet.

Recentemente, no entanto, muitos sites começaram a usar o JavaScript para gerar conteúdo dinâmico em seus sites. Isso causa um problema para o request-promise e outras bibliotecas de requisição de HTTP semelhantes (como o axios e o fetch), pois elas só obtêm a resposta da requisição inicial, não podendo executar o JavaScript da mesma forma que um navegador da web.

Assim, para extrair dados de sites que exigem a execução do JavaScript, precisamos de outra solução. Em nosso próximo exemplo, obteremos os títulos de todas as postagens na primeira página do Reddit. Vamos ver o que acontece quando tentamos usar request-promise como fizemos no exemplo anterior.

Resultado:

const rp = require('request-promise');
const url = 'https://www.reddit.com';

rp(url)
  .then(function(html){
    //success!
    console.log(html);
  })
  .catch(function(err){
    //handle error
  });
}

Este é o resultado:

<!DOCTYPE html><html
lang="en"><head><title>reddit: the front page of the
internet</title>
...

Hmmm... não é bem o que queremos. Isso porque, para pegar o conteúdo real, é preciso que você execute o JavaScript na página! Com o Puppeteer, isso não é problema.

O Puppeteer é um novo módulo extremamente popular feito pela equipe do Google Chrome que permite controlar um navegador sem a parte gráfica (geralmente é chamado de navegador sem cabeça). Ele é perfeito para extrair os dados de modo programático de páginas que precisam executar o JavaScript. Então, vamos pegar o HTML da primeira página do Reddit usando o Puppeteer em vez do request-promise.

const puppeteer = require('puppeteer');
const url = 'https://www.reddit.com';

puppeteer
  .launch()
  .then(function(browser) {
    return browser.newPage();
  })
  .then(function(page) {
    return page.goto(url).then(function() {
      return page.content();
    });
  })
  .then(function(html) {
    console.log(html);
  })
  .catch(function(err) {
    //handle error
  });

Resultado:

<!DOCTYPE html><html lang="en"><head><link
  href="//c.amazon-adsystem.com/aax2/apstag.js" rel="preload"
  as="script">
...

Agora, sim, a página está com o conteúdo correto!

Usaremos o Chrome DevTools como fizemos no exemplo anterior.

Parece que o Reddit está colocando os títulos dentro das tags "h2". Usaremos o Cheerio.js para extrair as tags h2 da página.

const puppeteer = require('puppeteer');
const $ = require('cheerio');
const url = 'https://www.reddit.com';

puppeteer
  .launch()
  .then(function(browser) {
    return browser.newPage();
  })
  .then(function(page) {
    return page.goto(url).then(function() {
      return page.content();
    });
  })
  .then(function(html) {
    $('h2', html).each(function() {
      console.log($(this).text());
    });
  })
  .catch(function(err) {
    //handle error
  });

E esse é o resultado final:

Russian Pipeline. Upvote so that this is the first image people see when they Google “Russian Pipeline”
John F. Kennedy Jr. Sitting in the pilot seat of the Marine One circa 1963
I didn't take it as a compliment.
How beautiful is this
Hustle like Faye
The power of a salt water crocodile's tail.
I'm 36, and will be dead inside of a year.
F***ing genius.
TIL Anthony Daniels, who endured years of discomfort in the C-3PO costume, was so annoyed by Alan Tudyk (Rogue One) playing K-2SO in the comfort of a motion-capture suit that he cursed at Tudyk. Tudyk later joked that a "fuck you" from Daniels was among the highest compliments he had ever received.
Reminder about the fact UC Davis paid over $100k to remove this photo from the internet.
King of the Hill reruns will start airing on Comedy Central July 24th
[Image] Slow and steady
White House: Trump open to Russia questioning US citizens
Godzilla: King of the Monsters Teaser Banner
He tried
Soldier reunited with his dog after being away.
Hiring a hitman on yourself and preparing for battle is the ultimate extreme sport.
Two paintballs colliding midair
My thoughts & prayers are with those ears
When even your fantasy starts dropping hints
Elon Musk's apology is out
"When you're going private so you plant trees to throw some last shade at TDNW before you vanish." Thanos' farm advances. The soul children will have full bellies. 1024 points will give him the resources to double, and irrigate, his farm. (See comment)
Some leaders prefer chess, others prefer hungry hippos. Travis Chapman, oil, 2018
The S.S. Ste. Claire, retired from ferrying amusement park goers, now ferries The Damned across the river Styx.
A soldier is reunited with his dog
*hits blunt*
Today I Learned
Black Panther Scene Representing the Pan-African Flag
The precision of this hydraulic press.
Let bring the game to another level
When you're fighting a Dark Souls boss and you gamble to get 'just one extra hit' in instead of rolling out of range.
"I check for traps"
Anon finds his home at last
He’s hungry
Being a single mother is a thankless job.
TIL That when you're pulling out Minigun, you're actually pulling out suitcase that then transforms into Minigun.
OMG guys don’t look!!! 🙈🙈🙈
hyubsama's emote of his own face denied for political reasons because twitch thinks its a picture of Kim Jong Un

Recursos adicionais

Abaixo deixei uma lista com recursos adicionais! A partir desse ponto, você deve estar confortável o bastante para escrever seu primeiro web scraper e conseguir extrair os dados de qualquer site. Esses são alguns recursos adicionais (em inglês) que você pode achar úteis durante a sua jornada de extração de dados na web:

• Lista de serviços de proxy de web scraping
• Lista de ferramentas úteis de web scraping
• Lista de dicas de web scraping
• Comparação de proxies de web scraping
• Documentação do Cheerio
• Documentação do Puppeteer

Os emojis ajudam você a expressar sentimentos e emoções para além dos textos. Eles também trazem vivacidade às conversas de um modo divertido e conciso.

Às vezes, no entanto, é difícil encontrar o emoji certo para usar.😒‍

Por isso, resolvi preparar uma tabela gigante deles, que você poderá simplesmente copiar e colar em qualquer editor. 😁

Como usar emojis

Para usar esses emojis, você pode copiá-los e colá-los diretamente no editor de qualquer plataforma de rede social ou onde quiser usar o emoji.

Diferentes plataformas e dispositivos exibem emojis de maneiras diferentes. Por exemplo, os dispositivos da Apple e o Facebook podem torná-los ondulados e podem ser ligeiramente arredondados no Twitter. No geral, os emojis listados neste artigo ainda funcionam em várias plataformas.

O que são e como usar os caracteres Unicode

Para utilizar os emojis, utilizamos os caracteres Unicode. Eles são padrões de codificação universais que atribuem um código a cada caractere, emoji ou símbolo.

Para inserir qualquer um dos emojis no HTML, por exemplo, troque os caracteres U+ do início de todos os caracteres, por um "e" comercial ( &), um jogo da velha ou hashtag ( #) e um x na frente, e coloque um ponto e vírgula no final.

Por exemplo, 🤣 inseriria o emoji de alguém rolando no chão de tanto rir no HTML. Consegui impedir o caractere de ser exibido diretamente colocando acentos graves na frente e atrás dele. Sem eles envolvendo o código do emoji, aparece isso: 🤣.

Para caracteres Unicode que possuem números especificados para sua execução, especialmente símbolos, você pode inseri-los no HTML sem adicionar o x. Por exemplo, — gera um travessão (—).

Observação: dependendo do navegador ou do sistema, alguns emojis podem não ser exibidos corretamente. Um exemplo disso são as bandeiras que, ao invés de mostrá-las, podem exibir somente a sigla delas. Tudo depende do suporte que cada sistema dá aos pacotes de emoji.

Lista de todos os emojis

Obrigado pela leitura. Se você achou este artigo útil, compartilhe com seus amigos.

Em JavaScript, quando você ouve o termo "laço", provavelmente pensa em usar os vários métodos de laço, como os laços for, forEach(), map(), dentre outros (textos nos links em inglês).

No caso de objetos, infelizmente, esses métodos não funcionam, pois objetos não são iteráveis. 😒

Isso não significa que não podemos ter um laço em um objeto – mas que não podemos iterar em um objeto diretamente, da mesma forma que fazemos em um array:

let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅

for (val of arr) {
  console.log(val); // ✅
}

let obj = { idade: 12, nome: "Fulano de Tal" };
obj.forEach((val) => console.log(val)); // ❌

for (val of obj) {
  console.log(val); // ❌
}

Neste artigo, você aprenderá como fazer um laço em um objeto em JavaScript. Existem dois métodos que você pode usar - sendo um deles anterior à introdução do ES6.

Como iterar por um objeto em JavaScript com um laço for…in

Antes da especificação ES6, utilizávamos o método for...in sempre que queríamos iterar em um objeto.

O laço for...in itera pelas propriedades do protótipo do objeto. Isso faz com que sempre que precisemos iterar em um objeto com o laço for…in, precisamos verificar se a propriedade pertence ao objeto usando o método hasOwnProperty, assim:

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

// Iteração pelo objeto
for (const chave in populacao) {
  if (populacao.hasOwnProperty(chave)) {
    console.log(`${chave}: ${populacao[chave]}`);
  }
}

Para evitar o estresse e a dificuldade desse laço e depender do método hasOwnProperty para verificar se há aquela propriedade, o ES6 e ES8 introduziram métodos estáticos de objetos. Eles convertem as propriedades do objeto em arrays, permitindo-nos usar métodos de array diretamente.

Como iterar um objeto em JavaScript com métodos estáticos de objeto

Um objeto é formado por propriedades, que têm pares chave-valor, ou seja, cada propriedade sempre terá um valor correspondente.

Os métodos estáticos de objeto nos permitem extrair keys(), values() ou ambas (chaves e valores) como entradas, pelo método entries(), para um array, permitindo-nos ter tanta flexibilidade sobre eles quanto temos com arrays reais.

Temos três métodos estáticos de objeto, que são:

• Object.keys()
• Object.values()
• Object.entries()

Como iterar um objeto em JavaScript com o método Object.keys()

O método Object.keys() foi introduzido no ES6. Ele pega como argumento o objeto no qual queremos fazer um laço e retorna um array contendo todos os nomes de propriedades.

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let generos = Object.keys(populacao);

console.log(generos); // ["macho","femea","outros"]

Isso agora nos permite usar qualquer método de iteração de array no array das chaves e recuperar o valor de cada propriedade do objeto:

let generos = Object.keys(populacao);

generos.forEach((genero) => console.log(genero));

Isso retornará:

"macho"
"femea"
"outros"

Também podemos usar a chave para obter o valor usando a notação de colchetes, como populacao[genero]:

generos.forEach((genero) => {
  console.log(`Há ${populacao[genero]} ${genero}`);
})

Isso retornará:

"Há 4 macho"
"Há 93 femea"
"Há 10 outros"

Antes de continuarmos, vamos usar esse método para somar toda a população fazendo um laço para sabermos a população total:

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let totalPopulacao = 0;
let generos = Object.keys(populacao);

generos.forEach((genero) => {
  totalPopulacao += populacao[genero];
});

console.log(totalPopulacao); // 107

Como iterar um objeto em JavaScript com o método Object.values()

O método Object.values() é muito semelhante ao método Object.keys() e foi introduzido no ES8. Este método utiliza como um argumento o objeto em que queremos fazer um laço e retorna um array contendo todos os valores de chave.

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let numeros = Object.values(populacao);

console.log(numeros); // [4,93,10]

Isso agora nos permite utilizar qualquer método de iteração de array para recuperar o valor (value) de cada propriedade:

let numeros = Object.values(populacao);

numeros.forEach((numero) => console.log(numeros));

Isso retornará:

4
93
10

Agora, podemos realizar o cálculo do total com eficiência, pois podemos fazer um laço diretamente no objeto, assim:

let totalPopulacao = 0;
let numeros = Object.values(populacao);

numeros.forEach((numero) => {
  totalPopulacao += numero;
});

console.log(totalPopulacao); // 107

Como iterar um objeto em JavaScript com o método Object.entries()

O método Object.entries() também foi introduzido com o ES8. Basicamente, o que ele faz é gerar um array de arrays, em que cada array interno possui dois elementos: a propriedade e o valor. Aqui vemos um exemplo:

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let populacaoArr = Object.entries(populacao);

console.log(populacaoArr);

Isso retorna:

[
  ['macho', 4]
  ['femea', 93]
  ['outros', 10]
]

Você pode usar qualquer método de array para percorrê-lo também:

for (array of populacaoArr){
  console.log(array);
}

// Output:
// ['macho', 4]
// ['femea', 93]
// ['outros', 10]

Se quisermos desestruturar o array (texto em inglês), obteremos a chave (key) e o valor (value):

for ([chave, valor] of populacaoArr){
  console.log(chave);
} 

Você pode aprender mais sobre como iterar em arrays neste artigo (texto em inglês).

Conclusão

Neste tutorial, aprendemos que a melhor forma de iterarmos por um objeto é utilizando um dos métodos estáticos de objeto, de acordo com suas necessidades, convertendo o objeto em um array antes de percorrê-lo com um laço.

Divirta-se escrevendo código!

O Node.js é um ambiente de execução de JavaScript que estende sua capacidade para o lado do servidor. Ele foi construído a partir da máquina virtual do V8, a mesma que é utilizada para executar o Javascript no Chrome.

O Node é orientado a eventos, seguindo um modelo de I/O (entrada e saída) sem bloqueio. Isso significa que ele é assíncrono e não se bloqueia para uma requisição (passando imediatamente para a próxima). É isso o que torna o Node extraordinariamente rápido e eficiente, utilizando apenas uma thread para isso tudo.

Por ser orientado a eventos, quando o Node é inicializado, ele inicia todas as variáveis ​​e funções e fica aguardando a ocorrência de um evento.

Para facilitar a evolução de projetos de software, existem bibliotecas e módulos prontos, disponibilizados pela internet, que executam funções rotineiras, fazendo com que não precisemos gastar tempo criando-as do zero. Eles geralmente são encapsulados em pacotes e distribuídos por repositórios na internet. Para gerenciar esses pacotes dentro de uma aplicação, existem os gerenciadores de pacotes.

Os gerenciadores de pacotes são responsáveis por instalar, atualizar ou remover essas dependências do seu projeto. O maior gerenciador de pacotes que existe para Node do mundo é o NPM, que é a abreviação de Node Package Manager (gerenciador de pacotes do Node). Já o NPX, que é a abreviação de Node Package Execute (executor de pacotes Node), permite que você execute qualquer pacote do npm sem precisar instalá-lo.

Você consegue baixar o npm em https://nodejs.org/en/download/.

Como escrever seu primeiro programa no Node.js (o famoso "Hello World")

Crie um arquivo chamado hello_world.js na pasta do seu projeto

Em seguida, abra esse arquivo em um editor de código, como , por exemplo, o VS Code. Insira o código console.log(“Hello World”); nele e salve o arquivo.

Abra o seu terminal de comando e navegue até a pasta onde o arquivo está.

Agora, digite node hello_world.js.

Como importar os módulos essenciais do Node

Então, vamos começar com um pacote bem básico, que é o fs (sistema de arquivos). Você o usa para criar, ler e modificar arquivos.

Para importar o módulo fs, insira este comando no arquivo: const fs = require(“fs”);.

Agora, você pode usar qualquer função desse módulo. Para saber quais são, basta consultar a documentação (em inglês).

Por exemplo, para criar um arquivo, podemos usar a função fs.writeFileSync(filename, content);.

const fs = require(“fs”);
fs.writeFileSync(“file.txt”, “Hi there..”);

Para anexar qualquer coisa no mesmo arquivo, podemos fazer assim:

fs.appendFileSync(filename, content);.

Como instalar pacotes NPM

Como exemplo, vamos usar um pacote do npm muito simples, chamado superheroes (que é uma lista de super-heróis aleatórios) para ajudar você a entender como o npm funciona.

Para instalar qualquer pacote do npm, podemos usar este comando no terminal:

npm install superheroes

Para importar o pacote que acabamos de instalar, digitamos isto no arquivo: const sh = require(“superheroes”);.

Usamos o comando abaixo para exibir o nome de um super-herói aleatório:

console.log(sh.random());.

Vamos tentar outro pacote. Instalaremos um dos pacotes do npm mais usados, ​​chamado "chalk" — ele estiliza strings de texto no terminal.

Para instalar o pacote chalk (utilizaremos a versão 2.4.2, pois ela permite importar o pacote usando o método require), digite este comando:

npm install chalk@2.4.2

Agora, para estilizar uma string de texto, use este comando para escolher a cor da string (o nome da cor precisa estar em inglês):

chalk.cor(texto)

// Exemplo: chalk.blue("Este é o texto que ficará em azul.");

Você pode ler mais sobre o pacote chalk aqui (texto em inglês).

Como iniciar o NPM em nosso programa

Iniciamos o NPM em nosso programa com:

npm init

Em seguida, você pode responder às perguntas sobre informações do projeto, ou pressionar Enter em todas elas.

Se preferir usar diretamente o comando npm init -y (que é o mesmo que pressionar Enter para todas as perguntas).

Isso resultará na criação do arquivo package.json:

O que faz, afinal, o package.json?

O package.json é o coração de qualquer projeto do Node.js. É nele que temos o registro de todas as dependências (os pacotes do NPM) e os metadados de cada projeto.

Se outra pessoa baixar o projeto, este arquivo vai ajudá-lo a instalar todas as dependências necessárias para executar o programa.

Como usar o Moment.js — um pacote do NPM

A biblioteca Moment.js é um dos pacotes do npm mais usados do Node. Com ele, você pode analisar e validar datas.

Para instalar o pacote, execute este comando no terminal:

npm i moment

Percebeu o comando i? Ele é a abreviação do install que usamos no início. Você pode usar qualquer um dos dois.

Importamos o pacote no nosso código:

const moment = require(“moment”);

Criamos um objeto Date, buscando a data e hora atual (método nativo do JavaScript):

const time = new Date();

Agora, para analisar ou formatar essa data, usaremos o pacote moment:

const parsedTime = moment(time).format("h:mm:ss");

Exibimos no console, então, o tempo analisado:

console.log(parsedTime);

Abaixo vemos o package.json do projeto, com todos os pacotes de dependências – neste caso, apenas o moment .

Também temos a pasta node_modules na pasta do projeto. Essa pasta contém todas as dependências das quais nosso projeto depende, incluindo o moment e outros pacotes dos quais ele depende.

O package-lock.json é outro arquivo em nossa pasta do projeto que contém todas as informações sobre o nome, dependências, versão das dependências e se existe alguma versão que esteja bloqueada no projeto.

Ele descreve a árvore de dependências exata que foi gerada, permitindo que qualquer nova instalação tenha uma árvore idêntica.

Como usar o Express JS — um framework do NodeJS

O Express é um framework de aplicações para a web em Node.js, que oferece uma ampla variedade de funcionalidades para aplicações da web e dispositivos móveis.

Como instalar o Express

Para instalar o Express, execute este comando:

npm install express

Você precisará importar o Express no código do projeto, assim:

const express = require("express");

Como criar uma aplicação do Express

Para criar uma aplicação do Express, basta adicionar este código:

const app = express()

Como iniciar um servidor na porta 3000

app.listen(3000, () => { 
    console.log("Server running on port 3000");
}

Agora, você consegue acessar seu servidor em http://localhost:3000.

"Cannot GET /", no entanto, significa que ainda não temos uma rota definida para "/".

Para definir a rota "/", usamos a função app.get().

A função app.get(rota, callback) é usada para lidar com todas as solicitações GET.

O parâmetro rota, é autoexplicativo. É a rota que, quando chamada, executará uma função de callback, que é definida no segundo parâmetro.

Essa função de callback terá dois argumentos, req e res, que se referem à requisição HTTP e à resposta desejada, respectivamente. Os nomes dos argumentos (req, res) não são fixos. Você pode nomeá-los como quiser.

app.get("/", (req,res) => { 
    // app.get para lidar com solicitações GET
    // req - solicitação http, res - resposta desejada
    res.send("Hello World"); // envia um Hello World para essa rota
}

Como criar um programa "Hello World" no Express

Nesta seção, criaremos o programa básico "Hello World", agora com o Express. Fica mais ou menos assim:

const express = require("express");
const app = express();
app.get("/", (req, res) => {  
    res.send("hello world");
});
app.listen(3000, () => {  
    console.log("Server running on 3000");
});

E aqui está a exibição dele no navegador:

Como renderizar arquivos estáticos no Express

Aprenderemos agora o conceito de renderização de arquivo estático usando o Express.

Primeiro, crie uma nova pasta para o projeto. Inicialize o npm usando o comando npm init -y.

Instale o pacote Express com npm i express e crie um arquivo chamado app.js.

Em seguida, crie uma aplicação que escute (inicie) o servidor na porta 3000, deste modo:

const express = require("express);
const app = express();
app.listen(3000, () => {  
    console.log("Server running on 3000");
}

Para renderizar páginas estáticas, com HTML, CSS e JS, no diretório raiz do projeto, crie uma pasta chamada public.

Como estamos focando apenas no back-end, não gastaremos muito tempo no front-end e criaremos apenas um arquivo HTML simples na pasta public.

Agora, importaremos o módulo path e juntaremos todos os caminhos que especificamos em um só: