Filipe Virgínio Vital Torres Barbosa - freeCodeCamp.org

Ficha informativa de React com exemplos reais

Filipe Virgínio Vital Torres Barbosa — Wed, 02 Apr 2025 00:57:08 +0000

Artigo original: The React Cheatsheet for 2021‬ (+ Real-World Examples)

Elaborei uma ficha informativa visual e abrangente para ajudá-lo a dominar todos os principais conceitos e recursos da biblioteca do React.

Nota da tradução: este texto foi escrito em 2021. Nos últimos três anos, algumas modificações do React podem ter tornado diversas partes deste artigo obsoletas.

Criei esta ficha informativa para ajudá-lo a otimizar seu aprendizado de React no menor tempo possível.

Ela inclui vários exemplos práticos para ilustrar cada recurso da biblioteca e como ela funciona usando padrões que você pode aplicar em seus próprios projetos.

Junto com cada trecho de código, adicionei muitos comentários úteis. Se você ler esses comentários, verá o que cada linha de código faz, como os diferentes conceitos se relacionam entre si e obterá um entendimento mais completo de como o React pode ser usado.

Observe que as palavras-chave particularmente úteis para você conhecer como desenvolvedor do React estão destacadas em negrito. Portanto, fique atento a elas.

Guia de referência rápida para revisar quando e como quiser
Inúmeros de trechos de código copiáveis para facilitar a reutilização
Leia este enorme guia onde for melhor para você. No trem, na sua mesa, na fila... em qualquer lugar.

Há muitas coisas ótimas para tratarmos. Então, vamos começar.

Deseja executar qualquer um dos trechos de código abaixo? Crie uma aplicação em React para experimentar qualquer um desses exemplos usando a ferramenta on-line (gratuita) CodeSandbox. Você pode fazer isso instantaneamente visitando react.new.

Sumário

Fundamentos do React

Hooks essenciais do React

Hooks e desempenho

Hooks avançados do React

Fundamentos do React

Elementos JSX

As aplicações em React são estruturadas usando uma sintaxe chamada JSX. Esta é a sintaxe de um elemento JSX básico.

/* 
  O JSX nos permite escrever em uma sintaxe quase idêntica à do HTML simples.
  O resultado disso é que o JSX é uma ferramenta poderosa para estruturar nossas aplicações.
  O JSX usa todas as tags HTML válidas (ou seja, div/span, h1-h6, form/input, img etc.).
*/

Alô, React!

/* 
  Observação: esse JSX não seria visível porque precisa ser renderizado por nossa aplicação usando ReactDOM.render()
*/

O JSX é a maneira mais comum de estruturar aplicações em React, mas não é obrigatório para o React.

/* O JSX é uma maneira mais simples de usar a função React.createElement()
Em outras palavras, as duas linhas a seguir no React são iguais: */

Alô, React!  // sintaxe do JSX

React.createElement('div', null, 'Alô, React!'); // sintaxe do createElement

O JSX não é compreendido pelo navegador. Ele precisa ser compilado em JavaScript puro para que o navegador possa entender.

O compilador mais comumente usado para JSX é chamado Babel.

/* 
  Quando nosso projeto é criado para ser executado no navegador, nosso JSX será convertido pelo Babel em chamadas simples da função React.createElement(). 
  Disto...
*/
const greeting = Alô React!;

/* ...para isto: */
"use strict";

const greeting = /*#__PURE__*/React.createElement("div", null, "Alô, React!");

O JSX difere do HTML de várias maneiras importantes:

/* 
  Podemos escrever JSX como se fosse HTML simples, mas na verdade ele é feito usando funções JavaScript.
  Como o JSX é JavaScript, e não HTML, há algumas diferenças:

  1) Alguns atributos JSX têm nomes diferentes dos atributos HTML. Por quê? Porque algumas palavras de atributos são palavras reservadas em JavaScript, como 'class' (classe). Em vez de class, o JSX usa 'className'.

  Além disso, como o JSX é JavaScript, os atributos que consistem em várias palavras são escritos em camelcase:
*/


  Alô, React!


/* 
  2) Os elementos JSX que consistem em apenas uma única tag (ou seja, elementos input, img, br) devem ser fechados com uma barra à direita para serem válidos (/): 
*/

 //  é um erro de sintaxe

/* 
  3) Os elementos JSX que consistem em uma tag de abertura e de fechamento (ou seja, div, span, elemento de botão) devem ter ambas ou ser fechados com uma barra à direita. Como no item 2) acima, é um erro de sintaxe ter um elemento não encerrado. 
*/

 // somente  geram um erro de sintaxe

Estilos em linha podem ser adicionados aos elementos JSX usando o atributo style. Os estilos são atualizados em um objeto, e não em um conjunto de aspas duplas, como no HTML.

Observe que os nomes das propriedades de estilo também devem ser escritos em camelcase.

/* 
  As propriedades que aceitam valores de pixel (como largura, altura, preenchimento, margem etc.) podem usar números inteiros em vez de cadeias de caracteres.
  Por exemplo: fontSize: 22. Em vez de: fontSize: "22px"
*/

  Alô, React!

Os elementos JSX são expressões JavaScript e podem ser usados como tal. O JSX nos dá todo o poder do JavaScript diretamente em nossa interface de usuário.

/* 
  Os elementos JSX são expressões (resultam em um valor) e, portanto, podem ser atribuídos a variáveis JavaScript simples... 
*/
const greeting = Alô, React!;

const isNewToReact = true;

// ... ou pode ser exibido condicionalmente
function sayGreeting() {
  if (isNewToReact) {
    // ... ou retornado de funções, etc.
    return greeting; // exibe: Alô, React!
  } else {
    return Olá novamente, React;
  }
}

O JSX nos permite inserir (ou incorporar) expressões JavaScript simples usando a sintaxe de chaves:

const year = 2021;

/* Podemos inserir valores JS primitivos (ou seja, strings, números, booleanos) entre chaves: {} */
const greeting = Alô, React, em {year};

/* Também podemos inserir expressões que resultam em um valor primitivo: */
const goodbye = Adeus ano velho: {year - 1}

/* As expressões também podem ser usadas para atributos de elementos */
const className = 'title';
const title = Meu título

/* Observação: tentar inserir valores de objetos (por exemplo: objetos, arrays, maps) entre chaves resultará em um erro */

O JSX nos permite aninhar elementos uns nos outros, como faríamos com o HTML.

/* 
  Para escrever JSX em várias linhas, coloque entre parênteses: ()
  As expressões JSX que abrangem várias linhas são chamadas de expressões multilinhas
*/

const greeting = (
  // div é o elemento pai
  
    {/* h1 e p são elementos filhos */}
    Alô!
    Bem vindo ao React
  
);
/* 'pais' e 'filhos' são a forma como descrevemos os elementos JSX em relação
uns com os outros, como se estivéssemos falando de elementos HTML */

Os comentários em JSX são escritos como comentários JavaScript de várias linhas, escritos entre chaves, como este:

const greeting = (
  
    {/* Este é um comentário de uma única linha */}
  	Alô!
    	Bem vindo ao React
    {/* Este é 
    	um comentário
        de várias linhas */} 
  
);

Todas as aplicações em React exigem três coisas:

ReactDOM.render(): usado para renderizar (exibir) nossa aplicação, montando-a em um elemento HTML
Um elemento JSX: chamado de "nó raiz", porque é a raiz da nossa aplicação. Em outras palavras, ao renderizá-lo, renderizará também todos os filhos dentro dele
Um elemento HTML (DOM): onde a aplicação é inserida em uma página HTML. O elemento geralmente é uma div com um id de valor "root", localizado em um arquivo index.html.

// Os pacotes podem ser instalados localmente ou trazidos por meio de um link de um CDN (adicionado ao cabeçalho do documento HTML)
import React from "react";
import ReactDOM from "react-dom";

// O nó raiz (geralmente um componente) é mais frequentemente chamado de "App"
const App = Alô, React!;

// ReactDOM.render(nó raiz, elemento HTML)
ReactDOM.render(App, document.getElementById("root"));

Componentes e props

O JSX pode ser agrupado em funções individuais chamadas componentes.

Há dois tipos de componentes no React: componentes de função e componentes de classe.

Os nomes de componentes, sejam para componentes de função ou de classe, são capitalizados para distingui-los das funções JavaScript simples que não retornam JSX:

import React from "react";

/* 	
  Componente de função
  Observe o nome da função capitalizado: 'Header', e não 'header'
*/
function Header() {
  return Alô, React;
}

// Os componentes de função que usam uma sintaxe de arrow function também são válidos
const Header = () => Alô, React;

/* 
  Componente de classe
  Os componentes de classe têm mais boilerplate (observe a palavra-chave 'extends' e o método 'render'.)
*/
class Header extends React.Component {
  render() {
    return Alô, React;
  }
}

Os componentes, apesar de serem funções, não são chamados como funções JavaScript comuns. Eles são executados ao renderizá-los como faríamos com o JSX em nossa aplicação.

// Chamamos esse componente de função como uma função normal?

// Não, para executá-las e exibir o JSX que elas retornam...
const Header = () => Alô, React;

// ...usamos como elementos JSX 'personalizados'.
ReactDOM.render(, document.getElementById("root"));
// renderiza: Alô, React

A grande vantagem dos componentes é sua capacidade de serem reutilizados em todas as aplicações, sempre que necessário.

Como os componentes aproveitam o poder das funções JavaScript, podemos passar dados logicamente para eles, como faríamos ao passar um ou mais argumentos.

/* 
  Os componentes Header e Footer podem ser reutilizados em qualquer página da nossa aplicação.
  Os componentes eliminam a necessidade de reescrever o mesmo JSX várias vezes.
*/

// Componente IndexPage, visível na rota '/' de nosso aplicativo
function IndexPage() {
  return (
    
      
      
      
    
  );
}

// Componente AboutPage, visível na rota '/about'.
function AboutPage() {
  return (
    
      
      
      
      
    
  );
}

Os dados passados aos componentes em JavaScript são chamados de props. As props são idênticas aos atributos dos elementos JSX/HTML simples, mas você pode acessar seus valores dentro do próprio componente.

Props estão disponíveis nos parâmetros do componente para o qual são passadas. Props são sempre incluídas como propriedades de um objeto.

/* 
  O que fazemos se quisermos passar dados personalizados para o nosso componente a partir de um componente pai?
  Por exemplo, para exibir o nome do usuário no cabeçalho da aplicação.
*/

const username = "John";

/* 
  Para isso, adicionamos 'atributos' personalizados ao nosso componente, chamados props.
  Podemos adicionar muitos deles como quisermos e dar a eles nomes adequados aos dados que passamos.
Para passar o nome do usuário para o cabeçalho, usamos uma prop que chamamos apropriadamente de 'username'
*/
ReactDOM.render(
  ,
  document.getElementById("root")
);
// Chamamos essa prop de 'username', mas podemos usar qualquer identificador válido que daríamos, por exemplo, uma variável JavaScript

// props é o objeto que cada componente recebe como argumento
function Header(props) {
  // as props que criamos no componente (username)
  // se tornam propriedades no objeto props
  return Hello {props.username};
}

As props nunca devem ser alteradas diretamente no componente filho.

Outra maneira de dizer isso é que as props nunca devem sofrer mutação, pois são um objeto JavaScript simples.

/* 
  Os componentes devem operar como funções 'puras'.
  Ou seja, para cada entrada, devemos poder esperar o mesmo resultado.
  Isso significa que não podemos alterar o objeto props, apenas ler a partir dele.
*/

// Não podemos modificar o objeto props :
function Header(props) {
  props.username = "Doug";

  return Hello {props.username};
}
/* 
  O que faríamos se quiséssemos modificar um valor de prop que é passado para o nosso componente?
  É nesse caso que usaríamos o state (consulte a seção useState).
*/

A prop de filhos é útil se quisermos passar elementos/componentes como props para outros componentes.

// Podemos aceitar elementos (ou componentes) React como props?
// Sim, por meio de uma propriedade especial no objeto props chamada 'children'

function Layout(props) {
  return {props.children};
}

// A propriedade children é muito útil para quando você deseja que o mesmo
// componente (como um componente Layout) para envolver todos os outros componentes:
function IndexPage() {
  return (
    
      
      
      
    
  );
}

// página diferente, mas usa o mesmo componente Layout (graças à prop children)
function AboutPage() {
  return (
    
      
      
    
  );
}

Mais uma vez, como os componentes são expressões JavaScript, podemos usá-los em combinação com instruções if-else e switch para exibir conteúdo de modo condicional, como neste exemplo:

function Header() {
  const isAuthenticated = checkAuth();
    
  /* se o usuário estiver autenticado, mostrar a aplicação autenticada; caso contrário, a aplicação não autenticado */
  if (isAuthenticated) {
    return    
  } else {
    /* Como alternativa, podemos eliminar a seção else e fornecer um simples retorno, e a condicional funcionará da mesma maneira */
    return    
  }
}

Para usar condições no JSX retornado de um componente, você pode usar o operador ternário ou o curto-circuito (operadores && e ||).

function Header() {
  const isAuthenticated = checkAuth();

  return (
    
      {/* Se isAuth for verdadeiro, não mostrará nada. Se for falso, mostre Logo  */}
      {isAuthenticated || }
      {/* Se isAuth for verdadeiro, exibirá AuthenticatedApp. Se for falso, exibirá Login  */}
      {isAuthenticated ?  : }
      {/* Se isAuth for verdadeiro, exibirá o Footer. Se for falso, não mostrará nada */}
      {isAuthenticated && }
    
  );
}

Fragments são componentes especiais para exibir vários componentes sem adicionar um elemento extra ao DOM. Eles são ideais para a lógica condicional que tem vários componentes ou elementos adjacentes.

/*
  Podemos aprimorar a lógica do exemplo anterior.
  Se isAuthenticated for verdadeiro, como exibimos os componentes AuthenticatedApp e Footer?
*/
function Header() {
  const isAuthenticated = checkAuth();

  return (
    
      
      {/* 
        Podemos renderizar os dois componentes com um fragment. 
        Fragments são muito concisos: <> 
      */}
      {isAuthenticated ? (
        <>
          
          
        
      ) : (
        
      )}
    
  );
}
/* 
  Observação: uma sintaxe alternativa para fragments é React.Fragment:
  
     
     
  
*/

Listas e chaves

Use a função .map() para converter listas de dados (arrays) em listas de elementos.

const people = ["John", "Bob", "Fred"];
const peopleList = people.map(person => {person});

.map() pode ser usado para componentes, bem como para elementos JSX simples.

function App() {
  const people = ['John', 'Bob', 'Fred'];
  // pode interpolar a lista retornada de elementos em {}
  return (
    
      {/* estamos passando cada elemento do array como props para Person */}
      {people.map(person => }
    
  );
}

function Person({ name }) {
  // acessamos a propriedade 'name' diretamente usando a desestruturação de objetos
  return This person's name is: {name};
}

Cada elemento do React em uma lista de elementos precisa de uma key prop especial. As keys são essenciais para que o React possa manter o controle de cada elemento que está sendo iterado com a função .map().

O React usa keys (em português, chaves) para atualizar com desempenho elementos individuais quando seus dados são alterados (em vez de renderizar novamente a lista inteira).

As keys precisam ter valores únicos para que seja possível identificar cada uma delas de acordo com o valor da key.

function App() {
  const people = [
    { id: 'Ksy7py', name: 'John' },
    { id: '6eAdl9', name: 'Bob' },
    { id: '6eAdl9', name: 'Fred' },
  ];

  return (
    
      {/* as chaves precisam ser valores primitivos, de preferência uma string exclusiva, como um ID */}
      {people.map(person =>
         
      )}
    
  );
}

// Se você não tiver alguns IDs em seu conjunto de dados que sejam valores únicos e primitivos, use o segundo parâmetro de .map() para obter o índice de cada elemento.

function App() {
  const people = ['John', 'Bob', 'Fred'];

  return (
    
      {/* usar o índice do elemento do array como chave */}
      {people.map((person, i) => )}
    
  );
}

Ouvintes de eventos e tratamento de eventos

A escuta de eventos em elementos JSX em contraste com elementos HTML difere em alguns aspectos importantes.

Primeiro, você não pode ouvir eventos em componentes do React – somente em elementos JSX. Adicionar uma propriedade chamada onClick, por exemplo, a um componente do React seria apenas outra propriedade adicionada ao objeto props.

/* 
  A convenção para a maioria das funções de manipulador de eventos é prefixá-las com a palavra 'handle' e, em seguida, com a ação que elas executam (por exemplo, handleToggleTheme)
*/
function handleToggleTheme() {
  // código para alternar o tema da aplicação
}

/* Em HTML, onclick está todo em letras minúsculas, e o manipulador de eventos inclui um conjunto de parênteses após ser referenciado */


/* 
  Em JSX, onClick é camelcase, como os atributos / props.
  Também passamos uma referência à função com chaves.
*/

Os eventos do React mais importantes a serem conhecidos são onClick, onChange e onSubmit.

onClick lida com eventos de clique em elementos JSX (ou seja, em botões)
onChange trata de eventos de teclado (ou seja, um usuário digitando em um campo de input ou textarea)
onSubmit trata os envios de formulários do usuário

function App() {
  function handleInputChange(event) {
    /* Ao passar a função para um manipulador de eventos, como onChange, obtemos acesso aos dados sobre o evento (um objeto) */
    const inputText = event.target.value; // texto digitado no input
    const inputName = event.target.name; // 'email' do atributo name
  }

  function handleClick(event) {
    /* O onClick normalmente não precisa de dados de eventos, mas também recebe dados de eventos que podemos usar */
    console.log('clicked!');
    const eventType = event.type; // "click"
    const eventTarget = event.target; // 
  }
    
  function handleSubmit(event) {
    /* 
     Quando pressionarmos o botão de retorno, o formulário será enviado, assim como quando um botão com type=“submit” for clicado.
     Chamamos event.preventDefault() para evitar que o comportamento padrão do formulário ocorra, que é enviar uma solicitação HTTP e recarregar a página.
    */
    event.preventDefault();
    const formElements = event.target.elements; // acessar todos os elementos do formulário
    const inputValue = event.target.elements.emailAddress.value; // acessar o valor do elemento de entrada com o id “emailAddress”
  }

  return (
    
      
      
    
  );
}

Hooks essenciais do React

State e useState

O hook useState nos fornece o state (em português, estado) em um componente de função. O state nos permite acessar e atualizar determinados valores em nossos componentes ao longo do tempo.

O state do componente local é gerenciado pelo hook useState do React, que nos fornece uma variável de state e uma função que nos permite atualizá-la.

Quando chamamos useState, podemos dar ao nosso state um valor padrão, fornecendo-o como o primeiro argumento quando chamamos useState.

import React from 'react';

/* 
  Como você cria uma variável do state?
  Syntax: const [stateVariable] = React.useState(defaultValue);
*/
function App() {
  const [language] = React.useState('JavaScript');
  /* 
    Usamos a desestruturação do array para declarar a variável do state.
    Como qualquer variável, declaramos que podemos dar a ela o nome que quisermos (neste caso, 'language').
  */

  return Estou aprendendo {language};
}

Observação: qualquer hook nesta seção é da biblioteca principal do React e pode ser importado individualmente.

import React, { useState } from "react";

function App() {
  const [language] = useState("javascript");

  return Estou aprendendo {language};
}

useState também nos fornece uma função 'setter' para atualizar o state depois que ele é criado.

function App() {
  /* 
   A função setter é sempre o segundo valor desestruturado.
   A convenção de nomenclatura da função setter deve ser prefixada com 'set'.
  */
  const [language, setLanguage] = React.useState("javascript");

  return (
    
      
      {/*  
        Por que usar uma arrow function em linha aqui em vez de chamá-la imediatamente assim: onClick={setterFn()}? 
        Se fosse assim, setLanguage seria chamado imediatamente e não quando o usuário clicasse no botão.
        */}
      Agora estou aprendendo {language}
    
  );
}

/* 
 Observação: sempre que a função setter é chamada, o state é atualizado,
 e o componente da aplicação é renderizado novamente para exibir o novo state.
 Sempre que o state for atualizado, o componente será renderizado novamente.
*/

useState pode ser usado uma ou várias vezes em um único componente. Ele pode aceitar valores primitivos ou objetos para gerenciar o state.

function App() {
  const [language, setLanguage] = React.useState("python");
  const [yearsExperience, setYearsExperience] = React.useState(0);

  return (
    
      
       setYearsExperience(event.target.value)}
      />
      Agora estou aprendendo {language}
      Eu tenho {yearsExperience} anos de experiência
    
  );
}

Se o novo state depender do anterior, para garantir que a atualização seja feita de maneira confiável, podemos usar uma função dentro da função setter que nos forneça o state anterior correto.

/* Temos a opção de organizar o state usando o tipo de dado mais adequado, de acordo com os dados que estamos gerenciando */
function App() {
  const [developer, setDeveloper] = React.useState({
    language: "",
    yearsExperience: 0
  });

  function handleChangeYearsExperience(event) {
    const years = event.target.value;
    /* Devemos passar o objeto de state anterior que tínhamos com o operador spread para distribuir todas as suas propriedades */
    setDeveloper({ ...developer, yearsExperience: years });
  }

  return (
    
      {/* Não há necessidade de obter o state anterior aqui; estamos substituindo o objeto inteiro */}
      
      {/* Também podemos passar uma referência para a função */}
      
      Agora estou aprendendo {developer.language}
      Eu tenho {developer.yearsExperience} anos de experiência
    
  );
}

Se você estiver gerenciando vários valores primitivos, usar o useState várias vezes geralmente é melhor do que usá-lo uma vez com um objeto. Você não precisa se preocupar em esquecer de combinar o state antigo com o novo.

function App() {
  const [developer, setDeveloper] = React.useState({
    language: "",
    yearsExperience: 0,
    isEmployed: false
  });

  function handleToggleEmployment(event) {
    /* Obtemos o valor da variável do state anterior nos parâmetros.
       Podemos nomear 'prevState' como quisermos.
    */
    setDeveloper(prevState => {
      return { ...prevState, isEmployed: !prevState.isEmployed };
      // É essencial retornar o novo estado a partir dessa função
    });
  }

  return (
    
  );
}

Efeitos colaterais e useEffect

useEffect nos permite executar efeitos colaterais em componentes de função. Então, o que são efeitos colaterais?

Efeitos colaterais ocorrem quando precisamos entrar em contato com o mundo externo. Por exemplo, buscar dados de uma API ou trabalhar com o DOM.

São ações que podem alterar o state do nosso componente de modo imprevisível (causando 'efeitos colaterais').

useEffect aceita uma função de callback (chamada de função de 'efeito') que, por padrão, será executada sempre que houver uma nova renderização.

Ela é executada quando nosso componente é montado, que é o momento certo para executar um efeito colateral no ciclo de vida do componente.

/* O que o nosso código faz? Escolhe uma cor do array de cores e a transforma em cor de fundo */
import React, { useState, useEffect } from 'react';

function App() {
  const [colorIndex, setColorIndex] = useState(0);
  const colors = ["blue", "green", "red", "orange"];

  /* 
    Estamos causando um 'efeito colateral', pois estamos trabalhando com uma API.
    Estamos trabalhando com o DOM, uma API do navegador fora do React.
  */
  useEffect(() => {
    document.body.style.backgroundColor = colors[colorIndex];
  });
  /* Sempre que o state é atualizado, a aplicação é renderizada novamente e o useEffect é executado */

  function handleChangeColor() {
    /* Esse código pode parecer complexo, mas tudo o que ele faz é ir para a próxima cor no array 'colors' e, se estiver na última cor, voltar ao início */
    const nextIndex = colorIndex + 1 === colors.length ? 0 : colorIndex + 1;
    setColorIndex(nextIndex);
  }

  return (
    
  );
}

Para evitar a execução da chamada da callback do efeito após cada renderização, fornecemos um segundo argumento, um array vazio.

function App() {
  ...
  /* 
    Com um array vazio, nosso botão não funciona, não importa quantas vezes clicarmos nele... 
    A cor de fundo é definida apenas uma vez, quando o componente é montado pela primeira vez.
  */
  useEffect(() => {
    document.body.style.backgroundColor = colors[colorIndex];
  }, []);

  /* 
    Como evitar que a função de efeito seja executada a cada atualização de estado e, ainda assim, fazer com que ela funcione sempre que o botão for clicado?
  */

  return (
    
  );
}

useEffect nos permite executar efeitos condicionalmente com o array de dependências.

Um array de dependências é o segundo argumento e, se qualquer um dos valores do array for alterado, a função de efeito será executada novamente.

function App() {
  const [colorIndex, setColorIndex] = React.useState(0);
  const colors = ["blue", "green", "red", "orange"];

  /* 
    Vamos adicionar colorIndex ao nosso array de dependências
    Quando o colorIndex for alterado, o useEffect executará a função de efeito novamente
  */
  useEffect(() => {
    document.body.style.backgroundColor = colors[colorIndex];
    /* 
      Quando usamos o useEffect, precisamos pensar em quais valores de state
      queremos que nosso efeito colateral seja sincronizado
    */
  }, [colorIndex]);

  function handleChangeIndex() {
    const next = colorIndex + 1 === colors.length ? 0 : colorIndex + 1;
    setColorIndex(next);
  }

  return (
    
  );
}

useEffect nos permite cancelar a assinatura de determinados efeitos retornando uma função no final.

function MouseTracker() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  React.useEffect(() => {
    // .addEventListener() configura um ouvinte ativo...
    window.addEventListener("mousemove", handleMouseMove);

    /* ...Portanto, quando saímos desta página, ele precisa ser
       removido para parar de ouvir. Caso contrário, ele tentará definir o
       state em um componente que não existe (causando um erro)

     Cancelamos a inscrição de todas as inscrições/ouvintes com essa “função de limpeza”)
     */
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

function handleMouseMove(event) {
   setMousePosition({
     x: event.pageX,
     y: event.pageY
   });
}

  return (
    
      A posição atual do mouse é:
      
        X: {mousePosition.x}, Y: {mousePosition.y}
      
    
  );
}

useEffect é o hook a ser usado quando você quiser fazer uma solicitação HTTP (ou seja, uma solicitação GET quando o componente for montado).

Observe que o tratamento de promises com a sintaxe mais concisa async/await exige a criação de uma função separada. (Por quê? Porque a função de callback do efeito não pode ser assíncrona).

const endpoint = "https://api.github.com/users/reedbarger";

// Usando funções de callback .then() para resolver a promise
function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch(endpoint)
      .then(response => response.json())
      .then(data => setUser(data));
  }, []);
}

// Usando a sintaxe async/ await para resolver a promise:
function App() {
  const [user, setUser] = React.useState(null);
  // não é possível tornar assíncrona a função de callback useEffect
  React.useEffect(() => {
    getUser();
  }, []);

  // Devemos aplicar a palavra-chave async a uma função separada
  async function getUser() {
    const response = await fetch(endpoint);
    const data = await response.json();
    setUser(data);
  }
}

Refs e useRef

Refs são um atributo especial que está disponível em todos os componentes do React. Eles nos permitem criar uma referência a um determinado elemento/componente quando o componente é montado.

O useRef nos permite usar facilmente as refs do React. Chamamos useRef (na parte superior do componente) e anexamos o valor retornado ao atributo ref do elemento para fazer referência a ele.

Depois de criarmos uma referência, usamos a propriedade current para modificar (silenciar) as propriedades do elemento ou podemos chamar quaisquer métodos disponíveis nesse elemento (como .focus() para focalizar uma entrada).

function App() {
  const [query, setQuery] = React.useState("react hooks");
  /* Podemos passar um valor padrão para useRef.
     Não precisamos dele aqui, então passamos null para fazer referência a um objeto vazio
  */
  const searchInput = useRef(null);

  function handleClearSearch() {
    /* 
      .current faz referência ao elemento de entrada na montagem
      useRef pode armazenar basicamente qualquer valor em sua propriedade .current
    */
    searchInput.current.value = "";
    searchInput.current.focus();
  }

  return (
    
       setQuery(event.target.value)}
        ref={searchInput}
      />
      
      
    
  );
}

Hooks e desempenho

Prevenção de novas renderizações e React.memo

React.memo é uma função que nos permite otimizar o modo como nossos componentes são renderizados.

Em particular, ela executa um processo chamado memoização que nos ajuda a evitar que nossos componentes sejam renderizados novamente quando não for necessário (consulte React.useMemo para obter uma definição mais completa de memoização).

O React.memo ajuda mais a evitar que listas de componentes sejam renderizadas novamente quando seus componentes pai são renderizados novamente.

/* 
  Na aplicação a seguir, estamos mantendo o controle de nossas habilidades de programação. Podemos criar novas habilidades usando uma entrada, e elas são adicionadas à lista (mostrada no componente SkillList). Se clicarmos em uma habilidade, ela será excluída.
*/

function App() {
  const [skill, setSkill] = React.useState('')
  const [skills, setSkills] = React.useState([
    'HTML', 'CSS', 'JavaScript'
  ])

  function handleChangeInput(event) {
    setSkill(event.target.value);
  }

  function handleAddSkill() {
    setSkills(skills.concat(skill))
  }

  return (
    <>
      
      
      
    
  );
}

/* O problema, se você mesmo executar esse código, é que, quando digitamos no input, como o componente pai da SkillList (App) é renderizado novamente, devido à atualização do state a cada pressionamento de tecla, a SkillList é renderizada constantemente (conforme indicado pelo console.log) */

/* No entanto, quando envolvemos o componente SkillList no React.memo (que é uma função de ordem superior, o que significa que ele aceita uma função como argumento), ele não será mais renderizado desnecessariamente quando nosso componente pai o fizer. */
const SkillList = React.memo(({ skills }) => {
  console.log('renderizando novamente');
  return (
    
    {skills.map((skill, i) => {skill})}
    
  )
})

export default App

**Funções de callback e useCallback**

useCallback é um hook usado para melhorar o desempenho do nosso componente. Funções de callback são os nomes das funções que são "chamadas de volta" em um componente pai.

O uso mais comum é ter um componente pai com uma variável de state, mas você deseja atualizar esse estado em um componente filho. O que você faz? Você passa uma função de callback para o filho a partir do pai. Isso nos permite atualizar o state no componente pai.

useCallback funciona de maneira semelhante ao React.memo. Ele memoriza as funções de callback, para que não sejam recriadas a cada nova renderização. O uso correto do useCallback pode melhorar o desempenho da nossa aplicação.

/* Vamos manter exatamente a mesma aplicação acima com o React.memo, mas adicionar uma pequena funcionalidade. Vamos permitir a exclusão de uma habilidade quando clicarmos nela. Para fazer isso, precisamos filtrar o array de habilidades de acordo com a habilidade em que clicamos. Para isso, criamos a função handleRemoveSkill no App */

function App() {
  const [skill, setSkill] = React.useState('')
  const [skills, setSkills] = React.useState([
    'HTML', 'CSS', 'JavaScript'
  ])

  function handleChangeInput(event) {
    setSkill(event.target.value);
  }

  function handleAddSkill() {
    setSkills(skills.concat(skill))
  }

  function handleRemoveSkill(skill) {
    setSkills(skills.filter(s => s !== skill))
  }
    
  /* Em seguida, passamos handleRemoveSkill como uma prop ou, como se trata de uma função, como uma função de callback a ser usada na SkillList */
  return (
    <>
      
      
      
    
  );
}

/* Quando tentamos digitar a entrada novamente, vemos uma nova renderização no console toda vez que digitamos. Nossa memoização do React.memo está quebrada! 

O que está acontecendo é que a função de callback handleRemoveSkill está sendo recriada toda vez que a aplicação é renderizada, fazendo com que todos os filhos também sejam renderizados. Precisamos envolver handleRemoveSkill em useCallback e fazer com que ela seja recriada somente quando o valor da habilidade for alterado.

Para corrigir nossa aplicação, substitua handleRemoveSkill por:

const handleRemoveSkill = React.useCallback((skill) => {
  setSkills(skills.filter(s => s !== skill))
}, [skills])

Experimente você mesmo!
*/
const SkillList = React.memo(({ skills, handleRemoveSkill }) => {
  console.log('renderizando novamente');
  return (
    
    {skills.map(skill =>  handleRemoveSkill(skill)}>{skill})}
    
  )
})


export default App

Memoização e useMemo

useMemo é muito semelhante ao useCallback e serve para melhorar o desempenho. Em vez de ser para callbacks, no entanto, ele serve para armazenar os resultados de cálculos custosos.

useMemo nos permite memoizar ou lembrar o resultado de cálculos custosos quando eles já foram feitos para determinadas entradas.

Memoização significa que, se um cálculo já foi feito antes com uma determinada entrada, não há necessidade de fazê-lo novamente, pois já temos o resultado armazenado dessa operação.

useMemo retorna um valor do cálculo, que é então armazenado em uma variável.

/* Com base em nossa aplicação de habilidades, vamos adicionar um recurso para pesquisar nossas habilidades disponíveis por meio de uma entrada de pesquisa adicional. Podemos adicionar isso em um componente chamado SearchSkills (mostrado acima da nossa SkillList).
*/

function App() {
  const [skill, setSkill] = React.useState('')
  const [skills, setSkills] = React.useState([
    'HTML', 'CSS', 'JavaScript', ...milhares de outros itens
  ])

  function handleChangeInput(event) {
    setSkill(event.target.value);
  }

  function handleAddSkill() {
    setSkills(skills.concat(skill))
  }

  const handleRemoveSkill = React.useCallback((skill) => {
    setSkills(skills.filter(s => s !== skill))
  }, [skills])
   
  return (
    <>
      
      
      
      
    
  );
}

/* Vamos imaginar que temos uma lista de milhares de habilidades que queremos pesquisar. Como podemos encontrar e mostrar de modo eficiente as habilidades que correspondem ao nosso termo de pesquisa à medida que o usuário digita? */
function SearchSkills() {
  const [searchTerm, setSearchTerm] = React.useState('');  
      
  /* Usamos o React.useMemo para memorizar (lembrar) o valor retornado de nossa operação de pesquisa e executá-lo somente quando o searchTerm for alterado */
  const searchResults = React.useMemo(() => {
    return skills.filter((s) => s.includes(searchTerm);
  }), [searchTerm]);
    
  function handleSearchInput(event) {
    setSearchTerm(event.target.value);
  }
    
  return (
    <>
    
    
      {searchResults.map((result, i) => {result}
    
    
  );
}


export default App

Hooks avançados no React

Contexto e useContext

No React, queremos evitar o seguinte problema de criar várias props para passar dados para dois ou mais níveis abaixo de um componente principal.

/* 
  O React Context nos ajuda a evitar a criação de várias props duplicadas.
  Esse padrão também é chamado de perfuração de props.
*/

/* Nesta aplicação, queremos passar os dados do usuário para o componente Header, mas primeiro eles precisam passar por um componente Main que não os utiliza */
function App() {
  const [user] = React.useState({ name: "Fred" });

  return (
    // Primeira prop 'user'
    
  );
}

const Main = ({ user }) => (
  <>
    {/* Segunda prop 'user' */}
    
    Conteúdo do Main...
  
);

const Header = ({ user }) => Bem vindo, {user.name}!
;

O contexto é útil para transmitir props em vários níveis de componentes filhos a partir de um componente pai.

/* 
  Aqui está o exemplo anterior reescrito com o Context.
  Primeiro, criamos o contexto, no qual podemos passar os valores padrão.
  Chamamos isso de "UserContext" porque estamos transmitindo dados do usuário
*/
const UserContext = React.createContext();

function App() {
  const [user] = React.useState({ name: "Fred" });

  return (
    {/* 
      Envolvemos o componente pai com a propriedade Provider.
      Passamos os dados pela árvore de componentes na propriedade value.
     */}
    
      
    
  );
}

const Main = () => (
  <>
    
    Conteúdo do app Main
  
);

/* 
  Não podemos remover as duas propriedades 'user'. Em vez disso, podemos simplesmente usar a propriedade Consumer para consumir os dados onde precisamos deles
*/
const Header = () => (
    {/* Usamos um padrão chamado render props para obter acesso aos dados */}
    
      {user => Bem vindo, {user.name}!}
    
);

O hook useContext nos permite consumir o contexto em qualquer componente de função que seja filho do provedor, em vez de usar o padrão de renderização das props.

function Header() {
  /* Passamos o objeto de contexto inteiro para consumi-lo e podemos remover as tags de Consumer */
  const user = React.useContext(UserContext);
    
  return Bem vindo, {user.name}!;
};

Redutores e useReducer

Os redutores são funções simples e previsíveis (puras) que recebem um objeto de state anterior e um objeto de ação e retornam um novo objeto de state.

/* Esse redutor gerencia o state do usuário em nossa aplicação: */

function userReducer(state, action) {
  /* Os redutores geralmente usam um comando switch para atualizar o state de uma maneira ou de outra com base na propriedade de tipo da ação */
    
  switch (action.type) {
    /* Se action.type tiver a string 'LOGIN', obteremos dados do objeto payload na ação */
    case "LOGIN":
      return { 
        username: action.payload.username, 
        email: action.payload.email
        isAuth: true 
      };
    case "SIGNOUT":
      return { 
        username: "",
        email: "",
        isAuth: false 
      };
    default:
      /* Se nenhum caso corresponder à ação recebida, retorne ao state anterior */
      return state;
  }
}

Redutores são um padrão poderoso para gerenciar states, usado na popular biblioteca de gerenciamento de state do Redux (comumente usada com o React).

Os redutores podem ser usados no React com o hook useReducer para gerenciar o state em toda a aplicação, em comparação com o useState (que é para o state do componente local).

O useReducer pode ser combinado com o useContext para gerenciar dados e transmiti-los facilmente entre os componentes.

Assim, useReducer + useContext pode ser um sistema completo de gerenciamento de state para nossas aplicações.

const initialState = { username: "", isAuth: false };

function reducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { username: action.payload.username, isAuth: true };
    case "SIGNOUT":
      // também poderia se espalhar no initialState aqui
      return { username: "", isAuth: false };
    default:
      return state;
  }
}

function App() {
  // useReducer requer uma função redutora para ser usada e um initialState
  const [state, dispatch] = useReducer(reducer, initialState);
  // Obtemos o resultado atual do redutor em 'state'

  // usamos o dispatch para 'despachar' ações, para executar nosso redutor
  // com os dados de que ele precisa (o objeto de ação)
  function handleLogin() {
    dispatch({ type: "LOGIN", payload: { username: "Ted" } });
  }

  function handleSignout() {
    dispatch({ type: "SIGNOUT" });
  }

  return (
    <>
      Usuário atual: {state.username}, isAuthenticated: {state.isAuth}
      
      
    
  );
}

Escrevendo hooks personalizados

Os hooks foram criados para reutilizar facilmente um comportamento entre componentes, da mesma forma que os componentes foram criados para reutilizar a estrutura em nossa aplicação.

Os hooks nos permitem adicionar funcionalidades personalizadas às nossas aplicações que atendam às nossas necessidades e podem ser combinados com todos os hooks existentes que abordamos.

Os hooks também podem ser incluídos em bibliotecas de terceiros para o bem de todos os desenvolvedores do React. Há muitas bibliotecas React excelentes que fornecem hooks personalizados, como @apollo/client, react-query, swr e outras.

/* Aqui está um hook personalizado do React chamado useWindowSize que escrevi para calcular o tamanho da janela (largura e altura) de qualquer componente no qual ele é usado */

import React from "react";

export default function useWindowSize() {
  const isSSR = typeof window !== "undefined";
  const [windowSize, setWindowSize] = React.useState({
    width: isSSR ? 1200 : window.innerWidth,
    height: isSSR ? 800 : window.innerHeight,
  });

  function changeWindowSize() {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  }

  React.useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
}

/* Para usar o hook, basta importá-lo para onde for necessário, chamá-lo e usar a largura sempre que quisermos ocultar ou mostrar determinados elementos, como em um componente Header. */

// components/Header.js

import React from "react";
import useWindowSize from "../utils/useWindowSize";

function Header() {
  const { width } = useWindowSize();

  return (
    
      {/* visível somente quando a janela for maior que 500px */}
      {width > 500 && (
        <>
         Maior que 500px!
        
      )}
      {/* visível em qualquer tamanho de janela */}
	  Estou sempre visível
    
  );
}

Regras dos hooks

Há duas regras essenciais para o uso de hooks do React que não podem ser violadas para que funcionem corretamente:

Os hooks só podem ser usados em componentes de função (não em funções JavaScript simples ou componentes de classe)
Os hooks só podem ser chamados na parte superior dos componentes (não podem estar em condicionais, laços ou funções aninhadas)

Conclusão

Há outros conceitos interessantes que você pode aprender, mas se você se comprometer a aprender os conceitos abordados nesta ficha informativa, terá uma ótima compreensão das partes mais importantes e poderosas da biblioteca do React.

Como criar seu primeiro gráfico em JavaScript com o JSCharting

Filipe Virgínio Vital Torres Barbosa — Tue, 14 May 2024 21:00:00 +0000

Artigo original: How to make your first JavaScript chart with JSCharting

Quando se está começando como desenvolvedor JavaScript iniciante, acho que é importante buscar projetos interessantes. Assim, você pode se divertir enquanto aprende e provavelmente encontrará uma área de especialização que seja do seu agrado.

Como se costuma dizer, "se você ama o que faz, nunca trabalhará um dia sequer em sua vida".

Fonte: giphy.com

Neste artigo, apresentarei a visualização de dados de front-end, que é minha paixão pessoal. Talvez ela também se torne sua paixão!

Os momentos mais gratificantes para mim como desenvolvedor são quando posso ver ou experimentar os resultados do que criei. É muito gratificante criar um gráfico que revela insights interessantes sobre seus dados ou uma experiência interativa que ajuda a explorar detalhes de um conjunto de dados exclusivo. Quanto mais significativo for o resultado, mais gratificante será a sensação.

No entanto, percebi que a quantidade de trabalho que você dedica a um projeto não está necessariamente relacionada à sensação de realização – às vezes, a sensação é ótima mesmo quando foi relativamente fácil.

Com o tempo, você encontrará ferramentas que o ajudarão a ser mais eficiente e, às vezes, você moverá montanhas com pouco esforço. Há muitas bibliotecas de gráficos e ferramentas disponíveis na área de visualização de dados. Com as ferramentas certas, você criará novos gráficos com pouco esforço, independentemente do tipo de gráfico de que precisar. Pessoalmente, acho que a visualização dos dados gera uma grande recompensa pelo seu investimento de tempo e esforço.

Neste tutorial, você usará várias ferramentas para obter dados pela Internet, processará esses dados e desenhará um belo gráfico que pode ser visualizado em qualquer navegador moderno. Você pode clicar nos links abaixo para baixar o código de exemplo de cada etapa individualmente, visualizar todos no GitHub, ou baixar todas as etapas de uma só vez aqui: all-steps.zip.

O resultado

Ao final do tutorial, você criará este gráfico interativo orientado por dados. Você aprenderá a obter dados pela Internet, a processá-los e a criar um gráfico com esses dados. Você também poderá criar seus próprios gráficos do zero.

Gráfico de linha interativo feito em JavaScript

Depois de processar os dados e fazer o gráfico, você também aprenderá a fazer ajustes no gráfico, incluindo a modificação da legenda padrão, a ativação de pontos de foco (em inglês, crosshairs) no eixo x com dicas (em inglês, tooltips) e a aplicação de anotações de texto para adicionar contexto e outras informações ao gráfico.

As ferramentas

Para começar, use um navegador da internet como o que você provavelmente está usando para ler este artigo. Recomendo o Chrome, pois ele oferece uma ótima experiência e ferramentas integradas para desenvolvedores.

Em seguida, você precisará de um editor de texto. Algo simples como o bloco de notas funcionará. No entanto, sugiro usar um editor de código mais avançado, como o VS Code, pois esse é um ambiente no qual você passará muito tempo. Ele proporcionará a você uma experiência de programação mais conveniente e agradável, além de tornar a escrita em HTML5, CSS e JavaScript mais agradável aos olhos. O mais importante é que, se você esquecer uma citação ou uma vírgula em algum lugar, um editor de código poderá ajudá-lo a encontrar o erro.

Este artigo pode ajudá-lo a escolher o melhor editor de código em JavaScript para o desenvolvimento para a Web (texto em inglês).

Você usará a biblioteca de gráficos JSCharting para desenhar e adicionar a funcionalidade interativa ao gráfico automaticamente. Não serão necessárias outras bibliotecas do JavaScript, como o jQuery, ou plataformas de front-end, como o React e o Angular (comumente usadas em projetos de sites).

Por que JSCharting?

O JSCharting é uma biblioteca de gráficos em JavaScript que pode desenhar muitos tipos diferentes de gráficos usando SVG. Ela é fácil de usar e de começar a aprender, sendo, portanto, é uma boa opção para este tutorial. A API (Interface de Programação de Aplicativos, ou seja, as opções e configurações necessárias para criar gráficos) torna as coisas difíceis mais simples e é uma boa opção para fazer experiências com visualizações de dados.

Você pode usar o JSCharting gratuitamente para uso pessoal e comercial com a marca incluída.

Você pode criar gráficos responsivos com o JSCharting por meio de algumas etapas simples:

Defina uma tag
no HTML com um ID único.
Forneça essa id, os dados e quaisquer outras opções ao chamar JSC.Chart() no arquivo JavaScript.

É isso. O JSC desenhará um gráfico de aparência profissional preenchendo essa tag div com elementos visuais em SVG. O gráfico será responsivo e interativo sem nenhum esforço extra.

Os dados

Você usará um arquivo de dados fornecido pelo NCHS (National Center for Health Statistics, o Centro Nacional de Estatísticas em Saúde) que lista a expectativa de vida histórica de homens e mulheres nos EUA.

Você pode encontrar esses dados aqui: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Esse arquivo CSV contém dados que categorizam as expectativas de vida por ano, raça e sexo. Você usará alguns desses dados para desenhar uma simples linha de tendência para homens e mulheres nos últimos 100 anos.

O arquivo CSV (de Comma Separated Values, que significa valores separados por vírgula) é um formato muito bom para transmitir dados pela Internet. É compacto, legível por humanos e você pode abri-lo diretamente no Excel, o que também é ótimo.

Portanto, sem mais delongas, vamos começar.

Fonte: giphy.com

Passo 1 – adicionar um gráfico em branco

O primeiro arquivo zip contém um ponto de partida em branco que pode ser preenchido à medida que avançamos. Se você se perder ou ficar confuso, ou se quiser pular adiante, o arquivo zip no final ou ao longo de cada seção o deixará atualizado.

Se desejar fazer o download de todos os arquivos de uma só vez, pegue o arquivo all-steps.zip.

step1-a.zip

Esse arquivo zip contém os seguintes arquivos:

index.html
js/index.js

O arquivo .html está vazio, exceto por algum código padrão que o torna um arquivo válido, enquanto o arquivo .js está completamente vazio.

A primeira coisa a fazer é adicionar alguns scripts ao arquivo HTML da página da Web. Normalmente, as pessoas sugerem adicionar tags

O URL dessa biblioteca aponta para uma CDN (Content Delivery Network – em português, rede de distribuição de conteúdo). Ela hospeda o código do gráfico e torna conveniente adicionar rapidamente a biblioteca a qualquer página HTML para criar protótipos de gráficos e fazer experimentos. Você também pode baixar e usar a biblioteca localmente ou usar o pacote npm em seu projeto, mas a CDN não exige nenhuma etapa adicional.

Em seguida, usando a mesma técnica, adicione outra tag de script fazendo referência ao seu arquivo JavaScript em branco. Adicione esse script após o script de jscharting.js para que tenha a seguinte aparência:

Ótimo. Estamos quase prontos para desenhar um gráfico em branco. A última coisa que você precisa fazer é adicionar uma tag

dentro do arquivo HTML para definir onde queremos que este gráfico seja desenhado.

Adicione este código HTML dentro das tags .

A div deve ter um id para que você possa informar ao gráfico em qual div deve ser desenhada. Nesse caso, o id é chartDiv.

Você pode notar o atributo style da tag

. Ele faz com que a div tenha 50% da largura da janela e 300 pixels de altura. O estilo de margem margin: 0 auto; centraliza a div na página. O gráfico será preenchido independentemente do tamanho da div, portanto, alterar o tamanho da div é uma boa maneira de controlar o tamanho do gráfico.

Está tudo pronto com o arquivo HTML. Abra o arquivo index.js e adicione um gráfico em branco a essa página escrevendo o seguinte código, que inclui a div id chartDiv:

JSC.Chart('chartDiv', {});

Abra o arquivo index.html em um navegador (arraste e solte o arquivo em um navegador da Web como o Chrome).

Ainda não há muito para ver, mas você pode notar um pequeno logotipo da JSC nesta página. Isso indica que um gráfico está conectado e sendo desenhado.

A logo do JSCharting mostra que o gráfico está funcionando

step1-b.zip

Passo 2 – brinque um pouco com o gráfico

Para testar, vamos adicionar alguns valores para o gráfico visualizar e ver como ele funciona.

Voltando ao arquivo index.js, substitua o conteúdo pelo código a seguir, que adiciona mais opções ao gráfico.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});

Agora, atualize (F5) a janela do navegador onde a página index.html está carregada.

Gráfico de barras horizontais com uma série e dois pontos

Muito bom! Você acabou de criar seu primeiro gráfico usando JavaScript.

Fonte: giphy.com

Você criou um gráfico de barras ao definir a opção de tipo de gráfico como 'horizontal column'. Se você preferir uma coluna vertical, defina o valor como 'column'. Você também adicionou uma série com dois pontos ao gráfico para Maçãs e Laranjas (Apples e Oranges, em inglês, respectivamente).

Todos os dados do gráfico são compostos de séries e pontos. Uma série é simplesmente um grupo de pontos de dados. Os gráficos podem conter uma ou mais séries de dados. Os pontos de dados consistem em valores que mapeiam os eixos x e y. Os pontos também podem incluir muitas outras variáveis e valores descritivos.

O exemplo acima contém apenas uma série. Agora vamos dar uma olhada nas opções para um gráfico com duas séries. Substitua o conteúdo do arquivo JavaScript por este código.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         name:'Andy',
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 32}
         ]
      },{
         name:'Anna',
         points: [
            {x: 'Apples', y: 30},
            {x: 'Oranges', y: 22}
         ]
      }
   ]
});

Ao atualizar da janela do navegador será exibido este gráfico.

Gráfico de barras horizontais com duas séries

As opções do gráfico são semelhantes. Ainda é um gráfico de barras, mas dessa vez há um objeto extra no array de séries. Também adicionamos propriedades de nome para cada série para que o gráfico possa identificá-las na legenda.

Se estiver interessado em criar gráficos diferentes, como gráficos de radar, gráficos de área, gráficos de pizza, gráficos de Gantt ou até mesmo gráficos de mapa de calor de calendário, dê uma olhada na galeria de exemplos do JSCharting e o código-fonte (opções de gráfico) usado para criar esses gráficos. Você pode aprender rapidamente a usar outros recursos de gráficos copiando os exemplos disponíveis.

step2.zip

Passo 3 – prepare os dados

Fonte: giphy.com

O formato de dados CSV é exatamente isso: valores separados por vírgula. O arquivo contém linhas e cada linha representa um registro ou entrada. Normalmente, a primeira linha de valores contém os nomes de cada valor separado por vírgula (coluna). As linhas subsequentes contêm os valores propriamente ditos.

name,age
chris,26
mike,34

O CSV é legível por humanos, mas há variações desse formato. Às vezes, se os valores contiverem vírgulas (por exemplo, endereços de correspondência), o formato não funcionará como está, de modo que cada valor também é envolvido por aspas. Dessa forma, as vírgulas dentro das aspas são ignoradas e o formato ainda pode funcionar usando apenas as vírgulas fora das aspas para separar os valores.

"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"

Os valores também podem ser separados usando um caractere diferente, como tabulações no lugar de vírgulas.

Não vamos, porém, nos prender a minúcias. O JSCharting fornece várias ferramentas que ajudam nesse processo e usaremos uma delas para não nos preocuparmos com o formato do arquivo CSV e convertê-lo em JSON (JavaScript Object Notation). O resultado será um array de objetos. Cada objeto representa uma linha com propriedades nomeadas. A primeira linha do arquivo CSV é usada para definir os nomes dessas propriedades.

Este é o url dos dados nos quais estamos interessados: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Você pode clicar para fazer o download e abri-lo no Excel.

Arquivo CSV aberto no Excel

No entanto, você fará o download e acessará esses dados CSV em tempo real usando o código JavaScript. O código abaixo pode ser um pouco confuso no início, mas é curto e você pode reutilizá-lo para obter qualquer arquivo CSV, texto ou JSON pela internet de modo programático. É semelhante à antiga tecnologia AJAX, mas muito mais simples de usar.

Mais uma vez, substitua o conteúdo do arquivo index.js pelo seguinte:

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
	csvToSeries(text);
   })
   .catch(function (error) {
      //Something went wrong
      console.log(error);
   });

function csvToSeries(text) {
   console.log(text);
}

Por que é tão complicado? É porque quando você solicita um arquivo, ele não fica disponível imediatamente. Há um atraso e você precisa aguardar a chegada do arquivo. Portanto, primeiro você solicita o arquivo de outro site usando fetch().

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')

Em seguida, o código dentro da função de argumento then(...) é chamado com a resposta quando ela chega. Essa função converte a resposta em texto e a retorna, que passa o resultado para a próxima função do método then().

.then(function (response) {
	return response.text();
})

A próxima função do método then(...) chama a função csvToSeries() e passa o texto como argumento.

.then(function (text) {
	csvToSeries(text);
})

Na função do método catch(), você pode especificar o que fazer se algo der errado. Por exemplo, talvez a internet não esteja disponível ou o URL não esteja correto.

.catch(function (error) {
	//Something went wrong
	console.log(error);
});

Nesse caso, o erro é enviado para o console.

Na função csvToSeries(), passamos esse texto para o console para inspeção.

function csvToSeries(text) {
   console.log(text);
}

Observação: a função fetch() nativa não é compatível com o Internet Explorer 11. Se você também quiser oferecer suporte a esse navegador, poderá usar a função JSC.fetch() que vem com o JSCharting. Ela oferece a mesma funcionalidade, mas acrescenta suporte adicional ao IE11.

Arraste o arquivo index.html para uma janela do navegador (ou atualize a página se já estiver aberta) e pressione F12. Isso abrirá a janela DevTools do navegador Chrome. Por padrão, a metade inferior da janela do DevTools mostrará a saída do console. É para lá que o texto é enviado quando você executa códigos usando:

console.log(text);

Saída da janela do console

Você também pode colar ou escrever código nessa janela do console para executá-lo. Tente colar todo o trecho de código acima na janela do console (ao lado do caractere >) e pressione Enter. Você perceberá que obtém o mesmo resultado na saída da janela do console. Isso pode ser útil para testar uma linha de código e fazer experimentos.

step3-a.zip

Neste ponto, você recuperou o texto do arquivo CSV pela internet e o enviou ao console para provar que ele funciona. Agora podemos começar a trabalhar com ele.

Vamos dar uma olhada nesse arquivo de dados para ter uma ideia do que há nele: https://data.cdc.gov/resource/w9j2-ggv5.csv

Usei o Excel para classificar as linhas pela coluna do ano para analisar as linhas de dados de um único ano.

Os dados do CSV, ordenados por ano.

Cada ano contém 9 linhas com dados baseados em raça e sexo. Estamos interessados apenas nos valores destacados de homens e mulheres de todas as raças para cada ano. Você criará duas séries com base nas linhas destacadas. Uma série para valores femininos e outra para valores masculinos.

Agora que você tem uma ideia do que precisa acontecer, vamos começar.

Primeiro, vamos usar a função JSC.csv2Json() para converter o texto no formato JSON e passá-lo para o console para ver o que ele faz.

Atualize a função csvToSeries() com o seguinte código:

function csvToSeries(text) {
   let dataAsJson = JSC.csv2Json(text);
   console.log(dataAsJson)
}

Atualize o navegador para ver a saída atualizada do console.

Dados do CSV convertidos para JSON usando a função utilitária JSC.csv2Json()

O console mostra um array de 1062 registros. Este é um desses registros:

{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

Observação: o console pode exibir arrays e objetos para inspeção e você pode expandir e recolher seções no console para explorar detalhes.

O nome da propriedade average_life_expectancy é um pouco longo, mas você precisará usá-lo. Para evitar digitá-lo mais de uma vez, defina uma constante para armazenar esse nome. Quando você precisar usar essa propriedade, basta escrever o nome da constante lifeExp. Ela terá esta aparência, row[lifeExp], em vez de row.average_life_expectancy.

Adicione esta linha na parte superior da função csvToSeries().

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	...

Você pode processar esses dados usando JavaScript simples. O resultado final que queremos são duas séries com pontos de dados que incluem um ano e a expectativa de vida para cada ponto.

Atualize a função csvToSeries() com o seguinte código:

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		console.log(row);
	});
}

Ele define arrays para pontos de dados masculinos e femininos. Em seguida, ele chama a função array dataAsJson.forEach() passando uma função de retorno de chamada (callback) function(row){...} como argumento. A função forEach() executará a função de retorno de chamada para cada item no array dataAsJson. Por enquanto, chamaremos apenas console.log(row) em cada linha que a função de retorno de chamada encontrar.

Atualize o navegador e inspecione a saída do console.

Cada objeto de linha que a função de retorno de chamada encontrou

Vamos adicionar alguma lógica para filtrar os dados que desejamos e registrar o resultado na janela do console. Substitua a função csvToSeries() por este código.

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		if (row.race === 'All Races') {
			if (row.sex === 'Male') {
				male.push({x: row.year, y: row[lifeExp]});
			} else if (row.sex === 'Female') {
				female.push({x: row.year, y: row[lifeExp]});
			}
		}
	});
    console.log([male, female]);
}

Dentro da função de retorno de chamada, você decide se a linha é de interesse e a utiliza. Caso contrário, você a descarta.

if (row.race === 'All Races') {
	if (row.sex === 'Male') {
		//add data to male array
		male.push({x: row.year, y: row[lifeExp]});
	} else if (row.sex === 'Female') {
		//add data to female array
		female.push({x: row.year, y: row[lifeExp]});
	}
}

A lógica verifica se o valor row.race é igual a 'All Races'. Se for, verifica se a propriedade row.sex é igual a 'Male' ou 'Female'. Se a linha for igual a qualquer uma delas, ele adiciona os dados aos arrays male ou female como um objeto de ponto {x, y}. Observe o uso da constante lifeExp definida acima, que ajuda a encurtar esse código.

No final, você usou console.log([male, female]) para passar as variáveis male e female (masculino e feminino, em inglês) para o console para inspeção e para garantir que o código funcionou conforme o esperado.

Depois de atualizar o navegador, o console mostra o resultado, que são dois arrays, cada um com 118 pontos de dados que abrangem os anos de 1900 a 2017.

Os arrays de pontos masculinos e femininos

Por fim, em vez de passar o resultado para o console, envolva esses pontos de dados em um array de duas séries que o gráfico possa usar diretamente e retorne-os.

Adicione este código no final da função csvToSeries():

return [
   {name: 'Male', points: male},
   {name: 'Female', points: female}
];

Se o valor retornado fosse enviado para o console, ele produziria este resultado:

Dois objetos de série que o gráfico pode consumir diretamente

Como você pode ver, a lógica para filtrar as linhas é bastante simples e você pode ajustá-la para obter outros detalhes desse conjunto de dados.

Para saber mais sobre como lidar com arquivos CSV usando os utilitários do JSCharting, consulte este tutorial. Quando você estiver pronto para um tratamento de dados mais avançado, o utilitário JSC.nest() poderá ser usado para criar séries e pontos a partir de dados JSON com muito pouco código.

step3-b.zip

Passo 4 – juntando tudo

A seção de manipulação de dados foi a etapa mais difícil, mas só ela permitirá que você manipule e extraia dados de interesse de qualquer arquivo CSV. É aqui que tudo se encaixa e que você terá uma sensação de realização.

Comece adicionando uma função renderChart() ao final do arquivo index.js. Você passará os dados da série para essa função como um argumento.

function renderChart(series){
   JSC.Chart('chartDiv', {
      series: series
   });
}

Na função do método then() que chama a função csvToSeries(), passe o resultado da série para a função renderChart() para ver o que ela desenha no navegador.

.then(function (text) {
	let series = csvToSeries(text);
	renderChart(series);
})

step4-a.zip

Agora, atualize o navegador. Você deverá ver este gráfico que usa os dados CSV processados na seção anterior. Não é incrível?

Gráfico de linhas mostrando dados CSV filtrados

Uau, o que aconteceu em 1918? A expectativa de vida caiu significativamente lá. De acordo com a Wikipédia, houve uma pandemia de gripe envolvendo o vírus H1N1 que dizimou uma parte da população mundial. Esse evento infeliz mostra como a visualização de dados fornece insights que você normalmente não obteria apenas observando os números.

Você criou um gráfico usando o tipo de série de linhas padrão e ele está com boa aparência, mas pode fazer alguns ajustes para melhorá-lo ainda mais.

Primeiro, adicione um título na parte superior para explicar o que o usuário está vendo e uma anotação na parte inferior do gráfico para dar crédito à fonte dos dados. Atualize a função do construtor JSC.Chart() para passar as seguintes opções:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
		series: series
	});
}

Quando você atualiza o navegador, pode ver o gráfico atualizado.

Gráfico de linhas com título e anotação para atribuição

Você adicionou uma anotação com texto do rótulo e uma configuração de posição. Também podemos usar outra anotação para o título, mas foi mais fácil usar o rótulo do título neste exemplo.

É fácil controlar a posição da anotação usando valores como 'top right' ou 'inside bottom right'. O valor 'inside' significa que a anotação é colocada dentro da área do gráfico onde os dados são desenhados. Este exemplo de gráfico de posições de caixa demonstra todas as opções de configuração de posição.

A legenda mostra a soma dos valores de pontos de cada série, mas a soma não é importante para esse conjunto de dados. Você pode reduzir as colunas de legenda para mostrar apenas o ícone e o nome da série usando essa configuração:

legend_template: '%icon,%name'

No entanto, você não precisa realmente usar uma legenda. Será mais limpo se simplesmente rotular as próprias linhas. Você pode desativar a legenda e instruir o gráfico a escrever o nome da série no último ponto de cada série de linhas com essas opções de gráfico:

legend_visible: false,
defaultSeries_lastPoint_label_text: '%seriesName',

Gráfico de linhas usando rótulos de pontos em vez de uma legenda

O token'%seriesname' é um dos muitos tokens relacionados a pontos que podem ser usados em qualquer texto de rótulo de ponto para mostrar detalhes e cálculos de pontos.

Por fim, vamos ativar a tooltip do eixo x para mostrar a expectativa de vida masculina e feminina em um determinado ano. Em dispositivos móveis, você pode tocar no gráfico para ver a tooltip. Ao usar um PC, a tooltip é exibida ao passar o mouse sobre o gráfico.

xAxis_crosshair_enabled: true,

Você deve estar se perguntando: por que todos esses sublinhados nos nomes das propriedades? Esse não é o nome real da propriedade. É uma forma abreviada de escrever:

xAxis: {crosshair: {enabled: true}},

Você pode achar mais conveniente especificar uma configuração com sublinhados e o JSCharting entenderá o que você quer dizer.

O texto padrão da tooltip é claro, mas vamos personalizá-lo um pouco para torná-lo nosso.

Tooltip combinada padrão

Como tooltip mostra informações sobre cada ponto, o texto é definido nas opções de ponto. A propriedade defaultPoint define as opções de ponto que todos os pontos herdarão automaticamente.

defaultPoint_tooltip: '%seriesName %yValue years',

Tooltip personalizada combinada

Para obter mais informações sobre esse recurso, consulte o tutorial sobre mouse de mira (ponto focal) e tooltip (texto em inglês).

Quando você aplicar todas essas opções, seu código será semelhante ao trecho a seguir. Substitua toda a função renderChart() por este código:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
        legend_visible: false,
		defaultSeries_lastPoint_label_text: '%seriesName',
		defaultPoint_tooltip: '%seriesName %yValue years',
		xAxis_crosshair_enabled: true,
		series: series
	});
}

Atualize a janela do navegador mais uma vez.

Gráfico de linhas com mouse de mira e tooltip personalizada combinados

Você conseguiu!

Fonte: giphy.com

Primeiro, você buscou dados CSV usando JavaScript nativo. Em seguida, você os converteu no formato JSON e filtrou os dados em duas séries. Com essas séries, você criou um belo gráfico de linhas interativo usando o JSCharting e o configurou para ter uma aparência profissional.

Você pode personalizar e ajustar ainda mais os gráficos para atender às suas necessidades específicas. Visite a seção de tutoriais para saber mais sobre um tópico específico ou encontre gráficos semelhantes ao que deseja criar na galeria de exemplos e copie-os para continuar sua jornada de visualização de dados.

Se tiver problemas ao trabalhar com o JSCharting, sinta-se à vontade para entrar em contato com a equipe de suporte. Eles terão prazer em orientá-lo ou ajudar a resolver qualquer problema que você possa encontrar.

step4-b.zip

Desafio adicional

Não usamos todos os dados disponíveis nesse arquivo CSV. Vamos fazer experiências com ele para nos divertirmos e praticarmos.

Crie este gráfico usando o que você aprendeu:

Desafio: replicar este gráfico por conta própria

Este arquivo zip contém a resposta:

step5-bonus.zip

Você consegue pensar em outros gráficos que pode fazer com esses dados? Continue experimentando e aproveite cada minuto!

Tutorial de promises em JavaScript – como concluir ou rejeitar promises em JS

Filipe Virgínio Vital Torres Barbosa — Mon, 13 May 2024 21:00:00 +0000

Artigo original: JavaScript Promise Tutorial – How to Resolve or Reject Promises in JS

Promises são blocos de construção importantes para operações assíncronas em JavaScript. Você pode pensar que as promises não são tão fáceis de entender, aprender e usar – acredite, você não está sozinho!

As promises (em português, promessas) são um desafio para muitos desenvolvedores da Web, mesmo depois de passar anos trabalhando com elas.

Neste artigo, quero tentar mudar essa percepção ao compartilhar o que aprendi sobre promises em JavaScript nos últimos anos. Espero que seja útil para você.

**O que é uma promise no JavaScript?**

Uma Promise é um objeto especial no JavaScript. Ela produz um valor após uma operação assícrona (também conhecida como async) ser concluída com êxito, ou um erro se ela não for concluída com sucesso, seja porque excedeu o limite de tempo, por erro de rede etc.

As conclusões de chamadas bem-sucedidas são indicadas pela chamada da função resolve e os erros são indicados pela chamada da função reject.

Você pode criar uma promise usando o construtor de promises da seguinte forma:

let promise = new Promise(function(resolve, reject) {    
    // Faz uma chamada assíncrona e conclui ou rejeita essa chamada
});

Na maioria dos casos, uma promise pode ser usada para uma operação assíncrona. Entretanto, tecnicamente, você pode concluir/rejeitar operações síncronas e assíncronas.

Espere aí, não temos funções de `callback` para operações assíncronas?

Sim, está correto. Temos funções de callback no JavaScript. Porém, uma função de callback não é algo especial no JavaScript. É uma função normal que produz resultados após a conclusão de uma chamada assíncrona (com sucesso/erro).

A palavra "assíncrona" significa que algo acontece no futuro, não agora. Normalmente, callbacks são usadas apenas para fazer coisas como chamadas de rede ou fazer upload/download de coisas, se comunicar com bancos de dados e assim por diante.

Embora callbacks sejam úteis, elas também têm uma grande desvantagem. Às vezes, podemos ter uma callback dentro de outra callback que está em outra callback e assim por diante. Sério! Vamos entender esse "inferno de callbacks" (do inglês, callback hell) com um exemplo.

Como evitar o inferno de callbacks – exemplo do PizzaHub

Vamos pedir uma pizza Marguerita vegana 🍕 do PizzaHub. Quando fazemos o pedido, o PizzaHub detecta automaticamente nossa localização, encontra uma pizzaria próxima e verifica se a pizza que estamos pedindo está disponível.

Se estiver disponível, ele detecta que tipo de bebida recebemos gratuitamente junto com a pizza e, por fim, faz o pedido.

Se o pedido for feito com sucesso, receberemos uma mensagem com uma confirmação.

Então, como podemos codificar isso usando funções de callback? Eu criei algo parecido com isso:

function pedirPizza(tipo, nome) {
    
    // Consulta a pizzahub por uma loja
    query(`/api/pizzahub/`, function(resultado, erro){
       if (!error) {
           let idLoja = resultado.idLoja;
           
           // Obtém a loja e consulta as pizzas
           query(`/api/pizzahub/pizza/${idLoja}`, function(resultado, erro){
               if (!erro) {
                   let pizzas = resultado.pizzas;
                   
                   // Verifica se minha pizza está disponível
                   let minhaPizza = pizzas.find((pizza) => {
                       return (pizza.tipo===tipo && pizza.nome===nome);
                   });
                   
                   // Verifique se há bebidas gratuitas
                   query(`/api/pizzahub/bebidas/${minhaPizza.id}`, function(resultado, erro){
                       if (!erro) {
                           let bebida = resultado.id;
                           
                           // Prepara um pedido
                           query(`/api/pedido`, {'tipo': tipo, 'nome': nome, 'bebida': bebida}, function(resultado, erro){
                              if (!erro) {
                                  console.log(`Seu pedido de ${tipo} ${nome} com ${bebida} foi realizado`);
                              } else {
                                  console.log(`Infelizmente, não temos pizzas para você hoje!`);
                              }
                           });

                       }
                   })
               }
           });
       } 
    });
}

// Chama a função orderPizza
pedirPizza('vegetariana', 'marguerita');

Vamos dar uma olhada na função pedirPizza no código acima.

Ela chama uma API para obter o ID da pizzaria mais próxima. Depois disso, obtém a lista de pizzas disponíveis nesse restaurante. Então, ela verifica se a pizza que estamos pedindo foi encontrada e faz outra chamada à API para encontrar as bebidas para essa pizza. Por fim, a API de pedidos faz o pedido.

Aqui usamos uma callback para cada uma das chamadas de API. Isso nos leva a usar outra callback dentro da anterior, e assim por diante.

Isso significa que entramos em algo que chamamos (de forma muito expressiva) de Inferno de Callbacks. Ninguém quer isso, certo? Isso também forma uma pirâmide de código que não é apenas confusa, mas também propensa a erros.

Demonstração do inferno das callbacks e a pirâmide gerada

Há algumas maneiras de sair do (ou não entrar no) inferno de callbacks. A mais comum é usar uma Promise ou função async. No entanto, para entender bem as funções async, primeiro é preciso ter uma boa compreensão das Promises.

Portanto, vamos começar e nos aprofundar nas promises.

Entendendo os estados das promises

Apenas para revisar, uma promise pode ser criada com a sintaxe de construtor, dessa maneira:

let promise = new Promise(function(resolve, reject) {
  // Código a ser executado
});

A função construtora recebe uma função como argumento. Essa função é chamada de função executora.

// Função executora passada como um argumento 
// para o construtor da Promise
function(resolve, reject) {
    // Sua lógica entra aqui...
}

A função executora recebe dois argumentos: resolve e reject. Essas são as funções de callback fornecidas pela linguagem JavaScript. Sua lógica está dentro da função executora, que é executada automaticamente quando uma new Promise é criada.

Para que a promise seja eficaz, a função executora deve chamar uma das funções de callback, resolve ou reject. Aprenderemos mais sobre isso em detalhes daqui a pouco.

O construtor new Promise() retorna um objeto promise. Como a função executora precisa lidar com operações assíncronas, o objeto promise retornado deve ser capaz de informar quando a execução foi iniciada, concluída (resolved) ou retornada com erro (rejected).

Um objeto promise tem as seguintes propriedades internas:

state – essa propriedade pode ter os seguintes valores:

pending – inicialmente, quando a função executora inicia a execução.
fulfilled – quando a promise é concluída.
rejected – quando a promise é rejeitada.

Estados da promise

2. result – essa propriedade pode ter os seguintes valores:

undefined – inicialmente, quando o valor do state é pending.
value – quando resolve(value) é chamada.
error – quando reject(error) é chamada.

Essas propriedades internas são inacessíveis ao código, mas podem ser inspecionadas. Isso significa que poderemos inspecionar os valores das propriedades state e result usando a ferramenta de depuração, mas não poderemos acessá-las diretamente usando o programa.

É possível inspecionar as propriedades internas de uma promise

O estado de uma promise pode ser pending (pendente), fulfilled (cumprida) ou rejected (rejeitada). Uma promise que é resolvida ou rejeitada é chamada de settled (liquidada).

Uma promise liquidada é cumprida ou rejeitada

**Como as promises são concluídas e rejeitadas**

Aqui temos um exemplo de uma promise que será concluída imediatamente (estado fulfilled) com o valor Estou pronto.

let promise = new Promise(function(resolve, reject) {
    resolve("Estou pronto");
});

A promise abaixo será rejeitada (estado rejected) com a mensagem de erro Algo não está correto!.

let promise = new Promise(function(resolve, reject) {
    reject(new Error('Algo não está correto!'));
});

Um ponto importante a observar:

Uma função executora de promises deve chamar apenas uma função resolve ou uma função reject. Uma vez que um estado seja alterado (pending => fulfilled ou pending => rejected), acabou. Qualquer outra chamada para resolve ou para reject será ignorada.

let promise = new Promise(function(resolve, reject) {
  resolve("Com certeza serei resolvido!");

  reject(new Error('Isso será ignorado?')); // ignorado
  resolve("Ignorado?"); // ignorado
});

No exemplo acima, apenas o primeiro a ser resolvido será chamado e os demais serão ignorados.

Como lidar com uma promise depois de criá-la

Uma Promise usa uma função executora para concluir uma tarefa (principalmente de maneira assíncrona). Uma função consumidora (que usa um resultado da promise) deve ser notificada quando a função executora concluir (com sucesso) ou rejeitar (com erro).

Os métodos, .then(), .catch() e .finally(), ajudam a criar o vínculo entre a função executora e as funções consumidoras para que possam estar em sincronia quando uma promise for concluída (resolve) ou rejeitada (reject).

Funções executora e consumidora

Como usar o método `.then()` da promise

O método .then() deve ser chamado no objeto promise para lidar com um resultado (resolve) ou um erro (reject).

Aceita duas funções como parâmetros. Normalmente, o método .then() deve ser chamado a partir da função consumidora em que você gostaria de saber o resultado da execução de uma promise.

promise.then(
  (result) => { 
     console.log(result);
  },
  (error) => { 
     console.log(error);
  }
);

Se estiver interessado apenas em resultados bem-sucedidos, pode passar apenas um argumento, desta maneira:

promise.then(
  (result) => { 
      console.log(result);
  }
);

Se você estiver interessado apenas no erro, poderá passar null para o primeiro argumento, assim:

promise.then(
  null,
  (error) => { 
      console.log(error)
  }
);

No entanto, pode tratar melhor os erros usando o método .catch(), que veremos em um minuto.

Vamos dar uma olhada em alguns exemplos de tratamento de resultados e erros usando os métodos .then e .catch . Tornaremos esse aprendizado um pouco mais divertido com algumas requisições assíncronas reais. Usaremos a PokeAPI para obter informações sobre Pokémons e concluí-las/rejeitá-las usando promises.

Primeiro, vamos criar uma função genérica que aceita um URL da PokeAPI como argumento e retorna uma promise. Se a chamada à API for bem-sucedida, uma promise concluída será retornada. Uma promise rejeitada é retornada para qualquer tipo de erro.

A partir de agora, usaremos essa função em vários exemplos para obter uma promise e trabalhar com ela.

function getPromise(URL) {
  let promise = new Promise(function (resolve, reject) {
    let req = new XMLHttpRequest();
    req.open("GET", URL);
    req.onload = function () {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject("Ocorreu um erro!");
      }
    };
    req.send();
  });
  return promise;
}

Método utilitário para obter uma promise

Exemplo 1: obter informações de 50 Pokémons:

const ALL_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon?limit=50';

// Já discutimos essa função!
let promise = getPromise(ALL_POKEMONS_URL);

const consumer = () => {
    promise.then(
        (result) => {
            console.log({result}); // Exibe o retorno de 50 Pokémons no console do navegador
        },
        (error) => {
            // Como o URL é válido, isso não será chamado.
            console.log('Encontramos um erro!'); // Exibe um erro no console do navegador
    });
}

consumer();

Exemplo 2: vamos tentar um URL inválido

const POKEMONS_BAD_URL = 'https://pokeapi.co/api/v2/pokemon-bad/';

// Isso será rejeitado porque o URL retorna erro 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.then(
        (result) => {
            // A promise não foi concluída. Portanto, ela não será executada.
            console.log({result});
        },
        (error) => {
            // Uma promise rejeitada executará o seguinte
            console.log('We have encountered an Error!'); // Exibe um erro no console do navegador
        }
    );
}

consumer();

Como usar o método `.catch()` da promise

Você pode usar esse método para lidar com erros (rejeições) das promises. A sintaxe de passar null como o primeiro argumento para .then() não é uma boa maneira de tratar erros. Portanto, temos o .catch() para fazer o mesmo trabalho com uma sintaxe simples:

// Isso será rejeitado porque o URL retorna 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.catch(error => console.log(error));
}

consumer();

Se lançarmos um erro usando new Error("Algo está errado!") em vez de chamar o reject da função executora e dos métodos da promise, ele ainda será tratado como uma rejeição. Isso significa que será capturado pelo método .catch.

O mesmo se aplica a todas as exceções síncronas que ocorrem no executor da promise e nas funções.

Aqui está um exemplo onde será tratado como uma rejeição e o método .catch será chamado:

new Promise((resolve, reject) => {
  throw new Error("Algo está errado!");// Sem chamada rejeitada
}).catch((error) => console.log(error));

Como usar o método `.finally()` da promise

O método .finally() realiza tarefas de limpeza como parar um carregamento, fechar uma conexão ativa e assim por diante. O método finally() será chamado independentemente da promise retornar um resultado (resolve) ou um erro (reject). Ele passa o resultado ou o erro para o próximo método, que pode chamar os métodos .then() ou .catch() novamente.

Aqui temos um exemplo que ajudará você a entender os três métodos juntos:

let loading = true;
loading && console.log('Carregando...');

// Obtendo a Promise
promise = getPromise(ALL_POKEMONS_URL);

promise.finally(() => {
    loading = false;
    console.log(`Promessa resolvida e o carregamento é ${loading}`);
}).then((result) => {
    console.log({result});
}).catch((error) => {
    console.log(error)
});

Explicando em detalhes:

O método .finally() torna o carregamento false.
Se a promise retornar um resultado (resolve), o método .then() será chamado. Se a promise retornar um erro (reject), o método .catch() será chamado. O .finally() será chamado independentemente do resolve ou do reject.

**O que é encadeamento de promises?**

A chamada promise.then() sempre retorna uma promise. Essa promise terá o state como pending e result como undefined. Ela nos permite chamar o próximo método .then em uma nova promise.

Quando o primeiro método .then retornar um valor, o próximo método .then pode recebê-lo. O segundo pode passar para o terceiro .then() e assim por diante. Isto forma uma cadeia de métodos .then para transmitir as promises. Esse fenômeno é chamado de Cadeia de Promises.

Cadeia de promises

Aqui está um exemplo:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
}).catch(error => {
    console.log('In the catch', error);
});

Aqui, primeiro obtemos uma promise resolvida e, em seguida, extraímos o URL para chegar ao primeiro Pokémon. Em seguida, retornamos esse valor e ele será passado como uma promise para a próxima função .then(). Daí o resultado,

https://pokeapi.co/api/v2/pokemon/1/

O método .then pode retornar tanto:

Um valor (já vimos isso)
Uma nova promise.

Também pode lançar um erro.

Aqui está um exemplo em que criamos uma cadeia de promises com os métodos .then que retornam resultados e uma nova promise:

// Promise Chain with multiple then and catch
let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
}).then(pokemon => {
    console.log(JSON.parse(pokemon));
}).catch(error => {
    console.log('In the catch', error);
});

Na primeira chamada de .then, extraímos o URL e o retornamos como um valor. Esse URL será passado para a segunda chamada .then na qual estamos retornando uma nova promise tendo esse URL como argumento.

Essa promise será resolvida e passada para a cadeia, onde obteremos as informações sobre o Pokémon. Aqui está o resultado:

Resultado da chamada da cadeia de promises

Caso ocorra um erro ou a rejeição de uma promise, o método .catch da cadeia será chamado.

Um ponto a ser observado: chamar .then várias vezes não forma uma cadeia de promises. Você pode acabar fazendo algo assim apenas para introduzir um bug no código:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
});
promise.then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
});
promise.then(pokemon => {
    console.log(JSON.parse(pokemon));
});

Chamamos o método .then três vezes na mesma promise, mas não passamos a promise adiante. Isso é diferente da cadeia de promises. No exemplo acima, o resultado será um erro.

Como lidar com várias promises

Além dos métodos (.then, .catch e .finally), há seis métodos estáticos disponíveis na API da promise. Os primeiros quatro métodos aceitam um array de promises e as executam em paralelo.

Promise.all
Promise.any
Promise.allSettled
Promise.race
Promise.resolve
Promise.reject

Vamos examinar cada uma delas.

O método Promise.all()

Promise.all([promises]) aceita uma coleção (por exemplo, um array) de promises como argumento e as executa em paralelo.

Esse método aguarda a resolução de todas as promises e retorna o array de resultados das promises. Se alguma das promises for rejeitada ou falhar devido a um erro, todos os outros resultados das promises serão ignorados.

Vamos criar três promises para obter informações sobre três Pokémons.

const BULBASAUR_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/bulbasaur';
const RATICATE_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/raticate';
const KAKUNA_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/kakuna';


let promise_1 = getPromise(BULBASAUR_POKEMONS_URL);
let promise_2 = getPromise(RATICATE_POKEMONS_URL);
let promise_3 = getPromise(KAKUNA_POKEMONS_URL);

Use o método Promise.all() passando um array de promises.

Promise.all([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('An Error Occurred');
});

Saída:

Como você pode ver, o resultado de todas as promises é retornado. O tempo para executar todas as promises é igual ao tempo máximo que a promise leva para ser executada.

O método Promise.any()

Promise.any([promises]) – semelhante ao método all(), .any() também aceita um array de promises para executá-las em paralelo. Esse método não espera que todas as promises sejam resolvidas. Ele finaliza quando qualquer uma das promises é resolvida.

 Promise.any([promise_1, promise_2, promise_3]).then(result => {
     console.log(JSON.parse(result));
 }).catch(error => {
     console.log('An Error Occurred');
 });

A saída seria o resultado de qualquer uma das promises resolvidas:

O método Promise.allSettled()

promise.allSettled([promises]) – esse método aguarda que todas as promises sejam resolvidas (resolve/reject) e retorna seus resultados como um array de objetos. Os resultados conterão um estado (fulfilled/rejected) e um valor, se for fulfilled. Em caso de status rejected, ele retornará um motivo para o erro.

Aqui está um exemplo de todas as promessas cumpridas (fulfilled):

Promise.allSettled([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('There is an Error!');
});

Saída:

Se alguma das promises for rejeitada, por exemplo, a promise_1,

let promise_1 = getPromise(POKEMONS_BAD_URL);

O método Promise.race()

Promise.race([promises]) – Aguarda a primeira promise (a mais rápida) ser concluída e retorna o respectivo resultado/erro.

Promise.race([promise_1, promise_2, promise_3]).then(result => {
    console.log(JSON.parse(result));
}).catch(error => {
    console.log('An Error Occured');
});

Retorna a promise que foi resolvida mais rapidamente:

O método Promise.resolve/reject

Promise.resolve(value) – Ele resolve uma promise com o valor passado. É o mesmo que o seguinte código:

let promise = new Promise(resolve => resolve(value));

Promise.reject(error) – Rejeita uma promise com o erro passado. É o mesmo que o seguinte código:

let promise = new Promise((resolve, reject) => reject(error));

Podemos reescrever o exemplo da PizzaHub com promises?

Claro, vamos fazer isso. Vamos supor que o método query retornará uma promise. Aqui está um exemplo de método query(). Na vida real, esse método pode se comunicar com um banco de dados e retornar resultados. Nesse caso, ele é bastante codificado, mas tem a mesma finalidade.

function query(endpoint) {
  if (endpoint === `/api/pizzahub/`) {
    return new Promise((resolve, reject) => {
      resolve({'idLoja': '123'});
    })
  } else if (endpoint.indexOf('/api/pizzahub/pizza/') >=0) {
    return new Promise((resolve, reject) => {
      resolve({pizzas: [{'tipo': 'vegetariana', 'nome': 'marguerita', 'id': '123'}]});
    })
  } else if (endpoint.indexOf('/api/pizzahub/bebidas') >=0) {
    return new Promise((resolve, reject) => {
      resolve({id: '10', 'tipo': 'vegetariana', 'nome': 'marguerita', 'bebida': 'coca'});
    })
  } else if (endpoint === `/api/order`) {
    return new Promise((resolve, reject) => {
      resolve({'tipo': 'vegetariana', 'nome': 'marguerita', 'bebida': 'coca'});
    })
  }
}

Em seguida, a refatoração do nosso callback hell. Para isso, primeiro criaremos algumas funções lógicas:

// Retorna um id da loja
let getIdLoja = resultado => resultado.idLoja;

// Retorna uma promise com a lista de pizzas para uma loja
let getListaPizzas = idLoja => {
  const url = `/api/pizzahub/pizza/${idLoja}`;
  return query(url);
}

// Retorna uma promise com a pizza que combina com o pedido do cliente
let getMinhaPizza = (resultado, tipo, nome) => {
  let pizzas = resultado.pizzas;
  let minhaPizza = pizzas.find((pizza) => {
    return (pizza.tipo===tipo && pizza.nome===nome);
  });
  const url = `/api/pizzahub/bebidas/${minhaPizza.id}`;
  return query(url);
}

// Retorna uma promise depois de fazer o pedido
let fazerPedido = resultado => {
  let bebida = resultado.id;
   return query(`/api/pedido`, {'tipo': resultado.tipo, 'nome': resultado.nome, 'bebida': resultado.bebida});
}

// Confirma o pedido
let confirmarPedido = resultado => {
    console.log(`Seu pedido de ${resultado.tipo} ${resultado.nome} com ${resultado.bebida} foi aceito!`);
}

Use essas funções para criar as promises necessárias. É aqui que você deve comparar com o exemplo do callback hell. Este é bem mais legal e elegante.

function pedirPizza(tipo, nome) {
  query(`/api/pizzahub/`)
  .then(resultado => getIdLoja(resultado))
  .then(idLoja => getListaPizzas(idLoja))
  .then(resultado => getMinhaPizza(resultado, tipo, nome))
  .then(resultado => realizarPedido(resultado))
  .then(resultado => confirmarPedido(resultado))
  .catch(function(erro){
    console.log(`Infelimente, não temos pizzas para você hoje!`);
  })
}

Por fim, chame o método pedirPizza() passando o tipo e o nome da pizza, da seguinte forma:

pedirPizza('vegetariana', 'marguerita');

O que vem a seguir?

Se você chegou até aqui e leu a maior parte das linhas acima, parabéns! Agora você já deve ter uma noção melhor das Promises do JavaScript. Todos os exemplos usados neste artigo estão neste repositório do GitHub.

Em seguida, você deve aprender sobre a função async no JavaScript, que simplifica ainda mais as coisas. A melhor maneira de aprender o conceito de promises do JavaScript é escrever pequenos exemplos e desenvolvê-los com base neles.

Independentemente do framework ou da biblioteca (Angular, React, Vue e assim por diante) que usarmos, as operações assíncronas são inevitáveis. Isso significa que precisamos entender as promises para que as coisas funcionem melhor.

Além disso, tenho certeza de que você achará o uso do método fetch muito mais fácil agora:

fetch('/api/user.json')
.then(function(response) {
    return response.json();
})
.then(function(json) {
    console.log(json); // {"name": "tapas", "blog": "freeCodeCamp"}
});

O método fetch retorna uma promise. Portanto, podemos chamar o método .then nele.
O restante é sobre a cadeia de promises que aprendemos neste artigo.

Antes de terminarmos...

Obrigado por ler até aqui! Vamos nos conectar. Você pode me mandar mensagens no Twitter (@tapasadhikary) com comentários.

Você também pode gostar destes artigos (em inglês):

Isso é tudo por enquanto. Voltaremos a nos ver em breve com meu próximo artigo. Até lá, cuide-se bem. 🙂

Como a mineração de Bitcoin realmente funciona

Filipe Virgínio Vital Torres Barbosa — Tue, 02 Apr 2024 01:34:07 +0000

Artigo original: How Bitcoin mining really works

Escrito por: Subhan Nadeem

À medida que o Bitcoin é amplamente adotado e reconhecido, seu modelo de segurança fundamental, conhecido como mineração, é posto sob os holofotes e examinado mais e mais a cada dia.

As pessoas estão cada vez mais preocupadas com o impacto ambiental da mineração de Bitcoin e interessadas no assunto, na segurança e no grau de descentralização do seu modelo subjacente e até no impacto potencial de uma descoberta da computação quântica no futuro dos Bitcoins e de outras criptomoedas.

Muitas vezes, a prova de trabalho é descrita como um "quebra-cabeças criptográfico", mas o que é de fato este quebra-cabeças?

Para compreender de fato essas questões (e quaisquer respostas possíveis), é preciso entender a mineração de Bitcoin em si e da sua evolução.

Este artigo tratará de todos os componentes técnicos e elementos da prova de trabalho e de como eles se mantém em perfeita sincronia, fazendo com que o Bitcoin seja a plataforma descentralizada que é hoje.

Por que a mineração funciona: hashing criptográfico unidirecional

A blockchain do Bitcoin é frequentemente descrita como um banco de dados que é criptograficamente seguro e, subsequentemente, imutável. A tecnologia que alimenta essa imutabilidade e segurança é o hashing criptográfico.

Uma função de hash criptográfico é uma função matemática que, de maneira simples, pega qualquer dado inserido e o converte para uma sequência de caracteres de tamanho fixo.

No entanto, existem quatro características especiais dessas funções que as tornam inestimáveis para a rede dos Bitcoins. São elas:

Determinística — para qualquer entrada na função hash criptográfica, a saída resultante será sempre a mesma;
Rápida — computar a saída da função hash, dada qualquer entrada, é um processo relativamente rápido (não precisa de computação pesada);
Exclusividade — cada entrada na função deve resultar em uma saída completamente aleatória e exclusiva (em outras palavras, não há duas entradas que resultem na mesma saída);
Irreversível — a partir de uma saída de uma função hash, a entrada original não pode ser obtida.

Essas regras formam a base que permite à mineração de Bitcoins proteger a rede.

O criador do protocolo Bitcoin, Satoshi Nakomoto, escolheu usar em particular a função hash SHA-256 como base para a mineração de Bitcoins. Essa é uma função de hash criptográfico específica, que foi comprovada matematicamente para atender às propriedades acima. Ela produz sempre um número de 256 bits (a unidade mais básica de computação), que é normalmente representado no sistema numérico hexadecimal com 64 caracteres para facilitar a leitura humana.

A saída da função SHA-256 é normalmente referida como o hash da sua entrada.

Uma entrada para uma função hash resulta numa saída totalmente única

Abaixo, temos um exemplo de entrada e saída de uma função SHA-256 (você mesmo pode experimentá-la aqui):

Entrada do SHA-256:

Saída do SHA-256:
77077b1f4c3ad44c83dc0bdb8d937e9b71c0ef07a35c2664bb7da85be738eacf

Curiosamente, na maioria dos lugares onde o hashing é usado no protocolo Bitcoin, o hashing duplo é usado. Isso significa que a saída original da função SHA-256 é então colocada de volta na função SHA-256 para obter outra saída. Segue abaixo como seria esse processo:

Entrada do SHA-256 (primeiro passo):

Saída (primeiro passo):
77077b1f4c3ad44c83dc0bdb8d937e9b71c0ef07a35c2664bb7da85be738eacf

Entrada do SHA-256 (segundo passo):
77077b1f4c3ad44c83dc0bdb8d937e9b71c0ef07a35c2664bb7da85be738eacf
Saída (segundo passo e resultado final):
3c6c55b0e4b607b672b50f04e028a6951aed6dc97b91e103fb0f348c3f1dfa00

O hashing duplo é utilizado para proteção contra ataques de aniversário. Um ataque de aniversário é um cenário em que o agressor é capaz de produzir o mesmo hash que outra entrada, só que usando uma entrada completamente diferente (chamada de colisão). Isso quebra a terceira propriedade, da exclusividade. Sem ela, dois blocos de Bitcoin completamente diferentes podem ser representados exatamente pelo mesmo hash, permitindo que os agressores troquem os blocos.

Com a função SHA-256, a probabilidade de esse ataque acontecer é infinitamente pequena. Se não fosse quase impossível, o SHA-256 seria considerado quebrado.

Contudo, outras funções de hash foram "quebradas" no passado. Para evitar que isso aconteça com o SHA-256 no futuro (e efetivamente quebrar o modelo de segurança do Bitcoin) é melhor fazer o hash do hash. Isso reduz pela metade a probabilidade de ocorrer uma colisão, tornando o protocolo muito mais seguro.

De maneira simplificada, a mineração de Bitcoin é um sistema no qual todas as transações de Bitcoin são enviadas para os mineradores de Bitcoin. Os mineradores selecionam transações no valor de um megabyte, agrupam-nas como entrada na função SHA-256 e tentam encontrar um resultado específico que a rede aceite. O primeiro minerador a encontrar esse resultado e publicar o bloco na rede recebe uma recompensa na forma de taxas de transação e criação de novos Bitcoins.

Vamos dar um passo adiante e mergulhar na própria blockchain do Bitcoin para ver o que exatamente os mineradores fazem para tornar a rede segura.

Mineração de bitcoins: uma introdução técnica

A mineração foi introduzida como a solução para o problema do gasto duplo. Se eu tiver 1 Bitcoin e enviá-lo para Bob e depois tentar enviar o mesmo Bitcoin para Alice, a rede garante que apenas uma transação será aceita. Isso é feito pelo processo de mineração.

Antes de mergulhar nos detalhes técnicos, é importante entender por que a mineração é necessária para proteger a rede. A moeda fiduciária que existe atualmente é criada e validada por um banco central. Como o Bitcoin opera sob a rígida premissa de descentralização e consenso, não pode haver nenhuma autoridade central que valide e marque a emissão dessa moeda, bem como a validação de quaisquer transações que ocorram com essa moeda.

Satoshi Nakamoto propôs a única solução conhecida na época para resolver esse problema de validação na forma de um sistema orientado por consenso. Intitulado no whitepaper do Bitcoin como proof-of-work (prova de trabalho), esse esquema justifica de modo elegante que as transações são validadas por aqueles que estão dispostos a gastar energia física computacional e tempo suficientes para fazê-lo, ao mesmo tempo em que introduz um incentivo para induzir a concorrência no mercado. Essa concorrência permite que a descentralização surja e prospere organicamente no ecossistema.

Uma olhada dentro do bloco

Um bloco de Bitcoin consiste basicamente em dois componentes:

1. Transações, na forma de uma árvore de Merkle

Os computadores de mineração coletam transações suficientes para preencher um bloco e as agrupam em uma árvore de Merkle.

Uma árvore de Merkle é um conceito relativamente simples: as transações ficam na parte inferior da árvore como folhas e são criptografadas em um hash usando a função SHA-256. A combinação de duas transações de folha é criptografada novamente em um hash usando a função SHA-256 para formar um pai dessas folhas. Esse pai é continuamente criptografado em hash para cima, combinado com outros pais, até que uma única raiz seja criada. O hash dessa raiz é efetivamente uma representação única das transações que estão abaixo dela.

Uma visualização de como uma árvore de Merkle é construída - as folhas na parte inferior da árvore são transações

A raiz da árvore de Merkle é uma combinação dos hashes de cada transação na árvore.

Lembre-se que, para qualquer entrada em uma função de hash, a saída é totalmente exclusiva. Portanto, quando a maioria dos nós da rede recebe um bloco minerado, o hash da raiz da árvore de Merkle atua como um resumo imutável de todas as transações nesse determinado bloco.

Se alguém mal-intencionado tentasse alterar o conteúdo de uma transação em um bloco, seu hash seria alterado. Essa alteração de um hash seria propagada pela árvore de Merkle da transação até que o hash da raiz fosse alterado. Qualquer nó pode então detectar rapidamente esse ato malicioso comparando a raiz da árvore de Merkle do bloco alterado com a árvore de Merkle de um bloco válido.

2. O cabeçalho do bloco

O cabeçalho do bloco é um resumo do conteúdo do próprio bloco. Ele contém os seis componentes a seguir:

A versão do software que o cliente Bitcoin está executando;
O registro de data e hora do bloco;
A raiz da árvore de Merkle com as transações contidas;
O hash do bloco anterior;
Um nonce (número aleatório que pode ser usado apenas uma vez);
O target ou destino.

Lembre-se de que a raiz da árvore de Merkle de transações funciona como um resumo eficaz de cada transação no bloco, sem a necessidade de examinar cada transação.

O hash do bloco anterior permite que a rede coloque corretamente o bloco em ordem cronológica. É daí que deriva o termo blockchain - cada bloco é encadeado a um bloco anterior.

O nonce e o target fazem a mineração funcionar. Eles são a base para resolver o quebra-cabeça SHA-256 que os mineradores precisam resolver.

Observe que todos esses dados no cabeçalho do bloco são compactados em 80 bytes usando uma notação chamada little-endian, o que torna a transferência de cabeçalhos de bloco entre os nós um processo trivialmente eficiente. Para essa explicação, ignoraremos essa compactação e assumiremos que os dados estão em sua forma original.

Explicando o problema da mineração

O target armazenado no cabeçalho do bloco é simplesmente um valor numérico armazenado em bits. Na notação tradicional de base 10, esse target varia de 0 a algum lugar na faixa de 2²²⁴ (um número com mais de 67 dígitos), dependendo de quantos mineradores estão competindo para resolver esse problema ao mesmo tempo.

Lembre-se de que o resultado do SHA-256 é apenas um número. O objetivo de um minerador é pegar o cabeçalho do bloco atual, adicionar um número aleatório a ele chamado nonce e calcular seu hash. Esse valor numérico do hash deve ser menor que o valor do target.

Isso é tudo o que há para fazer, mas é muito mais fácil falar do que fazer.

Lembre-se da primeira propriedade do SHA-256: uma entrada em uma função de hash sempre resultará na mesma saída. Portanto, se o minerador pegasse o cabeçalho do bloco, fizesse o hash e percebesse que o valor do hash não era menor do que a meta, ele teria que alterar a entrada de algum modo para tentar encontrar um hash abaixo do valor do target.

É aí que entra o nonce.

O minerador adiciona um número (a partir de 0), chamado nonce, ao cabeçalho do bloco e faz o hash desse valor. Se o valor do hash não for menor do que o target, o minerador incrementará o nonce em 1, o adicionará novamente ao cabeçalho do bloco e fará o hash desse valor alterado. Esse processo é repetido continuamente até que seja encontrado um hash menor que o valor do target.

Um exemplo de mineração

Aqui está uma aproximação grosseira do que compõe o cabeçalho do primeiro bloco:

A raiz de Merkle da transação no bloco Genesis:

Raiz de Merkle:
4a5e1e4baab89f3a32518a88c31bc87f618f76673e2cc77ab2127b7afdeda33b

A primeira versão conhecida do Bitcoin: 0.1.0
O registro de data e hora do bloco: 2009–01–03 18:15:05
O target (esse também é o valor mais alto que o target poderá atingir):

Target:
0x00000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

Nenhum hash de bloco anterior – esse foi o primeiro bloco e, portanto, esse é um caso único

O cabeçalho final do bloco após a adição de seus componentes:

Os dados do bloco Genesis (isso inclui o nonce, mas vamos fingir que não), fonte: bitcointalk

Vamos pegar esse grande cabeçalho e calcular o hash duplo:

SHA-256 do cabeçalho:
7d80bd12dfdccbdde2c41c9f406edfc05afb3320f5affc4f510b05a3394e1c91

SHA-256 do resultado anterior (resultado final):
c5aa3150f61b752c8fb39525f911981e2f9982c8b9bc907c73914585ad2ef12b

Tanto o hash de destino quanto o de saída são números incrivelmente grandes quando convertidos para a base 10 (lembre-se: mais de 67 dígitos). Em vez de tentar demonstrar a comparação dos dois aqui, a função Python a seguir trata da comparação:

def isBlockHashLessThanTarget(blockHash, target):
    return int(blockHash, 16) < int(target, 16)

Será retornado verdadeiro se o hash for menor do que o destino; caso contrário, falso.

Aqui está o resultado do nosso target e do hash de bloco:

Agora, pegamos o valor hexadecimal do bloco original e adicionamos 1 a ele. O resultado é o seguinte:

Observe como o último dígito agora é 1, devido à adição do nonce

Em seguida, executamos o mesmo algoritmo de hashing e a comparação com esses dados alterados. Se não estiverem abaixo do target, continue repetindo.

Quando um hash bem-sucedido é encontrado, o último nonce usado para encontrar essa solução é salvo no bloco.

O nonce listado no bloco Genesis é 2.083.236.893.

Isso significa que Satoshi Nakomoto iterou esse processo mais de 2 bilhões de vezes antes de encontrar o hash correto.

Escrevi uma pequena implementação em Python desse processo de mineração de blocos do Genesis, que pode ser encontrada no meu GitHub.

Veja quanto tempo levaria para você minerar com sucesso o bloco Genesis!

O valor do nonce em um cabeçalho de bloco é armazenado como um número de 32 bits. Isso significa que o nonce mais alto que alguém pode obter é 2³² (aproximadamente 4 bilhões). Após 4 bilhões de iterações, o nonce se esgota e, se não for encontrada uma solução, os mineradores ficam empacados mais uma vez.

A solução para isso é adicionar um campo à coinbase (o conteúdo da transação de um bloco, armazenado como a árvore de Merkle) chamado extraNonce. O tamanho desse extraNonce é limitado apenas pelo tamanho do próprio bloco e, portanto, pode ser tão grande quanto os mineradores desejarem, desde que o tamanho do bloco esteja dentro dos limites do protocolo.

Se todos os 4 bilhões de valores possíveis do nonce forem esgotados, o extraNonce será adicionado e incrementado na coinbase. Uma nova raiz da árvore de Merkle e, subsequentemente, um novo cabeçalho de bloco são calculados, e o nonce é iterado mais uma vez. Esse processo é repetido até que um hash adequado seja encontrado.

É melhor evitar adicionar o extraNonce até que o nonce se esgote, pois qualquer alteração no extraNonce altera a árvore de Merkle. Isso requer computação adicional para propagar a alteração para cima até que uma nova raiz da árvore de Merkle seja calculada.

A recompensa do minerador

O minerador que conseguir publicar um bloco mais rápido é recompensado com um Bitcoin novinho em folha, criado do nada. Atualmente, essa recompensa é de 12,5 BTC. Como esses Bitcoins surgem?

Cada minerador simplesmente adiciona uma nova transação de saída ao seu bloco que atribui 12,5 Bitcoins a si mesmo antes de começar a minerar o bloco. O protocolo da rede aceitará essa transação especial como válida ao receber um bloco recém-validado. Essa transação especial é chamada de transação de geração.

É responsabilidade do minerador adicionar essa transação ao bloco antes de minerá-lo. Houve, pelo menos, um caso em que os mineradores se esqueceram de adicionar a recompensa à transação antes de minerar um bloco, literalmente destruindo 12,5 BTC!

Validando a prova de trabalho

Digamos que nosso minerador tenha encontrado um hash que seja menor que o target. Tudo o que esse minerador precisa fazer é publicar o bloco minerado com os seis componentes originais em qualquer nó conectado.

Esse nó que recebe o bloco verificará primeiro o conjunto de transações, garantindo que todas as transações sejam válidas (por exemplo, todas as transações estão devidamente assinadas e as moedas não estão sendo gastas duas vezes e/ou criadas do nada).

Em seguida, ele apenas gerará o duplo hash do cabeçalho do bloco e garantirá que o valor esteja abaixo do valor do target incluído no bloco. Quando o bloco for considerado válido, o novo nó continuará a propagar esse bloco pela rede até que todos os nós tenham um registro atualizado.

Como você pode ver, os blocos recém-publicados podem ser facilmente verificados por qualquer nó. Entretanto, a publicação de um bloco válido na rede requer uma quantidade incrivelmente grande de poder computacional (portanto, eletricidade e tempo). Essa assimetria é o que permite que a rede seja protegida e, ao mesmo tempo, permite que os indivíduos que desejam realizar atividades econômicas na rede o façam de maneira relativamente simples.

O tempo de produção de blocos e o ajuste do target

Quando os primeiros mineradores começaram a minerar, cada um deles monitorou o tempo de produção de blocos. Cada bloco de Bitcoin tem um tempo de produção de blocos definido de 10 minutos. Isso significa que, dado o nível atual de capacidade computacional na rede (hashrate da rede), os nós sempre esperam que novos blocos validados sejam produzidos a cada 10 minutos, em média.

É razoável esperar que os blocos sejam produzidos em 10 minutos porque a probabilidade de encontrar um bloco, considerando o hashrate da rede, é conhecida.

Por exemplo, vamos pegar o alvo mais fácil que já existiu no Bitcoin: o bloco de Genesis. A probabilidade de um único hash ser menor do que o target mais fácil é de 1 em 2³². Isso é um em mais de quatro bilhões. Portanto, é razoável esperar que alguém execute 2³² iterações do problema de mineração para encontrar um hash adequado. Os nós da rede esperavam que quatro bilhões dessas iterações fossem executadas por todos os mineradores da rede a cada 10 minutos.

Se, em uma amostra grande de blocos, os blocos começarem a aparecer mais rápido do que 10 minutos, essa é uma indicação bastante clara de que os nós da rede estão iterando por quatro bilhões de hashes muito mais rápido do que 10 minutos. Essa situação faz com que cada nó ajuste o target proporcionalmente com base no aumento (ou diminuição) da potência da rede para garantir que os blocos continuem sendo produzidos a cada 10 minutos.

Na realidade, os nós da rede monitoram o tempo de produção de blocos em 2016 blocos, o que equivale a exatamente duas semanas. A cada duas semanas, o tempo total de produção de blocos é comparado com o tempo de produção de blocos esperado (que é de 20160 minutos).

Para obter o novo target, basta multiplicar o target existente pela proporção do tempo total de produção de blocos real nas últimas duas semanas para obter o tempo de produção de blocos esperado. Isso ajustará o target proporcionalmente à quantidade de poder computacional que entra ou sai da rede.

Fórmula para calcular o novo target, executada a cada 20160 minutos (duas semanas) por cada nó de Bitcoin

O tempo de produção de blocos e a capacidade de calcular facilmente a probabilidade de encontrar um bloco válido permitem que os nós monitorem e determinem facilmente o hashpower total na rede e ajustem a rede. Independentemente da quantidade de potência de computacional adicionada à rede ou da rapidez com que é adicionada, em média, o tempo de produção de blocos sempre permanecerá em 10 minutos.

A taxa de hash total atual na rede é de 28,27 exahash por segundo. Isso significa que 28,27 x 10¹⁸ hashes são executados a cada segundo em todos os computadores da rede.

Resumindo

Aqui, cobrimos de maneira abrangente o seguinte:

Por que o hashing criptográfico unidirecional é vital para a prova de trabalho;
Um detalhamento da construção de um bloco de Bitcoin;
O processo de mineração real e a iteração em si;
Como os nós podem validar facilmente outros blocos;
Como a rede consegue manter o algoritmo e a competitividade monitorando o tempo de bloqueio e ajustando o target.

Agora, você deve ser capaz de entender e explicar como a prova de trabalho realmente funciona e por que ela é considerada um algoritmo totalmente seguro que permite a descentralização e o consenso!

Siga o autor no Twitter e no Medium se estiver interessado em artigos mais detalhados e informativos como esses no futuro!

Filipe Virgínio Vital Torres Barbosa - freeCodeCamp.org

Ficha informativa de React com exemplos reais

Sumário

Fundamentos do React

Hooks essenciais do React

Hooks e desempenho

Hooks avançados do React

Fundamentos do React

Elementos JSX

Alô, React!

Alô, React!

Meu título

Alô!

Alô!

Alô, React!

Componentes e props

Alô, React

Alô, React

Alô, React

Alô, React

Hello {props.username}

Listas e chaves

Ouvintes de eventos e tratamento de eventos

Hooks essenciais do React

State e useState

Efeitos colaterais e useEffect

A posição atual do mouse é:

Refs e useRef

Hooks e desempenho

Prevenção de novas renderizações e React.memo

Funções de callback e useCallback

Memoização e useMemo

Hooks avançados no React

Contexto e useContext

Redutores e useReducer

Escrevendo hooks personalizados

Regras dos hooks

Conclusão

Como criar seu primeiro gráfico em JavaScript com o JSCharting

O resultado

As ferramentas

Por que JSCharting?

Os dados

Passo 1 – adicionar um gráfico em branco

step1-a.zip

Passo 2 – brinque um pouco com o gráfico

Passo 3 – prepare os dados

Passo 4 – juntando tudo

Desafio adicional

Tutorial de promises em JavaScript – como concluir ou rejeitar promises em JS

O que é uma promise no JavaScript?

Espere aí, não temos funções de callback para operações assíncronas?

Como evitar o inferno de callbacks – exemplo do PizzaHub

Entendendo os estados das promises

Como as promises são concluídas e rejeitadas

Como lidar com uma promise depois de criá-la

Como usar o método .then() da promise

Como usar o método .catch() da promise

Como usar o método .finally() da promise

O que é encadeamento de promises?

Como lidar com várias promises

O método Promise.all()

O método Promise.any()

O método Promise.allSettled()

O método Promise.race()

O método Promise.resolve/reject

Podemos reescrever o exemplo da PizzaHub com promises?

O que vem a seguir?

Antes de terminarmos...

Como a mineração de Bitcoin realmente funciona

Por que a mineração funciona: hashing criptográfico unidirecional

Mineração de bitcoins: uma introdução técnica

Uma olhada dentro do bloco

1. Transações, na forma de uma árvore de Merkle

2. O cabeçalho do bloco

Explicando o problema da mineração

Um exemplo de mineração

Uma advertência: extraNonce

A recompensa do minerador

Validando a prova de trabalho

**Funções de callback e useCallback**

**O que é uma promise no JavaScript?**

Espere aí, não temos funções de `callback` para operações assíncronas?

**Como as promises são concluídas e rejeitadas**

Como usar o método `.then()` da promise

Como usar o método `.catch()` da promise

Como usar o método `.finally()` da promise

**O que é encadeamento de promises?**

Uma advertência: `extraNonce`