React - 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 próprio hook do React: um guia passo a passo

Gustavo Cavalieri — Mon, 23 Sep 2024 21:00:00 +0000

Artigo original: How to Build Your Own React Hooks: A Step-by-Step Guide

Os hooks do React são uma customização essencial que permite que você adicione funcionalidades exclusivas às suas aplicações React.

Em vários casos, se você quer adicionar uma certa funcionalidade à sua aplicação, pode simplesmente adicionar uma biblioteca de terceiros que já existe para resolver o seu problema. Se tal biblioteca não existir, porém, o que fazer?

Como um desenvolvedor de React, é importante aprender os processos de criar hooks customizáveis para resolver problemas ou adicionar funcionalidades que faltam aos seus projetos.

Neste guia passo a passo, eu vou mostrar como criar os seus próprios hooks do React decompondo três hooks que fiz para as minhas aplicações e mostrando quais problemas eles foram criados para resolver.

1. useCopyToClipboard

Em uma versão anterior do meu site, reedbarger.com, eu permitia que usuários copiassem o código dos meus artigos com a ajuda de um pacote chamado react-copy-to-clipboard.

Quando um usuário passa o mouse sobre o trecho de código, clica no botão de copiar e o código é adicionado para a área de transferência, ele pode, então, colar e usar o código onde quiser.

Ao invés de usar uma biblioteca de terceiros, no entanto, eu queria recriar essa funcionalidade com o meu próprio hook do React. Como qualquer outro hook customizável que crio, eu os coloco em uma pasta dedicada, geralmente chamada utils ou lib, especificamente, para funções que posso reutilizar na minha aplicação.

Colocaremos esse hook em um arquivo chamado useCopyToClipboard.js e criaremos uma função com o mesmo nome.

Existem várias maneiras de se copiar um texto para a área de transferência de um usuário. Prefiro utilizar uma biblioteca para isso, chamada copy-to-clipboard, que torna o processo mais confiável.

Ela exporta uma função que chamaremos de copy.

// utils/useCopyToClipboard.js
import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard() {}

Em seguida, criaremos uma função que será utilizada para copiar qualquer texto que deve ser adicionado a área de transferência de um usuário. Chamaremos essa função de handleCopy.

Como criar a função `handleCopy`

Nessa função, primeiramente, precisamos nos assegurar de que ela aceitará apenas parâmetros do tipo String ou Number. Colocaremos uma declaração com if-else, que garantirá que o tipo é uma String ou um Number. Caso contrário, imprimiremos um erro no console, que avisará o usuário de que ele não pode copiar qualquer outro tipo.

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard() {
  const [isCopied, setCopied] = React.useState(false);

  function handleCopy(text) {
    if (typeof text === "string" || typeof text == "number") {
      // pode copiar
    } else {
      // não pode copiar
      console.error(
        `Não é permitido copiar o tipo ${typeof text} para a área de transferência; deve ser uma String ou um Number.`
      );
    }
  }
}

Em seguida, devemos converter o parâmetro text para String e passá-lo para a função copy. Depois, retornamos a função handleCopy dentro do hook para ser utilizada em qualquer lugar da nossa aplicação.

Normalmente, a função handleCopy será conectada a um evento onClick de um botão.

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard() {
  function handleCopy(text) {
    if (typeof text === "string" || typeof text == "number") {
      copy(text.toString());
    } else {
      console.error(
        `Não é permitido copiar o tipo ${typeof text} para a área de transferência, deve ser uma String ou um Number.`
      );
    }
  }

  return handleCopy;
}

Além disso, queremos algum state que represente se o texto foi copiado ou não. Para criar esse comportamento, chamaremos useState no início do nosso hook e criaremos uma variável de estado isCopied, onde o método de atribuição se chamará setCopy.

Inicialmente, esse valor será false. Se o texto é copiado com sucesso, alteraremos a variável copy para true. Caso contrário, a alteraremos para false.

Finalmente, fazemos o hook retornar isCopied e handleCopy utilizando um array.

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard(resetInterval = null) {
  const [isCopied, setCopied] = React.useState(false);

  function handleCopy(text) {
    if (typeof text === "string" || typeof text == "number") {
      copy(text.toString());
      setCopied(true);
    } else {
      setCopied(false);
      console.error(
        `Não é permitido copiar o tipo ${typeof text} para a área de transferência, deve ser uma String ou um Number.`
      );
    }
  }

  return [isCopied, handleCopy];
}

Como utilizar o hook useCopyToClipboard

Agora, podemos utilizar useCopyToClipboard dentro de qualquer componente que desejarmos.

Nesse caso, vou utilizá-lo com um componente de botão de copiar, que receberá o trecho de código que deve ser copiado.

Para fazer isso funcionar, tudo que precisamos é adicionar um evento de onClick ao botão. Nos parâmetros do nosso componente, recebemos código que será copiado para a área de transferência. Quando o código é copiado, podemos mostrar um ícone diferente indicando que o código foi copiado com sucesso.

import React from "react";
import ClipboardIcon from "../svg/ClipboardIcon";
import SuccessIcon from "../svg/SuccessIcon";
import useCopyToClipboard from "../utils/useCopyToClipboard";

function CopyButton({ code }) {
  const [isCopied, handleCopy] = useCopyToClipboard();

  return (
    
  );
}

Como adicionar um intervalo de reinicialização

Existe uma melhoria que podemos adicionar no nosso código. Na versão atual, isCopied sempre será true, e sempre veremos o ícone de sucesso:

Se quisermos reinicializar o state do componente após alguns segundos, podemos passar um intervalo de tempo como parâmetro para useCopyToClipboard. Adicionaremos essa funcionalidade.

De volta ao nosso hook, podemos criar um parâmetro chamado resetInterval, que terá como valor padrão null, o que garantirá que o state não será reinicializado se nenhum argumento for passado para ele.

Adicionaremos também a função useEffect para implementar o seguinte comportamento: se o texto for copiado e tivermos um intervalo de reinicialização, alteraremos o valor de isCopied novamente para false após o intervalo utilizando a função setTimeout.

Além disso, precisamos remover esse comportamento se o nosso o componente que está utilizando o nosso hook de desmontar (unmount). Ou seja, no caso de não existir mais state ou componente para ser atualizado.

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard(resetInterval = null) {
  const [isCopied, setCopied] = React.useState(false);

  const handleCopy = React.useCallback((text) => {
    if (typeof text === "string" || typeof text == "number") {
      copy(text.toString());
      setCopied(true);
    } else {
      setCopied(false);
      console.error(
        `Não é permitido copiar o tipo ${typeof text} para a área de transferência, deve ser uma String ou um Number.`
      );
    }
  }, []);

  React.useEffect(() => {
    let timeout;
    if (isCopied && resetInterval) {
      timeout = setTimeout(() => setCopied(false), resetInterval);
    }
    return () => {
      clearTimeout(timeout);
    };
  }, [isCopied, resetInterval]);

  return [isCopied, handleCopy];
}

Finalmente, a última melhoria que podemos fazer é envolver handleCopy em um hook useCallback para garantir que a função não seja recriada todas as vezes em que a tela for renderizada novamente.

Resultado

Com isso, temos o nosso hook que permite que o state seja reinicializado após um intervalo de tempo. Se passarmos um valor de tempo, veremos o resultado abaixo.

import React from "react";
import ClipboardIcon from "../svg/ClipboardIcon";
import SuccessIcon from "../svg/SuccessIcon";
import useCopyToClipboard from "../utils/useCopyToClipboard";

function CopyButton({ code }) {
  // isCopied é reinicializada após 3 segundos
  const [isCopied, handleCopy] = useCopyToClipboard(3000);

  return (
    
  );
}

2. hook usePageBottom

Em aplicações do React, muitas vezes, é importante saber quando o usuário rolou até o final da página.

Em aplicações que possuem "rolagem infinita", como o Instagram, por exemplo, quando o usuário chega no fim da página, a aplicação busca mais postagens.

Veremos como criar um hook usePageBottom para casos em que precisamos implementar uma página de rolagem infinita.

Começaremos criando um arquivo, usePageBottom.js na nossa pasta utils e adicionaremos uma função (hook) com o mesmo nome:

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {}

Em seguida, precisamos calcular quando o usuário chega no final da página. Podemos determinar essa informação através do objeto window. Para acessar esse objeto, precisamos nos certificar de que o hook é chamado de um componente já montado (isMounted). Então, utilizaremos a função useEffect com um array vazio.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  React.useEffect(() => {}, []);
}

O usuário terá atingido o final da página quando o valor de window.innerHeight somado com document.scrollTop é igual ao valor de document.offsetHeight. Se esses dois valores são iguais, o resultado será true e o usuário terá atingido o final da página.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  React.useEffect(() => {
    window.innerHeight + document.documentElement.scrollTop === 
    document.documentElement.offsetHeight;
  }, []);
}

Salvaremos o resultado dessa expressão em uma variável isBottom, e atualizaremos uma variável de estado chamada bottom, que depois será retornada pelo nosso hook.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    const isBottom =
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight;
    setBottom(isButton);
  }, []);

  return bottom;
}

Nosso código atual, no entanto, isso não funcionará. Por quê?

O problema está no fato que temos que calcular isBottom toda vez que o usuário está rolando a página. Por isso, precisamos receber eventos de rolagem da página utilizando window.addEventListener. Podemos criar uma função local que será chamada toda vez que o usuário rolar a página – a chamaremos de handleScroll.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    function handleScroll() {
      const isBottom =
        window.innerHeight + document.documentElement.scrollTop 
        === document.documentElement.offsetHeight;
      setBottom(isButton);
    }
    window.addEventListener("scroll", handleScroll);
  }, []);

  return bottom;
}

Finalmente, como temos um "event listener" que atualizará o state, precisamos tratar o caso de o usuário sair da página e o nosso componente ser removido. Precisamos remover esse "event listener" que adicionamos para evitar que uma variável de estado que não existe mais seja alterada.

Podemos fazer isso retornando a função window.removeEventListener, onde passamos uma referência para a função handleScroll. Agora, tudo certo!

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    function handleScroll() {
      const isBottom =
        window.innerHeight + document.documentElement.scrollTop 
        === document.documentElement.offsetHeight;
      setBottom(isButton);
    }
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return bottom;
}

Podemos simplesmente chamar esse código em qualquer função em que queremos saber se o final da página foi atingido ou não.

Em um dos meus sites do Gatsby, eu tenho um cabeçalho. Conforme diminuo o tamanho da página, eu quero mostrar menos links para o usuário.

Para fazermos isso, podemos utilizar uma Media Query (CSS) ou podemos utilizar um hook do React para nos retornar o tamanho da página e exibir ou esconder os links no código JSX.

Anteriormente, eu estava utilizando um hook de uma biblioteca chamada react-use. Ao invés de utilizar uma biblioteca de terceiros, eu decidi criar meu próprio hook para retornar as dimensões da página, tanto largura quanto altura. Chamei esse hook de useWindowSize.

Como criar o hook

Primeiramente, criaremos um arquivo .js na nossa pasta utils. Vamos chamá-lo de useWindowSize. Importaremos o React (para utilizar hooks) e exportaremos o hook atual.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {}

Como estou usando esse hook em um site do Gatsby.js, que é renderizado no servidor, eu preciso obter o tamanho da janela. Porém, talvez não tenhamos acesso ao tamanho da janela, pois estamos renderizando a página no servidor.

Para ter certeza de que não estamos no servidor, podemos verificar se o tipo de window não é igual a undefined.

Nesse caso, podemos retornar uma largura e altura para um navegador padrão. Retornaremos 1200 e 800 em um objeto.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {
  if (typeof window !== "undefined") {
    return { width: 1200, height: 800 };
  }
}

Como obter a largura e altura da janela

Quando estamos no client (navegador) e podemos utilizar a janela (window), temos a opção de usar o hook useEffect para interagir com a janela. Incluiremos um array vazio de dependências para ter certeza que o nosso hook é chamado apenas quando o componente pai está montado (mounted).

Para descobrir a largura e altura da janela, podemos adicionar um event listener para escutar por eventos do tipo resize. Toda vez que o tamanho da janela mudar, podemos atualizar uma parte do state (criado com useState), que chamaremos de windowSize, chamaremos o método de atualização de setWindowSize.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {
  if (typeof window !== "undefined") {
    return { width: 1200, height: 800 };
  }

  const [windowSize, setWindowSize] = React.useState();

  React.useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    });
  }, []);
}

Quando a janela é redimensionada, o nosso event listener será chamado e o state de windowSize será atualizado com as novas dimensões. Para realizar isso, atualizamos a largura para window.innerWidth e a altura para window.innerHeight.

Como adicionar suporte a Server Side Rendering

No entanto, o nosso código atual não funcionará. Isso acontece porque existe uma regra dos hooks que os impedem de serem chamados condicionalmente. Como resultado, não podemos ter uma condicional nos métodos useState ou useEffect antes de eles serem chamados.

Então, para contornar esse problema, definiremos o valor inicial de useState condicionalmente. Criaremos uma variável chamada isSSR, que ficará responsável por verificar se a janela não é igual a uma string undefined.

Depois, utilizaremos um ternário para definir a largura e altura e checando primeiramente se estamos no servidor ou no navegador. Se estivermos no servidor, usaremos um valor padrão. Caso contrário, usaremos window.innerWidth e window.innerHeight.

// utils/useWindowSize.js

import React from "react";

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

  React.useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    });
  }, []);
}

Finalmente, precisamos pensar em como os nossos componentes desmontarão (unmount). O que precisamos fazer? É necessária a remoção do listener de redimensionamento.

Como remover o event listener de redimensionamento

Podemos fazer isso retornando uma função no método useEffect. Removeremos o listener com window.removeEventListener.

// utils/useWindowSize.js

import React from "react";

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

  React.useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    });

    return () => {
      window.removeEventListener("resize", () => {
        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
      });
    };
  }, []);
}

Precisamos, contudo, de uma referência para a mesma função e não de dois métodos diferentes como temos aqui. Para fazer isso, criaremos uma função de callback para os dois listeners, chamada changeWindowSize.

Para encerrar, no final do hook, retornaremos o state de windowSize.

// utils/useWindowSize.js

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;
}

Resultado

Para utilizar o hook, precisamos importá-lo onde ele é requerido, chamá-lo e utilizar a largura da janela retornada quando queremos esconder ou mostrar certos elementos na tela.

No exemplo abaixo, utilizaremos 500px como a nossa condição. Aqui, queremos esconder todos os links e mostrar apenas o botão "Join Now":

// components/StickyHeader.js

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

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

  return (
    
      {/* visible only when window greater than 500px */}
      {width > 500 && (
        <>
          
            Testimonials
          
          
            Price
          
          
            
              Question?
            
          
        
      )}
      {/* visible at any window size */}
      
        
          Join Now
        
      
    
  );
}

Esse hook funcionará em qualquer aplicação do React renderizada no servidor, como as que usam Gatsby e Next.js.

3. hook useDeviceDetect

Estou criando uma landing page para um curso e há um comportamento muito estranho quando a página é acessada por dispositivos móveis. Em computadores de mesa, está tudo certo.

Quando uso um dispositivo móvel, porém, tudo parece fora de lugar.

Descobri que o problema está relacionado com uma biblioteca chamada react-device-detect, que eu estava utilizando para detectar se os usuários acessavam o site de um dispositivo móvel ou não. Em caso afirmativo, o cabeçalho da página deve ser escondido.

// templates/course.js
import React from "react";
import { isMobile } from "react-device-detect";

function Course() {
  return (
    <>
      
      {!isMobile && }
      {/* more components... */}
    
  );
}

O problema é que essa biblioteca não oferece suporte para renderização no servidor (em inglês, server-side rendering), que é o que o Gatsby usa por padrão. Então, precisei criar a minha própria solução para identificar quando o usuário acessa o site de um dispositivo móvel. Para isso, eu decidi criar um hook customizável chamado useDeviceDetect.

Como criei o hook

Criei um arquivo separado para esse hook na pasta utils, chamado useDeviceDetect.js. Como hooks são simples funções do JavaScript que podem ser reaproveitadas, eu criei uma função chamada useDeviceDetect e importei as bibliotecas do React.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {}

Como descobrir o User Agent através da `window`

Um jeito de descobrir informações sobre o dispositivo do usuário é através da propriedade userAgent (que está no objeto navigator, dentro de window).

Como interagir com a API window pode ser considerado um efeito colateral, precisamos acessar a propriedade "user agent" dentro do hook useEffect.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  React.useEffect(() => {
    console.log(`Dispositivo do usuário: ${window.navigator.userAgent}`);
    // também pode ser escrito como 'navigator.userAgent'
  }, []);
}

Quando o componente for montado (mounted), podemos usar typeof navigator para determinar se estamos no navegador ou no servidor. Se estivermos no servidor, não teremos acesso ao window. Nesse caso, typeof navigator será igual à String undefined. Caso contrário, estamos no client e teremos acesso à propriedade "user agent".

Podemos expressar a lógica acima utilizando um ternário para obter a propriedade userAgent.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  React.useEffect(() => {
    const userAgent =
      typeof navigator === "undefined" ? "" : navigator.userAgent;
  }, []);
}

Como checar se userAgent é um dispositivo móvel

userAgent é uma String que terá um dos valores abaixo caso o usuário esteja em um dispositivo móvel:

Android, BlackBerry, iPhone, iPad, iPod, Opera Mini, IEMobile, ou WPDesktop.

Tudo que precisamos fazer é utilizar a propriedade userAgent e o método .match() com uma expressão regular para checar se o valor é alguma das opções acima. Guardaremos o resultado em uma variável local chamada mobile.

Armazenaremos esse resultado no estado utilizando o hook useState, que terá o valor inicial de false. Para isso, criamos a variável de estado isMobile e o método de atribuição setMobile.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  const [isMobile, setMobile] = React.useState(false);

  React.useEffect(() => {
    const userAgent =
      typeof window.navigator === "undefined" ? "" : navigator.userAgent;
    const mobile = Boolean(
      userAgent.match(
        /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
      )
    );
    setMobile(mobile);
  }, []);
}

Então, quando definirmos o valor de mobile, vamos guardá-lo no state. Finalmente, retornaremos um objeto no caso de precisarmos adicionar novas informações e funcionalidades à esse hook.

No objeto de retorno, adicionaremos isMobile como uma propriedade e seu valor.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  const [isMobile, setMobile] = React.useState(false);

  React.useEffect(() => {
    const userAgent =
      typeof window.navigator === "undefined" ? "" : navigator.userAgent;
    const mobile = Boolean(
      userAgent.match(
        /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
      )
    );
    setMobile(mobile);
  }, []);

  return { isMobile };
}

Resultado

De volta a nossa landing page, podemos executar o hook e utilizar o valor da propriedade isMobile onde quisermos.

// templates/course.js
import React from "react";
import useDeviceDetect from "../utils/useDeviceDetect";

function Course() {
  const { isMobile } = useDeviceDetect();

  return (
    <>
      
      {!isMobile && }
      {/* more components... */}
    
  );
}

Conclusão

Como eu tentei demonstrar nos exemplos acima, os hooks do React podem nos fornecer as ferramentas necessárias para consertar os problemas quando bibliotecas externas falharem.

Espero que este guia tenha dado a você uma ideia melhor de como criar os seus próprios hooks em React. Fique à vontade para usar qualquer um dos hooks acima nos seus projetos ou como inspiração para criar outros hooks.

Torne-se um desenvolvedor de React profissional

React é difícil. Você não precisa aprendê-lo sozinho.

Coloquei tudo o que sei sobre React em um único curso, para ajudar você a alcançar seus objetivos em tempo recorde:

Apresento a vocês: The React Bootcamp (em inglês)

É o curso que eu gostaria de ter feito quando comecei a aprender React.

Como construir um menu acordeão em React a partir do zero – sem necessidade de bibliotecas externas

Afonso Branco — Tue, 03 Sep 2024 21:00:00 +0000

Artigo original: How to Build an Accordion Menu in React from Scratch – No External Libraries Required

Tradução em português europeu

Existem várias maneiras de se utilizar menus acordeão, tais como exibir uma lista de FAQs (Perguntas frequentes, em português), exibir vários menus e submenus, exibir as localizações de uma empresa em particular, e assim adiante.

Neste artigo, verás como criar um menu acordeão em React completamente do zero, passo a passo, sem utilizar qualquer biblioteca externa.

Vamos utilizar a sintaxe de "React Hooks" para criar esta aplicação em React. Então, se não tiveres experiência em React Hooks, dá uma vista de olhos ao meu artigo An introduction to React Hooks (texto em inglês) para aprender os conceitos básicos dos Hooks.

Podes ver uma demonstração da aplicação aqui.

Então, vamos começar.

Configuração inicial do projeto

Cria um projeto utilizando create-react-app.

npx create-react-app react-accordion-demo

Assim que o projeto for criado, remove todos os ficheiros da pasta src e cria os ficheiros index.js, App.js e styles.css dentro da pasta src. Além disso, cria uma pasta com o novo utils dentro da pasta src.

Abre o ficheiro styles.css e adiciona os conteúdos daqui dentro dele.

Como criar as páginas iniciais

Abre o ficheiro src/App.js e adiciona o seguinte conteúdo dentro dele:

import React from 'react';

const App = () => {
  const accordionData = {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
  };

  const { title, content } = accordionData;

  return (
    
      React Accordion Demo
      
        
          
            {title}
            +
          
          {content}
        
      
    
  );
};

export default App;

Aqui, utilizamos as propriedades do objeto accordionData para exibir o conteúdo do acordeão.

Para a propriedade content, utilizamos a sintaxe de template literals do ES6 (``) de maneira a podermos distribuir o conteúdo por várias linhas e utilizamos algum texto lorem ipsum para preencher.

Agora, abre o ficheiro src/index.js e adiciona o seguinte conteúdo dentro dele:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles.css';

ReactDOM.render(, document.getElementById('root'));

Agora, se executares a aplicação utilizando o comando yarn start a partir do terminal, verás o seguinte ecrã:

Tal como podes ver acima, exibimos uma única secção como uma parte do acordeão. Por defeito, contudo, o acordeão está expandido e não podemos fechá-lo. Então, vamos adicionar a funcionalidade para abrir e fechar o acordeão.

Adiciona um novo estado dentro do componente, tal como mostrado abaixo:

const [isActive, setIsActive] = useState(false);

Aqui, definimos o estado isActive. Com base nisso, vamos ocultar ou exibir o conteúdo do acordeão.

Importa também o hook useState no início do ficheiro:

import React, { useState } from 'react';

Agora, para a div com a classe accordion-title, adiciona o manipulador onClick, desta forma:


  
     setIsActive(!isActive)}
    >
      {title}
      {isActive ? '-' : '+'}
    
    {isActive && {content}}

Aqui, estamos a inverter o valor do estado isActive quando clicamos na div accordion-title. Se o valor de isActive for false, estamos a defini-lo para true, e vice-versa.

Também estamos a exibir os sinais + ou - com base no valor de isActive, utilizando o operador ternário.

Se o valor de estado de isActive for true, vamos exibir apenas o conteúdo do acordeão, tal como mostrado abaixo:

{isActive && {content}}

Agora, se verificares a aplicação, verás o seguinte ecrã:

Como podes observar, inicialmente, o acordeão está fechado. Quando clicamos no título, o acordeão abre e podemos clicar nele novamente para fechá-lo.

Como adicionar várias secções em acordeão

Isto funciona bem para uma única secção em acordeão. No entanto, se tivermos várias secções, não será bom copiar e colar o mesmo código JSX vezes sem conta com conteúdo diferente.

Então, vamos criar um componente separado para exibir apenas o acordeão. Depois, com base no número de secções, vamos iterar sobre o componente para exibir várias secções.

Cria um ficheiro Accordion.js dentro da pasta src e adiciona-lhe os seguintes conteúdos:

import React, { useState } from 'react';

const Accordion = ({ title, content }) => {
  const [isActive, setIsActive] = useState(false);

  return (
    
       setIsActive(!isActive)}>
        {title}
        {isActive ? '-' : '+'}
      
      {isActive && {content}}
    
  );
};

export default Accordion;

Aqui, movemos o estado e a div accordion-item do ficheiro App.js para o ficheiro Accordion.js. Estamos a passar os props dinâmicos title e content para o componente utilizando a sintaxe de desestruturação do ES6, como isto:

const Accordion = ({ title, content }) => {

Agora, abre o ficheiro App.js e substitui-o pelo seguinte conteúdo:

import React from 'react';
import Accordion from './Accordion';

const App = () => {
  const accordionData = [
    {
      title: 'Section 1',
      content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
    },
    {
      title: 'Section 2',
      content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
      reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
      quaerat iure quos dolorum accusantium ducimus in illum vero commodi
      pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
      quidem maiores doloremque est numquam praesentium eos voluptatem amet!
      Repudiandae, mollitia id reprehenderit a ab odit!`
    },
    {
      title: 'Section 3',
      content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
      quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
      dolor ut sequi minus iste? Quas?`
    }
  ];

  return (
    
      React Accordion Demo
      
        {accordionData.map(({ title, content }) => (
          
        ))}
      
    
  );
};

export default App;

Aqui, convertemos accordionData de um objeto para um array de objetos. Estamos a iterar sobre ele utilizando o método de mapeamento de array e a passar os title e content correspondentes para o componente Accordion.

Agora, se verificares a aplicação, verás que as três secções são exibidas e que podemos abrir e fechar cada secção, tal como mostrado abaixo:

Como refatorar o código

Então, tal como podes ver, ao mover simplesmente a secção do acordeão para fora para uma componente separado e ao passar o conteúdo dinâmico como props, conseguimos criar com sucesso uma versão funcional de um acordeão a partir do zero.

É uma boa prática manter a informação estática num ficheiro à parte. Então, vamos mover o array accordionData para um ficheiro diferente e importá-lo para App.js.

Cria um ficheiro chamado content.js dentro da pasta utils e adiciona-lhe o seguinte conteúdo:

export const accordionData = [
  {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
    laborum cupiditate possimus labore, hic temporibus velit dicta earum
    suscipit commodi eum enim atque at? Et perspiciatis dolore iure
    voluptatem.`
  },
  {
    title: 'Section 2',
    content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
    reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
    quaerat iure quos dolorum accusantium ducimus in illum vero commodi
    pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
    quidem maiores doloremque est numquam praesentium eos voluptatem amet!
    Repudiandae, mollitia id reprehenderit a ab odit!`
  },
  {
    title: 'Section 3',
    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
    quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
    dolor ut sequi minus iste? Quas?`
  }
];

Agora, abre App.js e substitui-o pelo seguinte conteúdo:

import React from 'react';
import Accordion from './Accordion';
import { accordionData } from './utils/content';

const App = () => {
  return (
    
      React Accordion Demo
      
        {accordionData.map(({ title, content }) => (
          
        ))}
      
    
  );
};

export default App;

Aqui, apenas importamos a informação estática do ficheiro externo e removêmo-la do ficheiro App.js.

Então, agora o código está mais limpo e fácil de compreender e a funcionalidade está a funcionar como antes.

Pontos finais

Terminamos a construção da funcionalidade da nossa aplicação.

Podes encontrar o código fonte completo desta aplicação no GitHub neste repositório.

Obrigado pela leitura!

Desejas aprender todas as funcionalidades do ES6+ em detalhe, incluindo let e const, promises, vários métodos de promises, arrays e desestruturação de objetos, funções de seta, async/await, importação e exportação e muito mais a partir do zero?

Consulta o meu livro "Mastering Modern JavaScript" (em inglês). Ele aborda todos os pré-requisitos para aprender React e ajuda-te a ficar mais competente em JavaScript e React.

Como implantar uma aplicação do React em produção na AWS usando Express, Postgres, PM2 e nginx

Daniel Rosa — Fri, 30 Aug 2024 13:51:40 +0000

Artigo original: How to deploy a React app to production on AWS using Express, Postgres, PM2 and nginx

Neste tutorial, vou guiá-lo através de uma configuração de implantação em nível de produção na AWS a partir do zero. Vou presumir que você tem pouco ou nenhum conhecimento prévio sobre AWS e que você é um iniciante.

Configuraremos uma aplicação full-stack do React Express com um banco de dados PSQL. Implantaremos a aplicação em uma instância da AWS EC2 executando uma Amazon Linux AMI 2. A configuração usará NGINX como um proxy reverso e PM2 como o gerenciador de clusters. O banco de dados PSQL será implantado na AWS RDS.

Vamos nos manter dentro do nível gratuito. Assim, seguir este tutorial não custará nada.

Por que aprender AWS?
AWS é atualmente a maior plataforma de computação em nuvem. O Wordpress alimenta mais sites pequenos, mas a AWS é usada pela grande maioria dos sites comerciais de alto tráfego. Isso significa que pessoas com habilidades em AWS estão em grande demanda.

Você pode assistir a uma versão em vídeo deste tutorial aqui.

Comandos úteis do terminal:
https://github.com/iqbal125/terminal_commands_fullstack

Teoria

Como funciona a rede na computação em nuvem da AWS
Instância da AWS EC2
Endereços IP públicos x privados
Endereços IPv4
Conectando-se à internet pública a partir de uma rede privada
Visão geral conceitual da VPC da AWS
Como funcionam as sub-redes na AWS
SSH

Prática

Implantação simples do EBS
Configuração da VPC e sub-redes
Gateways da internet e tabelas de roteamento
Configuração de grupos de segurança
Implantação de um computador em nuvem com AWS EC2
Configuração do banco de dados na AWS
Configuração da build do React para produção
Configuração do PM2
Configuração do Nginx

Teoria

A computação em nuvem simplificou drasticamente a implantação de uma aplicação para a web. Sites como Digital Ocean e Heroku tornam o processo ainda mais fácil ao ocultar toda a complexidade e permitir que você implante sua aplicação com alguns passos simples.

Essas ferramentas são boas, mas o que queremos é uma configuração de computação em nuvem robusta, altamente segura e altamente performática, o que significa que vamos fazer isso do zero.

A configuração da AWS envolverá principalmente a rede. É por isso que a maior parte deste tutorial focará em conceitos e configurações de rede.

Todo o resto, como o provisionamento dos bancos de dados e instâncias EC2, é fácil de fazer na AWS. A rede será o maior desafio.

Não se preocupe, no entanto, se você não tiver nenhuma experiência em rede. Vou fornecer todas as informações de que você precisa saber.

Como funciona a rede na computação em nuvem

Ela funciona basicamente da mesma maneira que a rede funciona com hardware, exceto pelo fato de que todo o hardware (roteadores, switches, gateways de internet) é virtualizado na computação em nuvem.

A rede na computação em nuvem determina essencialmente como seus recursos virtuais se comunicam entre si e com a internet em geral.

VPCs, endereços IP e sub-redes são os conceitos mais importantes para entender sobre redes na AWS.

Isso é basicamente o que criaremos.

Teremos uma sub-rede pública e uma sub-rede privada em nossa VPC. A sub-rede pública conterá nosso servidor da web e será acessível pela internet. Nossa sub-rede privada conterá nosso banco de dados, mas não será acessível pela internet.

Nosso servidor da web e nosso banco de dados poderão se comunicar entre eles através de uma tabela de rotas.

Veremos exemplos dos dois quando configurarmos nosso projeto no console da AWS.

Endereços IP públicos x privados

Um endereço IP público é a localização de onde seu computador está na internet. No entanto, o que chamamos de internet é apenas uma das muitas redes.

Da mesma maneira que você pode ter um endereço IP na internet, você também pode ter um endereço IP em outra rede que não seja a internet.

O endereço IP é simplesmente um modo de identificar um único computador em uma rede, independentemente de essa rede ser a internet ou não.

Portanto, endereços IP privados são apenas uma maneira de identificar computadores em nossa própria rede e endereços IP públicos são uma maneira de identificar computadores na rede chamada "internet".

IPv4

IPv4 é o formato em que os endereços IP são escritos.

Exemplo de endereço IPv4: 10.12.15.22

Chamado de IPv4, pois existem 4 bytes que podem representar o endereço. Cada byte contém 8 bits e, portanto, é referido como um octeto.

Como cada octeto contém 8 bits e cada bit pode ser 0 ou 1, há 2 ^ 8 = 256 combinações diferentes. Começamos em 0. Então, um octeto pode ser um número entre 0-255. Como temos 4 octetos, temos 256 ^ 4 = 4,3 bilhões de combinações diferentes e, portanto, endereços IP!

Um endereço IPv4 é resolvido para um formato legível por humanos: "https://google.com" através de um DNS.

Também existe o IPv6, mas, para manter as coisas concisas, vamos pular isso. Precisaremos apenas conhecer o IPv4 para os fins deste tutorial.

Conectando-se à rede pública a partir de uma rede privada

Isso é feito através de um gateway da internet.

Quando uma solicitação é feita por um computador em uma rede privada, uma tabela de roteamento verifica se o destino é para um computador local ou não.

Se não for, a solicitação é encaminhada para o gateway da internet, que a encaminha para fora da rede privada e para um Provedor de Serviço de Internet, que, então, a envia para o destino pretendido.

O gateway da internet também recebe solicitações da internet.

O gateway da internet tem seu próprio endereço IP público. Uma rede pode ter somente um endereço IP público, mesmo que tenha milhares de endereços IP privados.

O protocolo usado para enviar e receber dados é chamado de TCP. Este é um padrão e um modelo que assegura a integridade e confiabilidade dos dados.

VPC e sub-redes

VPC e sub-redes são, de longe, as coisas mais difíceis de entender e aprender na AWS. Por isso, dedicarei uma seção mais longa a eles.

A Nuvem Privada Virtual (em inglês, VPC ou virtual private cloud) é uma localização virtual onde você pode implantar recursos da AWS. Você pode implantar servidores da web, bancos de dados, servidores de arquivos e serviços de mensagens em uma VPC e ter todos os seus recursos contidos em um único lugar virtual.

Cada recurso tem seu próprio endereço IP privado.

Uma sub-rede (subnet) é uma parte menor da sua VPC inteira. As sub-redes são, essencialmente, uma maneira de dividir sua VPC por razões de desempenho e segurança.

Exemplo: utilizamos isso para implantar um banco de dados em uma sub-rede que seja inacessível pela internet, enquanto uma outra sub-rede possui os servidores da web que precisarão ser acessíveis pela internet. Mesmo que essas duas sub-redes sejam separadas, elas ainda fazem parte da mesma VPC.

As sub-redes na AWS são feitas com a notação CIDR.

Exemplo de notação CIDR para sub-rede: 10.11.12.0/24

Máscara de sub-rede
A máscara de sub-rede determina o número de endereços IP disponíveis para a sub-rede. O /24 é a máscara de sub-rede.

Uma máscara de sub-rede é usada como uma maneira de dividir sua sub-rede em um número aproximado de endereços IP.

Prefixo de rede: são os octetos iniciais inalteráveis que identificam uma sub-rede ou VPC única.

Endereço do host: os endereços IP disponíveis para uso nos diferentes recursos em uma sub-rede.

/24 significa que os primeiros 24 bits devem ser usados como prefixo de rede e, portanto, são inutilizáveis. Como um IPv4 tem 32 bits no total, temos 8 bits restantes, que são conhecidos como endereço do host. Esses são os endereços IP utilizáveis. Como 8 bits têm 256 combinações, nossa sub-rede pode ter qualquer endereço entre 10.11.12.0 e 10.11.12.255

Os números 1 representam o prefixo de rede e os números 0 representam o endereço do host

/24 = 255.255.255.0 = 11111111.11111111.11111111.00000000

Isso é igual a:

10.11.12.0/24

10.11.12.0/255.255.255.0

10.11.12.0/11111111.11111111.11111111.00000000

Uma sub-rede não precisa ser dividida uniformemente em octetos.

10.11.12.0 /19 significa uma máscara de sub-rede de 11111111.11111111.11100000.0000000

Se formos a um calculador de sub-rede, podemos ver como isso funciona. Um calculador de sub-rede fornece o número de endereços IP disponíveis em uma sub-rede, além de fornecer o endereço IP mínimo e máximo.

Como você pode ver, essa sub-rede nos dá um total de 8190 endereços IP utilizáveis.

Os dois primeiros octetos são todos 1s. Então, eles são usados como o prefixo de rede e podem ser qualquer número entre 0-255.

Nosso terceiro octeto, porém, tem apenas o prefixo de rede parcial e temos apenas 5 bits para usar como nosso endereço do host. Isso significa que o segundo octeto pode ser apenas um número entre 0-31, já que 2 ^ 5 = 32.

Nosso último octeto é todo 0, então, normalmente, pode ser qualquer número entre 0-255.

Tudo isso significa que nossa sub-rede pode ter qualquer endereço entre

10.11.0.0 - 10.11.31.255

Observação: os primeiros e últimos endereços IP são usados como endereços de rede e transmissão, que são endereços IP especiais com funções especiais. É por isso que o Host min é o segundo endereço IP e o Host Max é o penúltimo endereço IP.

Você pode aprender mais sobre endereços de rede e transmissão aqui (em inglês):

Para evitar toda a complexidade mencionada acima, é melhor ficar com máscaras de sub-rede de /8 /16 /24. Fazendo isso, você garantirá que não haverá octetos parciais.

10.11.12.0/8 terá os últimos 3 octetos inteiros disponíveis como endereços IP

10.11.12.0/16 terá os últimos 2 octetos inteiros disponíveis como endereços IP

10.11.12.0/24 terá o último 1 octeto inteiro disponível como endereços IP

Exemplo real
VPC: 10.11.0.0/16

Sub-rede pública 1: 10.11.1.0/24, qualquer endereço IP entre 10.11.1.0 e 10.11.1.255
Sub-rede pública 2: 10.11.2.0/24, qualquer endereço IP entre 10.11.2.0 e 10.11.2.255

Sub-rede privada 1: 10.11.3.0/24, qualquer endereço IP entre 10.11.3.0 e 10.11.3.255

Sub-rede privada 2: 10.11.4.0/24, qualquer endereço IP entre 10.11.4.0 e 10.11.4.255

Observação: nem todos os endereços IP estarão disponíveis para sua sub-rede. Alguns endereços, como os de rede e de transmissão, bem como alguns outros endereços de utilidade, serão reservados pela AWS.

AWS EC2

É o "computador" na computação em nuvem. É essencialmente um computador virtual. Tem tudo o que seu computador doméstico possui: CPU, RAM, disco rígido etc.

Existem também outros sistemas operacionais Linux disponíveis, como Ubuntu e Red Hat, assim como sistemas operacionais baseados em Windows disponíveis, tais como o Windows Server. Sistemas Windows permitem que você use uma interface gráfica de usuário (GUI) se preferir não trabalhar com a linha de comando.

Um único computador EC2 é referido como uma instância.

SSH

Secure shell: usado para fazer login no nosso servidor Linux EC2 a partir do nosso computador pessoal.

Você pode usar o Putty para SSH se preferir uma interface gráfica.

Eu usarei o Git Bash. É mais simples de usar, mas não tem uma GUI.

Vamos utilizar chaves privadas e públicas para SSH. Ambas são geradas pela AWS.

A chave privada será armazenada no seu próprio computador e será usada durante o processo de login.

A chave pública será armazenada na Amazon e permitirá os logins. A chave pública não precisa ser mantida em segredo. A chave privada deve ser mantida em um lugar seguro no seu computador. Se você a apagar acidentalmente, não há como obter outra.

Prática

Implantação simples do EBS

Antes de fazer nossa implantação complexa, podemos fazer uma implantação simples do EBS para nos familiarizarmos.

AWS Elastic Beanstalk é uma maneira de lançar uma aplicação na nuvem sem precisar configurar manualmente os recursos subjacentes, como o VPC, servidor da web e banco de dados. É muito fácil e rápido ter uma aplicação em execução no AWS ELB e é uma boa maneira de se familiarizar com a AWS.

Vá para a página inicial da AWS e crie uma nova conta se você ainda não tiver uma.

Depois, acesse Services e, em seguida, ElasticBeanStalk, em "Compute".

Isso o levará à página inicial do EBS. Após isso, avance e clique em Create New Application e depois dê um nome e descrição para sua aplicação.

Você pode, então, clicar em Create New Environment e depois selecionar Web server environment.

Nesta página, selecione Node.js como a plataforma e use o código da aplicação de exemplo. Todo o resto pode ser deixado como padrão.

Eu não tive sorte ao implantar a aplicação diretamente daqui. Então, vamos clicar em Configure more options para configurar o projeto um pouco mais.

Clique no card de rede na parte inferior da página e certifique-se de que o VCP padrão está sendo usado junto com a sub-rede padrão marcada.

Depois, clique no card Instances e certifique-se de que a caixa de grupos de segurança padrão esteja marcada.

É isso. Agora, podemos clicar em Create environment para lançar nossa aplicação.

Se funcionou, você deve ver o ambiente lançado com sucesso na sua tela.

Se você clicar no URL, poderá ver sua aplicação implantada.

Parabéns por implantar uma aplicação na nuvem da AWS!

Importante: certifique-se de excluir depois para não ser cobrado por usar a AWS.

Para excluir, simplesmente clique em Terminate Environment em Actions. Isso excluirá a aplicação junto com todos os recursos subjacentes.

Agora, podemos passar para a configuração complexa.

Configuração do VPC

Primeiro, podemos ir para o painel de controle do VPC, que está na seção Network & Content Delivery.

Você deve estar na tela de dashboard do VPC. Lá, você pode criar um VPC com o botão Launch VPC Wizard (que é um pouco mais fácil), mas eu mostrarei como configurá-lo do zero (que é um pouco mais difícil), mas dará a você uma melhor compreensão de como um VPC funciona.

Primeiro, clique na aba VPCs e clique no botão Create VPC, que levará você a uma página semelhante a esta.

Podemos nomear o VPC como VPC 3.

Podemos definir o bloco CIDR para 10.11.0.0/16. Se você se lembra das seções de Teoria de VPC e sub-rede, isso significa que os dois primeiros octetos são o prefixo da rede e os últimos dois octetos são o endereço do host. Eles estão disponíveis para nossa utilização.

Tenancy significa que o VPC estará em seu próprio hardware dedicado ou não. Há uma percepção de que a Tenancy dedicada é mais segura ou tem melhor desempenho, mas não há dados para sugerir isso.

A Tenancy padrão (em inglês, default) significa que seu VPC compartilhará o hardware subjacente com outros usuários da AWS, mas será isolado deles através de software.

Depois disso, podemos clicar em Create VPC, finalizando nossa configuração do VPC.

Configuração de sub-redes

A seguir, configuraremos as sub-redes. Podemos começar clicando na aba Subnets e clicar em Create subnet.

Vamos primeiro criar nossa sub-rede pública, assim:

10.11 é nosso prefixo de rede inalterável da nossa VPC, o que faz com que .1 também faça parte do prefixo da rede, já que a máscara de sub-rede é /24 e .1 é também o identificador dessa sub-rede.

O último octeto, então, serve como endereço do host, o que significa que esta sub-rede pode ter qualquer endereço entre 10.11.1.0 - 10.11.1.255.

Depois disso, podemos clicar em Create, o que criará a sub-rede e a listará sob as sub-redes.

Passemos para nossa sub-rede privada:

Ela é configurada de maneira similar à sub-rede pública, com a principal diferença sendo que a terceira casa decimal é .2 ao invés de .1. Também precisamos especificar uma zona de disponibilidade para fazer essa sub-rede funcionar com nosso banco de dados.

Então, basicamente, 10.11 é o prefixo de rede que obtivemos da VPC. .2 é a terceira casa decimal e o identificador único para esta sub-rede. O último octeto, .0, são os endereços IP disponíveis entre 0-255.

Isso significa que esta sub-rede pode ter qualquer endereço IP de 10.11.2.0 - 10.11.2.255.

Se você comparar isso com nossa sub-rede pública, que tem um intervalo de endereços IP de 10.11.1.0 -10.11.1.255, ficará muito mais claro qual é o padrão para configurar a sub-rede.

Implantar um banco de dados na AWS requer 2 sub-redes em diferentes zonas de disponibilidade, então você pode configurar a segunda assim:

Gateways de internet e tabelas de roteamento

Tabelas de roteamento são essencialmente roteadores e determinam como e para onde o tráfego é direcionado.

Agora, podemos criar um gateway de internet que anexaremos à nossa sub-rede pública.

Como todos os gateways de internet funcionam da mesma maneira, só precisamos definir o nome. Antes de podermos anexar este gateway de internet à nossa sub-rede, precisamos primeiro configurar a tabela de roteamento.

Podemos ir para a aba Route Tables e clicar em Create route table.

Só temos que definir o nome e associá-la à VPC. Podemos associá-la à VPC 3 e então clicar em criar.

Uma vez feito isso, podemos anexar nosso gateway de internet a essa VPC. Vamos voltar para a aba do gateway de internet, clicar no botão Actions e, depois, em Attach to VPC.

Para a opção de anexar, basta selecionar a VPC 3.

Em seguida, podemos voltar à nossa tabela de roteamento que configuramos e adicionar uma rota. Podemos adicionar a rota assim.

Isso está dizendo que, se for feita uma solicitação, a tabela de roteamento primeiro verifica se a rota é para uma rota local 10.11.0.0/16. Caso contrário, encaminhamos essa solicitação para o gateway de internet para todas as outras rotas que são representadas por 0.0.0.0/0.

Então, podemos clicar na aba de associações de sub-rede e depois no botão Edit subnet associations.

Queremos apenas que a sub-rede pública esteja associada a essa tabela de roteamento. Então, marcamos apenas essa e podemos clicar em Save.

Não podemos nos esquecer das nossas sub-redes privadas. Basta criar outra tabela de roteamento e associar as sub-redes privadas a ela da mesma maneira que fizemos para a sub-rede pública. Não adicione um gateway de internet, apenas deixe a tabela de roteamento para alvos locais.

Grupos de segurança

Grupos de segurança são essencialmente firewalls que filtram o tráfego de entrada e saída.

Precisamos configurar os grupos de segurança para trabalhar com essa configuração. Clique na aba de Security Groups e clique em Create security group.

Criar o grupo de segurança é muito fácil. Podemos apenas definir o nome e a descrição e associá-lo à nossa VPC 3.

Depois de criar os grupos de segurança, clique em Edit inbound rules.

Em seguida, podemos configurar as regras de segurança assim:

Primeiro, temos o SSH que usamos para fazer login na nossa instância do Ec2 a partir do nosso computador pessoal. Deixei a origem como 0.0.0.0/0, porque não quero colocar meu endereço IP pessoal, mas, em uma aplicação real, você vai querer colocar seu próprio endereço IP aqui.

Depois disso, temos a porta normal 80 e a porta 443, que permitem o tráfego normal pela internet. ::/0 permite todo o tráfego IPv6 junto com IPv4.

Lançando uma instância do EC2 (computador em nuvem)

Primeiro, vamos ao painel do EC2 e clicamos em Launch instance. Em seguida, podemos selecionar o Amazon Linux AMI como o sistema operacional.

Então, para permanecer na camada gratuita, selecione a opção t.2 micro para o tipo de instância.

No terceiro passo, temos que configurar os detalhes da instância, o que podemos fazer assim:

Para a rede, podemos selecionar nossa VPC 3 e, para nossa sub-rede, podemos selecionar nossa sub-rede pública. Como este é nosso servidor da web, queremos que ele esteja em nossa sub-rede pública anexada a um gateway de internet.

Adicionar tags e adicionar armazenamento podem ser deixados como padrão.

Para a segurança, certifique-se de adicionar o grupo de segurança do servidor da web que configuramos na última seção.

Isso vai gerar um pop-up para oferecer um par de chaves. Podemos seguir em frente e selecionar criar um par de chaves. Em seguida, podemos baixar esse par de chaves.

Se feito corretamente, você deverá ver isto na sua tela:

Depois disso, nossa instância é lançada e está disponível para acessarmos via SSH. Podemos acessar nossa instância com o comando:

ssh -i “keypair.pem” ec2-user@public-ip-address

Configuração do banco de dados

Vamos agora configurar o banco de dados. Podemos começar indo até a aba RDS na seção Databases, em Services. Isso nos levará ao dashboard RDS Database.

Antes de podermos criar um banco de dados, temos que criar primeiro um grupo de sub-rede. Para começar, podemos ir até a aba de grupos de sub-rede e clicar em Create db subnet group.

Um grupo de sub-rede de bancos de dados serve para proteger contra qualquer tipo de falha total do servidor ou exclusão acidental. É por isso que ele abrange 2 zonas de disponibilidade. No caso remoto de um servidor falhar completamente em uma zona de disponibilidade, seu banco de dados ainda estará bem. É extremamente improvável que os dois servidores falhem completamente em 2 zonas de disponibilidade diferentes ao mesmo tempo.

Primeiro, definimos o nome e a descrição. Depois, associamos nossa VPC 3 ao grupo de sub-rede. Após isso, podemos adicionar nossas sub-redes.

As sub-redes serão listadas sob a zona de disponibilidade onde as configuramos, na seção anterior. Depois, podemos apenas clicar em Create.

Depois de criar o grupo de sub-rede, estamos prontos para criar nosso banco de dados real.

Podemos primeiro selecionar a opção elegível para o nível gratuito no final.

Em seguida, clicamos em Next. Podemos deixar todas as outras configurações na próxima página com as opções padrão. Certifique-se de lembrar do nome de usuário e senha definidos aqui.

Na próxima página, podemos definir a VPC como nossa VPC 3, o grupo de sub-rede para o que acabamos de configurar.

Certifique-se também de deixar "Public acessibility" marcado como não. Por razões óbvias de segurança, não queremos que nossa aplicação esteja disponível na internet.

Todo o resto pode ser deixado como padrão. Configuraremos nossos grupos de segurança do banco de dados em um segundo.

Agora, podemos clicar em Create database e criar os grupos de segurança do banco de dados enquanto o banco de dados está sendo criado.

Podemos ir até a aba de grupos de segurança no dashboard da VPC e criar um grupo de segurança, como vimos anteriormente. Para as regras de entrada, podemos limitá-las ao intervalo CIDR do nosso servidor da web, com a porta configurada para a porta padrão 5432 do PSQL.

Clique em Create e estamos prontos para adicionar isso ao nosso banco de dados.

Para adicionar este novo grupo de segurança, podemos ir até o banco de dados no painel de controle do banco de dados. Depois, clique no botão Modify.

Depois disso, podemos apenas selecionar o grupo de segurança que acabamos de configurar na seção de rede e segurança.

Uma pergunta que você pode ter agora é como se conectar ao nosso banco de dados se ele não é publicamente acessível na internet.

A maneira de se fazer isso é, primeiro, acessando via SSH nossa instância do Linux e depois se conectanado ao nosso banco de dados a partir dessa instância sobre a porta TCP do PSQL, que configuramos na nossa tabela de rotas.

Para testar isso, podemos acessar via SSH nossa instância do EC2 da mesma maneira vista acima. Em seguida, podemos instalar o psql com o comando:

sudo amazon-linux-extras install postgresql9.6

Depois, podemos nos conectar ao banco de dados psql com o seguinte comando:

psql -d nome-do-bd -h nome-do-host -p porta -U nome-de-usuário

Se conectado com sucesso, você verá o nome do seu banco de dados seguido de uma seta.

Configuração do projeto do React e do Node

Aqui, vou abordar uma configuração de exemplo com React e node/express. A primeira coisa a fazer é executar o comando npm run build, que gerará uma build de produção de sua aplicação em um diretório chamado build.

Observação: certifique-se de que todas as rotas do localhost na sua versão de build sejam alteradas para o IP público. Isso é provavelmente verdade para autenticação. Todo o resto pode ser deixado como está.

Corte e cole todo este diretório build em um servidor node/express. Depois, defina um caminho para ele, conforme mostrado abaixo.

....
//servidor express

app.use(express.static(path.join(__dirname, 'build')));

if(process.env.NODE_ENV === 'production') {
  app.get('/*', function (req, res) {
   	res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
}

....

A primeira função é como servimos os arquivos estáticos da nossa aplicação do React (os arquivos JS, CSS, PWA).

A segunda função verifica se o ambiente é de produção e, então, serve o principal arquivo HTML do React.

Essa abordagem mantém nosso roteamento do lado do client intacto. Por exemplo, na nossa build de desenvolvimento podemos usar rotas como /post/22 e isso será roteado corretamente para http://localhost:3000/post/22.

Depois disso, basta fazer a implantação do projeto do React Express em um repositório do Github.

É isso. Depois, podemos implantar essa aplicação do React Express em um servidor Linux.

Implantando o projeto na instância AWS EC2

Agora, estamos prontos para implantar nosso projeto. Primeiro, use o SSH na sua instância EC2 com o Gitbash por meio do seguinte comando:

ssh -i "keypair.pem" ec2-user@endereco-ip-publico

A próxima coisa que precisamos fazer é instalar o git, com o comando:

sudo yum install git

Então, podemos clonar o projeto no servidor com o comando

sudo git clone link-to-repo

Depois de fazer isso, você deve conseguir ver os arquivos do seu projeto fazendo cd no diretório.

Ainda não terminamos. Precisamos instalar o node e o npm, porque queremos instalar as dependências do nosso projeto. Primeiro, precisamos instalar o gerenciador de versões do node (NVM), que permitirá instalar o node e o npm. Podemos instalar o nvm assim.

sudo curl https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

Isso instalará o nvm, que podemos usar para instalar o node e o npm. Para fazer isso, basta listar as versões do node disponíveis para download e instalar a mais estável.

Comando para listar versões do node
nvm ls remote

Comando de instalação
nvm install version-of-node

Depois de instalar o npm e o node, se você tentar executar npm install no diretório do projeto, receberá um erro de permissão negada.

Você pode executar o comando abaixo para dar permissão de escrita no diretório. O comando abaixo dá muito mais do que apenas permissões de escrita, mas configurar permissões no Linux está fora do escopo deste tutorial.

Digite sudo chmod 777 no diretório.

Aqui está um link para um tutorial se você quiser saber mais sobre o chmod (em inglês).

Depois disso, seus módulos do npm devem instalar normalmente com o comando normal npm install.

Então, você pode simplesmente executar sua aplicação com o comando npm start, que iniciará seu servidor do node e servirá seu projeto do React como arquivos estáticos.

O problema é que o projeto só rodará nas portas não tradicionais, como 5000 ou 3000, ou qualquer porta que você estiver usando no localhost. Se você tentar a abordagem ingênua de apenas mudar a porta para a porta 80 no servidor, receberá um erro de permissão negada.

Para corrigir isso, usaremos o nginx.

nginx

Você pode estar se perguntando por que estamos usando nginx se já temos o node. É possível usar nginx como um servidor de http, mas usaremos o nginx como um proxy reverso, o que manterá o node como o servidor http real.

A configuração ficará assim.

Os benefícios de se fazer isso são:

O nginx atua como um balanceador de carga em nível de aplicação
Ajuda o node com desempenho e confiabilidade
Melhora a segurança
Previne ataques DoS

Aqui está um diagrama que mostra um proxy regular versus um proxy reverso.

Em um proxy regular, um client da web pode enviar e receber dados de vários servidores da web. Em um proxy reverso, um único servidor da web pode enviar e receber dados de vários clients da web.

Agora, vamos para a nossa instância do EC2 e vamos usar o ssh nela.

A primeira coisa que precisamos fazer é instalar o nginx. A Amazon Linux AMI 2 já vem com o nginx. Então, você pode instalar assim:

sudo amazon-linux-extras install nginx1.12

Depois, podemos acessar o diretório do nginx com cd /etc/nginx

Podemos editar o arquivo de configuração do nginx com o comando sudo nano nginx.conf

Isso abrirá o arquivo nginx.conf no editor sudo nano.

Podemos adicionar este código à rota de localização do home

Basicamente, estamos dizendo para definir a build do react como a rota root. Defina o arquivo index.html como o índice principal. Finalmente, em cada solicitação subsequente, sirva o mesmo arquivo index.html.

Isso porque o React é uma aplicação de página única e, literalmente, um único arquivo html. Então, para possibilitar navegar dentro da aplicação do React, precisamos servir esse mesmo arquivo html novamente em caso de erros.

Em seguida, também podemos configurar o nginx para lidar com nossas rotas da API.

Isso é, na maior parte, código boilerplate, mas a propriedade a ser observada é o proxy_pass, que é nosso IP público e a porta não padrão.

Esse endereço IP será então enviado por proxy para a porta padrão 80, o que nos permitirá acessar o site normalmente.

Versão copiável do código:

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  localhost;


        # Carrega os arquivos de configuração para o bloco de servidor padrão.
        include /etc/nginx/default.d/*.conf;


        location /api/ {
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://10.0.1.187:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;

        }

Depois disso, basta salvar e sair do editor.

Também precisamos reiniciar o nginx para que as alterações tenham efeito. Fazemos isso com sudo systemctl restart nginx.

Isso é tudo de que você precisa fazer para ter o nginx como proxy reverso. Sua aplicação, agora, poderá rodar na porta 80 normalmente.

PM2

O PM2 é um gerenciador de clusters e nos permite rodar nossa aplicação automaticamente e também reiniciar automaticamente se ela travar.

Vamos nos conectar novamente à nossa instância via ssh e instalar o PM2

npm install pm2 -g

A flag -g é importante porque instala o PM2 globalmente. Isso é crucial, porque é isso que permite que o PM2 faça seu trabalho.

Se pensar a respeito, se o PM2 fosse instalado localmente, ele travaria quando nossa aplicação travasse. Ou seja, não daria certo. Instalamos globalmente para que ele fique fora do nosso projeto e possa reiniciar o projeto se ele travar.

Você pode rodar o PM2 no seu projeto com pm2 start app.js -i max

Isso iniciará o projeto com o número máximo de núcleos. Isso é importante porque o node é single threaded e usar todos os núcleos maximiza o desempenho.

Se feito com sucesso, você deve ver uma página que se parece com esta.

Aqui estão alguns outros comandos úteis para o PM2

pm2 list: lista todos os processos em execução

pm2 stop app 0: para a aplicação com id 0

pm2 delete app 0: exclui a aplicação com id 0

pm2 restart app 0: reinicia a aplicação com id 0

pm2 start app.js -i max: inicia app.js com o número máximo de threads disponíveis

É isso! Obrigado pela leitura e parabéns se você leu todo o tutorial – isso não é uma tarefa fácil.

Conecte-se com o autor no Twitter para mais atualizações sobre futuros tutoriais.

Como criar uma aplicação de previsão do tempo com React e React Hooks

Daniel Rosa — Wed, 28 Aug 2024 18:30:32 +0000

Artigo original: How to Build a Weather Application with React and React Hooks

O React é uma biblioteca de front-end incrível que você pode usar para criar interfaces de usuário.

Uma das melhores coisas sobre o React é que os componentes que criamos são encapsulados. Em outras palavras, eles não podem ser vistos.

Vamos aprender mais sobre como tudo isso funciona criando uma aplicação de previsão do tempo usando o React.

Como instalar o Node e o npm

Para criar nossa aplicação em React, precisamos de um ambiente de tempo de execução chamado Node. Ele é principalmente usado para executar código JavaScript.

Para baixá-lo, vá para https://nodejs.org/en/.

Você também precisará do npm, que é um gerenciador de pacotes utilizado no Node. Você pode usá-lo para instalar pacotes para suas aplicações em JavaScript. Felizmente, ele vem com o Node. Então, você não precisa baixá-lo separadamente.

Uma vez que os dois estejam instalados, abra seu terminal ou prompt de comando e digite node -v. Isso verifica qual versão do Node você tem.

Como criar uma aplicação em React

Para criar nossa aplicação em React, digite npx create-react-app no seu terminal, ou npx create-react-app my-weather-app, neste caso.

Você verá que os pacotes estão sendo instalados.

Uma vez que os pacotes estiverem prontos, entre na pasta do projeto e digite npm start.

Você verá o template padrão do create-react-app para o React, assim:

O template padrão do boilerplate do React

App.js

Não precisamos de tudo isso agora. Então, vamos limpar um pouco do código.

No seu arquivo app.js, limpe tudo dentro da tag div. Remova a importação do logo.

Você receberá uma tela em branco na saída depois de fazer isso.

App.js após a limpeza

Como instalar os pacotes necessários

Para tornar essa aplicação mais atraente, precisamos de alguns pacotes externos. Então, vamos instalá-los.

Precisamos da biblioteca Semantic UI React. Para instalá-la, digite o seguinte comando no terminal:

npm install semantic-ui-react semantic-ui-css

Uma vez instalada, abra index.js e importe a biblioteca. Apenas copie e cole o seguinte comando no seu arquivo index.js:

import 'semantic-ui-css/semantic.min.css'

Também precisamos do moment.js para formatar o horário e data. Instale-o usando o seguinte comando:

npm install moment --save

Você pode verificar seu arquivo package.json para acompanhar todos os pacotes instalados.

package.json

Aqui, você pode ver todos os pacotes que possui até agora.

Como criar nossa aplicação de previsão do tempo

Para fazer nossa aplicação de previsão do tempo funcionar, precisamos do OpenWeatherMap, uma API de terceiros que nos permitirá buscar os dados do clima.

Acesse https://home.openweathermap.org/users/sign_up e crie sua própria conta.

Após finalizar, clique na opção API, na barra de navegação. Você verá diferentes opções como Current Weather Data (Dados meteorológicos atuais), Hourly Forecast 4 days (Previsões de hora em hora para 4 dias), Daily Forecast 16 days (Previsões diárias para 16 dias), entre outras. Esses são endpoints da API dos quais você precisará para buscar os dados.

Você também precisa de uma chave de API para chamar essas APIs. Para obter sua chave de API, clique em seu nome de usuário no canto superior direito, e depois em "My API keys" (minhas chaves de API).

Crie uma chave de API, se ela ainda não existir.

Na sua pasta principal da aplicação, crie um arquivo chamado .env.

Esse é um arquivo de variáveis de ambiente, que conterá todos os seus endpoints e chaves de API.

REACT_APP_API_URL = 'https://api.openweathermap.org/data/2.5'
REACT_APP_API_KEY = (Cole sua chave de API aqui)
REACT_APP_ICON_URL = 'https://openweathermap.org/img/w'

Cole sua chave API copiada na variável REACT_APP_API_KEY.

Como usar os React Hooks

Os React Hooks nos permitem usar e gerenciar o state (em português, estado) em nossos componentes funcionais.

Vamos usar os hooks useState e useEffect. Vamos importá-los no topo.

import React, { useEffect, useState } from "react";

Vamos criar dois states, um para latitude e outro para longitude.

const [lat, setLat] = useState([]);
const [long, setLong] = useState([]);

Agora, crie a função useEffect. Seu objetivo é carregar as funções quando a aplicação for carregada e recarregada.

useEffect(() => {
    navigator.geolocation.getCurrentPosition(function(position) {
      setLat(position.coords.latitude);
      setLong(position.coords.longitude);
    });

    console.log("A latitude é:", lat)
    console.log("A longitude é:", long)
  }, [lat, long]);

Obtivemos nossa latitude e longitude usando navigator.geolocation e usamos setLong e setLat para definir os states de longitude e de latitude.

import React, { useEffect, useState } from "react";
export default function App() {

  const [lat, setLat] = useState([]);
  const [long, setLong] = useState([]);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(function(position) {
      setLat(position.coords.latitude);
      setLong(position.coords.longitude);
    });

    console.log("Latitude is:", lat)
    console.log("Longitude is:", long)
  }, [lat, long]);

  return (
    

    
  );
}

app.js

Nosso arquivo app.js está assim agora. Você pode verificar o console para os valores de latitude e longitude.

A latitude é: 25.5922166
A longitude é: 85.12761069999999

Nossa latitude e longitude

Como obter nossa localização atual usando a latitude e a longitude

Vamos criar outra função getWeather, que buscará os dados meteorológicos da Weather API, com base em nossa latitude e longitude.

Nessa função, estamos usando uma chamada de fetch para obter os dados da API. process.env.REACT_APP_API_URL obtém o endereço da sua API e process.env.REACT_APP_API_KEY obtém sua chave de API do arquivo .env. lat e long são a latitude e longitude que obtivemos anteriormente.

Então, convertemos os dados para o formato JSON.

No próximo passo, usamos setData para armazenar nosso resultado no objeto data.

await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(result => {
        setData(result)
        console.log(result);
      });

Depois, registramos os dados no console.

Aqui, você pode ver todos os dados meteorológicos com base em nossa latitude e longitude.

Este é o nosso novo arquivo app.js, que busca os dados meteorológicos com base na longitude e na latitude:

import './App.css';
import React, { useEffect, useState } from "react";
import Weather from './components/weather';
export default function App() {
  
  const [lat, setLat] = useState([]);
  const [long, setLong] = useState([]);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      navigator.geolocation.getCurrentPosition(function(position) {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });

      await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(result => {
        setData(result)
        console.log(result);
      });
    }
    fetchData();
  }, [lat,long])
  
  return (
    
      
    
  );
}

app.js

Como criar os componentes meteorológicos

Vamos criar nossos componentes meteorológicos (Weather), onde exibiremos nossos dados meteorológicos.

Na sua pasta src, crie uma pasta chamada components. Nela, crie um arquivo chamado weather.js.

Agora, vamos chamar nosso componente meteorológico em nosso arquivo principal app.js.

import './App.css';
import React, { useEffect, useState } from "react";
import Weather from './components/weather';
export default function App() {
  
  const [lat, setLat] = useState([]);
  const [long, setLong] = useState([]);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      navigator.geolocation.getCurrentPosition(function(position) {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });

      await fetch(`${process.env.REACT_APP_API_URL}/weather/?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(result => {
        setData(result)
        console.log(result);
      });
    }
    fetchData();
  }, [lat,long])
  
  return (
    
      {(typeof data.main != 'undefined') ? (
        
      ): (
        
      )}
      
    
  );
}

Importando o componente Weather no arquivo app.js

Você pode ver que incluí uma verificação na instrução de retorno. Se o tipo de dados que estamos obtendo for undefined, ele nos mostrará uma div vazia. Como a busca de dados é uma função async, é obrigatório incluir essa verificação. Ela carrega a função após todas as outras funções terem sido executadas. Então, se você remover essa verificação, receberá um erro.

Isso ocorre porque nossa aplicação renderiza a instrução de retorno antes que a chamada à API seja feita. Não há nada para mostrar nesse caso. Então, ela lança um erro indefinido.

Para saber mais sobre async/await, confira este artigo (texto em inglês).

Como criar o corpo do nosso componente Weather

Para esta parte, vamos usar a biblioteca Semantic UI para projetar nossa interface.

Vamos criar um card, que exibirá nossas informações meteorológicas.

import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'

const CardExampleCard = ({weatherData}) => (
  
    
        {weatherData.name}
    
  
)

export default CardExampleCard;

Weather.js

Aqui, importamos um card do semantic-ui-react e, dentro dele, um cabeçalho que mostrará o nome da sua cidade.

A questão é: como obtemos dados do nosso app.js para o componente weather.js?

A resposta é simples. Podemos usar props no React para enviar dados de um componente pai para um componente filho. No nosso caso, nosso componente pai é o app.js e nosso componente filho é o weather.js.

Para fazer isso, basta adicionar as props no componente em app.js.

Aqui, estamos passando os dados com o nome da prop como weatherData. Receberemos as props weatherData em Weather.js.

import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'

const CardExampleCard = ({weatherData}) => (
  
    
        {weatherData.name}
    
  
)

export default CardExampleCard;

Você pode ver que obtivemos o nome da cidade de acordo com a localização.

Da mesma maneira, podemos adicionar mais campos ao nosso componente de previsão do tempo.

import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'

const CardExampleCard = ({weatherData}) => (
  
    
        Nome da Cidade: {weatherData.name}
        Temperatura: {weatherData.main.temp}
        Nascer do Sol: {weatherData.sys.sunrise}
        Pôr do Sol: {weatherData.sys.sunset}
        Descrição: {weatherData.weather[0].description}
    
  
)

export default CardExampleCard;

Podemos obter a temperatura, o horário do nascer do sol, do pôr do sol e a descrição do clima atual da API.

Você pode adicionar quaisquer outros campos que desejar, como umidade, velocidade do vento, visibilidade e mais.

Como formatar os dados e adicionar o dia e a data de hoje

Vamos formatar os dados para que sejam fáceis de entender. Vamos adicionar mais alguns campos.

Para começar, adicione a unidade de temperatura. Você pode fazer isso adicionando °C após a temperatura.

Além disso, vamos mudar o horário do nascer e pôr do sol para a hora local.

import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react'

const CardExampleCard = ({weatherData}) => (
  
    
        Nome da Cidade: {weatherData.name}
        Temperatura: {weatherData.main.temp} °C
        Nascer do Sol: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}
        Pôr do Sol: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}
        Descrição: {weatherData.weather[0].main}
        Umidade: {weatherData.main.humidity} %
    
  
)

export default CardExampleCard;

Agora, vamos adicionar o dia e a data de hoje usando o moment.js.

import moment from 'moment';

Dia: {moment().format('dddd')}
Data: {moment().format('LL')}

Usando o moment.js

Importamos o pacote do moment no topo e exibimos o dia e a data de hoje, respectivamente. A grande coisa sobre este pacote é que ele atualiza automaticamente a data e o dia.

É assim que nosso weather.js se parece agora:

import React from 'react';
import './styles.css';
import { Card } from 'semantic-ui-react';
import moment from 'moment';

const CardExampleCard = ({weatherData}) => (
  
    
        Nome da Cidade: {weatherData.name}
        Temperatura: {weatherData.main.temp} °C
        Nascer do Sol: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}
        Pôr do Sol: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}
        Descrição: {weatherData.weather[0].main}
        Umidade: {weatherData.main.humidity} %
        Dia: {moment().format('dddd')}
        Data: {moment().format('LL')}
    
  
)

export default CardExampleCard;

weather.js

Este é o nosso resultado.

Vamos estilizar

Agora que temos todos os nossos dados, vamos estilizá-los para torná-los mais atraentes.

Primeiramente, vamos tornar o card maior, mudar o border-radius, adicionar uma fonte mais legal, uma cor e remover o alinhamento de texto.

import React from 'react';
import './styles.css';
import moment from 'moment';

const CardExampleCard = ({weatherData}) => (
  
      {weatherData.name}
      
        Dia: {moment().format('dddd')}
      

      
        Temperatura: {weatherData.main.temp} °C
      
      
  
)

export default CardExampleCard;

weather.js


@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

.main{
    width: 700px;
    border-radius: 15px;
    background-color: #01579b;
}

.header{
    background-color: #424242;
    color: whitesmoke;
    padding: 10px;
    font-size: 28px;
    border-radius: 15px;
    font-family: 'Recursive', sans-serif;
}

.day{
    padding: 15px;
    color: whitesmoke;
    font-family: 'Recursive', sans-serif;
    font-size: 24px;
    font-weight: 600;
}

.temp{
    padding: 15px;
    color: whitesmoke;
    font-family: 'Recursive', sans-serif;
    font-size: 18px;
}

styles.css

Esta é a aparência da nossa aplicação agora.

Vamos usar o flexbox para organizar os dados em colunas.


   Dia: {moment().format('dddd')}



   Temperatura: {weatherData.main.temp} °C

Nomeie as divs como 'flex' e adicione a seguinte propriedade no styles.css.

.flex{
    display: flex;
    justify-content: space-between;
}

Nosso weather.js agora ficará assim.

import React from 'react';
import './styles.css';
import moment from 'moment';

const CardExampleCard = ({weatherData}) => (
  
      {weatherData.name}
      
        Dia: {moment().format('dddd')}
        {moment().format('LL')}
      

      
        Temperatura: {weatherData.main.temp} °C
        Umidade: {weatherData.main.humidity} %
      
      
      
  
)

export default CardExampleCard;

weather.js

Do mesmo modo, adicione os campos restantes.

import React from 'react';
import './styles.css';
import moment from 'moment';

const WeatherCard = ({weatherData}) => (
  
      {weatherData.name}
      
        {moment().format('dddd')}, {moment().format('LL')}
        {weatherData.weather[0].main}
      

      
        Temperatura: {weatherData.main.temp} °C
        Umidade: {weatherData.main.humidity} %
      

      
        Nascer do sol: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}
        Pôr do sol: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}
      
    
  
)

export default WeatherCard;

weather.js

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

.main{
    width: 700px;
    border-radius: 20px;
    background-color: #01579b;
}

.top{
    height: 60px;
    background-color: #424242;
    color: whitesmoke;
    padding: 10px;
    border-radius: 20px 20px 0 0;
    font-family: 'Recursive', sans-serif;
    display: flex;
    justify-content: space-between;
}

.header{
    background-color: #424242;
    color: whitesmoke;
    margin: 10px 0px 0px 10px;
    font-size: 25px;
    border-radius: 20px 20px 0 0;
    font-family: 'Recursive', sans-serif;
}

.day{
    padding: 15px;
    color: whitesmoke;
    font-family: 'Recursive', sans-serif;
    font-size: 24px;
    font-weight: 600;
}

.temp{
    padding: 15px;
    color: whitesmoke;
    font-family: 'Recursive', sans-serif;
    font-size: 18px;
}

.flex{
    display: flex;
    justify-content: space-between;
}

.sunrise-sunset{
    padding: 15px;
    color: whitesmoke;
    font-family: 'Recursive', sans-serif;
    font-size: 16px;
}

.description{
    padding: 15px;
    color: whitesmoke;
    font-family: 'Recursive', sans-serif;
    font-size: 24px;
    font-weight: 600;
}

styles.css

Esta é a aparência da nossa aplicação agora:

Como adicionar um botão de atualizar

Vamos adicionar um botão de atualizar na parte superior da nossa página.

import React from 'react';
import './styles.css';
import moment from 'moment';
import { Button } from 'semantic-ui-react';

const refresh = () => {
  window.location.reload();
}

const WeatherCard = ({weatherData}) => (
  

      
        {weatherData.name}
        
      
        {moment().format('dddd')}, {moment().format('LL')}
        {weatherData.weather[0].main}
      

      
        Temperatura: {weatherData.main.temp} °C
        Umidade: {weatherData.main.humidity} %
      
 )
 
 export default WeatherCard;

weather.js

.button {
  width: 35px;
  height: 35px;
}

styles.css

Você pode ver um botão que acionará a função de atualização. Quando você pressioná-lo, ele atualizará a página.

Como adicionar um carregador quando nossa aplicação está carregando

Vamos adicionar um carregador (em inglês, loader) para tornar a aplicação ainda mais incrível.

Importe Loader da Semantic UI e adicione-o na função de retorno, onde verificamos se há dados undefined.

import { Dimmer, Loader } from 'semantic-ui-react';


      {(typeof data.main != 'undefined') ? (
        
      ): (
        
          
            Carregando..
          
       
     )}

app.js

Vamos recapitular o que fizemos

Criamos uma aplicação em React que mostra o clima atual com base na sua localização.

Vamos passar por tudo que fizemos até agora.

Aprendemos sobre state e props

State e Props são recursos muito poderosos em React. Eles são usados para gerenciar dados e controlar seu fluxo dentro de diferentes componentes.

Em nossa aplicação, estamos gerenciando o state, que é o estado da aplicação. Por exemplo, o nome da cidade, a temperatura, a data, a umidade e tudo mais. Eles variam de usuário para usuário, dependendo de sua localização.

Props, por outro lado, são usadas para passar dados entre componentes. Estamos obtendo os dados no nosso arquivo app.js, mas os estamos lendo no weather.js. Lembre-se, props só podem ser usadas para passar dados do componente pai para o componente filho.

Usamos React Hooks

Se você já usou componentes de classe, deve conhecer os métodos do ciclo de vida. Se não, eles são os métodos que são chamados quando nossa página renderiza ou re-renderiza. Não podemos, porém, usar métodos do ciclo de vida em componentes funcionais, pois eles são especialmente construídos para componentes de classe.

Os React Hooks são a alternativa. Usamos dois hooks em nossa aplicação. Um é o useState, usado para gerenciar o state da aplicação. O outro é o useEffect, que é carregado quando a página é renderizada ou carregada.

Experimentamos a Semantic UI

A Semantic UI é uma biblioteca para React que possui componentes pré-definidos incríveis.

Isso é tudo, pessoal. Você pode adicionar mais recursos à aplicação, como uma previsão de cinco dias, ícones e muito mais.

Você pode encontrar o código no Github se quiser experimentar mais.

Você também pode assistir a este tutorial no canal do YouTube do autor (em inglês), se quiser.

Experimente sempre mais e mais. Bons estudos para você.

React Testing Library – tutorial com exemplos de código em JavaScript

Kris Lagerström — Mon, 08 Jul 2024 21:00:00 +0000

Artigo original: React Testing Library – Tutorial with JavaScript Code Examples

Este artigo ajudará você a aprender o que é a React Testing Library e como você pode usá-la para testar sua aplicação em React.

Este tutorial assumirá que você já conhece um pouco de JavaScript básico e que entende os fundamentos de como o React funciona.

A React Testing Library é uma ferramenta utilitária de teste, construída para testar a árvore real do DOM renderizada pelo React no navegador. O objetivo da biblioteca é ajudá-lo a escrever testes que se assemelhem ao modo como um usuário utilizaria a aplicação. Ela pode dar a você mais confiança de que sua aplicação funciona como esperado quando um usuário real a utiliza.

A biblioteca faz isso fornecendo métodos utilitários que consultarão o DOM da mesma maneira que um usuário faria. Por exemplo, se um usuário encontrasse um botão para 'Salvar' seu trabalho em texto, a biblioteca forneceria a você o método getByText(). Você vai aprender mais sobre os métodos da biblioteca para testar mais tarde.

Primeiramente, porém, vamos ver um exemplo da React Testing Library em ação.

Como usar a React Testing Library

Uma aplicação React criada com Create React App (ou CRA) já inclui tanto a React Testing Library quanto o Jest por padrão. Então, tudo o que você precisa fazer é escrever seu código de teste.

Se você quiser usar a React Testing Library fora de uma aplicação do CRA, precisa instalar tanto a React Testing Library quanto o Jest manualmente com o NPM:

npm install --save-dev @testing-library/react jest

Instalando a React Testing Library e o Jest

Você precisa instalar o Jest porque a React Testing Library apenas fornece métodos para ajudar você a escrever os scripts de teste. Desse modo, você ainda precisa de um framework de teste do JavaScript para executar o código de teste.

Você também pode usar outros frameworks de teste, como o Mocha ou o Jasmine, mas eu vou usar o Jest porque ele funciona bem com o React e com a React Testing Library.

Para este tutorial, eu vou criar uma aplicação em React com o CRA usando o modelo padrão:

npx create-react-app react-test-example

Criando uma aplicação em React com o CRA

Depois que a aplicação for criada, você deve ter um arquivo App.test.js já gerado dentro da pasta src/. O conteúdo do arquivo seria o seguinte:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render();
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Código de teste CRA padrão

O código de teste acima usou o método render da React Testing Library para renderizar virtualmente o componente App importado do arquivo App.js e anexá-lo ao nó document.body. Você pode acessar o HTML renderizado através do objeto screen.

Para ver o resultado da chamada de render(), você pode usar o método screen.debug():

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render();
  screen.debug();
});

Depurando os elementos renderizados pela React Testing Library

Abra seu terminal e execute o comando npm run test. Você verá toda a árvore document.body renderizada no seu console:


  
    
      
        
        
          Edite src/App.js e salve para recarregar.
        
        
          Aprenda React

Corpo do documento renderizado pela React Testing Library

O objeto screen também possui os métodos de teste do DOM já vinculados a ele. É por isso que o código de teste acima poderia usar screen.getByText() para consultar o elemento de âncora para ver o seu valor de textContent.

Finalmente, o código de teste confirmará se o elemento de link está disponível no objeto document ou não com o método expect do Jest:

expect(linkElement).toBeInTheDocument();

Confirmando se o elemento de link está no documento

Quando o elemento de link não for encontrado, o Jest marcará o teste como falhado (em inglês, fail).

Métodos da React Testing Library para encontrar elementos

A maioria dos seus casos de teste para o React deve usar métodos para encontrar elementos. A React Testing Library fornece vários métodos para encontrar um elemento por atributos específicos além do método getByText() acima:

getByText(): encontre o elemento pelo valor do atributo textContent
getByRole(): encontre o elemento pelo valor do atributo role
getByLabelText(): encontre o elemento pelo valor do atributo label
getByPlaceholderText(): encontre o elemento pelo valor do atributo placeholder
getByAltText(): encontre o elemento pelo valor do atributo alt
getByDisplayValue(): encontre o elemento pelo valor do atributo value, geralmente para elementos
getByTitle(): encontre o elemento pelo valor do atributo title

Quando esses métodos não forem suficientes, você pode usar o método getByTestId(), que permite encontrar um elemento pelo atributo data-testid:

import { render, screen } from '@testing-library/react';

render();
const element = screen.getByTestId('custom-element');

Obter elemento pelo valor de `data-testid`

Como selecionar elementos usando atributos data-testid não se assemelha à maneira como um usuário real usaria sua aplicação, a documentação recomenda que você o use apenas como último recurso quando todos os outros métodos falharem em encontrar seu elemento. Geralmente, encontrar por Text, Role ou Label deverá cobrir a maioria dos casos.

Como testar eventos gerados pelo usuário com a React Testing Library

Além de descobrir se os elementos estão presentes no corpo do seu documento, a React Testing Library também ajudará você a testar eventos gerados pelo usuário, como clicar em um botão e digitar valores em uma caixa de texto.

A biblioteca user-event é uma biblioteca complementar para simular a interação do usuário com o navegador. Suponha que você tenha um componente de botão para alternar entre os temas Claro (light) e Escuro (dark), da seguinte maneira:

import React, { useState } from "react";

function App() {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    const nextTheme = theme === "light" ? "dark" : "light";
    setTheme(nextTheme);
  };

  return ;
}

export default App;

Em seguida, você cria um teste que encontra o botão e simula um evento de clique usando o método userEvent.click(). Depois que o botão for clicado, você pode afirmar que o teste é um sucesso inspecionando se o texto do elemento do botão contém "dark" ou não:

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";

test("Test theme button toggle", () => {
  render();
  const buttonEl = screen.getByText(/Current theme/i);

  userEvent.click(buttonEl);
  expect(buttonEl).toHaveTextContent(/dark/i);
});

Testando o clique do usuário em um botão e afirmar o conteúdo

É assim que você pode simular eventos do usuário com a React Testing Library. A biblioteca user-event também possui vários outros métodos, como dblClick, para clicar duas vezes em um elemento, e type, para digitar em uma caixa de texto. Você pode verificar a documentação da biblioteca user-event (documentação em inglês) para mais informações.

Conclusão

Quanto mais seus testes se assemelharem ao modo como seu software é usado, mais confiança eles poderão dar a você.
(Fonte: Kent C.Dodds, autor da React Testing Library)

Um usuário real não verá os detalhes de implementação como qual estado (em inglês, state) ou props estão atualmente em seus componentes do React. Eles só veem os elementos HTML renderizados no navegador. A React Testing Library o incentiva a testar o comportamento de sua aplicação em vez de detalhes de implementação.

Ao testar sua aplicação da maneira como um usuário a utilizaria, você pode ter certeza de que sua aplicação se comportará como esperado quando todos os casos de teste forem aprovados. Para mais informações, você pode visitar a documentação da React Testing Library (documentação em inglês).

Se você gostou deste artigo e deseja melhorar em suas habilidades em JavaScript, recomendo que confira meu novo livro Beginning Modern JavaScript aqui (e-book em inglês).

O livro foi projetado para ser fácil de entender e acessível a qualquer pessoa que queira aprender JavaScript. Ele fornece um guia passo a passo que ajudará você a entender como usar o JavaScript para criar uma aplicação dinâmica.

Posso prometer que você realmente sentirá que entende o que está fazendo com JavaScript.

Até a próxima!

Percorra objetos aninhados no React.js

Daniel Rosa — Mon, 17 Jun 2024 21:00:00 +0000

Artigo original: Iterate Through Nested Object in React.js

Se você já trabalhou com APIs, sabe que a estrutura dos dados que elas retornam pode ficar complicada rapidamente.

Imagine chamar uma API a partir do seu projeto em React e a resposta ter uma aparência semelhante a esta:

Objeto1 {
     Objeto2 {
           propriedadeQueEuQueroAcessar:
           outraPropriedadeQueEuQueroAcessar:
      }
}

Você armazenou os dados no estado (em inglês, state) do seu componente como this.state.myPosts, podendo acessar os elementos de do objeto externo da seguinte maneira:

render() {
    console.log(this.state.myPosts);

    const data = this.state.myPosts;

    const display = Object.keys(data).map((d, key) => {
    return (
      
        
          {data.current_route}
        
      
      );
    });

    return(
      
        
          { display }
        
      
    );
  }

O problema, contudo, é o fato de que você não consegue acessar nada nos objetos internos.

Os valores dos objetos internos sempre mudarão. Assim, você não consegue simplesmente inserir os valores dessas chaves no código diretamente e percorrer essas chaves para obter os valores adequados.

Soluções possíveis

Pode ser difícil trabalhar diretamente com respostas complexas de APIs. Assim, vamos voltar um pouco e simplificar:

const visit = (obj, fn) => {
    const values = Object.values(obj)

    values.forEach(val => 
        val && typeof val === "object" ? visit(val, fn) : fn(val))
}

// Teste rápido
const print = (val) => console.log(val)

const person = {
    name: {
        first: "João",
        last: "Ninguém"
    },
    age: 15,
    secret: {
        secret2: {
            secret3: {
                val: "Comi um cookie"
            }
        }
    }
}

visit(person, print)
/* Resultado
João
Ninguém
15
Comi um cookie
*/

A biblioteca lodash tem métodos simples de se conseguir a mesma coisa, mas essa é uma maneira rápida e de se fazer o mesmo com JS puro.

Digamos, porém, que você quer simplificar ainda mais – algo assim:

render() {
    // Registraos dados
    console.log(this.state.myPosts);

    const data = this.state.myPosts;

    // Armazena o objeto aninhado que você quer acessar na variável posts
    const posts = data.content;

    // Registra com sucesso o objeto aninhado que eu quero acessar
    console.log(posts);

    // Erro, isto não me deixará passar a variável posts para Object.keys
    const display = Object.keys(posts).map(key =>
      
    )


    return(
      
        {display}
      
    );
 }

Você, porém, chega no erro TypeError: can't convert undefined to object error sempre que tenta passar posts para Object.keys.

Lembre-se de que esse erro nada tem a ver com o React. Não é uma operação legl passar um objeto como filho de um componente.

Object.keys() retorna apenas as chaves de objeto que são passadas como parâmetro. Você precisaria chamá-lo diversas vezes para percorrer todas as chaves aninhadas.

Se desejar exibir todo o objeto aninhado, uma opção é usar uma função que converta cada objeto em um componente do React e que o passe em um array:

let data= []

visit(obj, (val) => {
    data.push({val}
)  // envolve em um  qualquer tipo que não seja um objeto
})
...
return  {data}

Pacotes úteis

Outra opção é usar um pacote como o json-query para ajudar a percorrer os dados em JSON aninhados.

Aqui temos uma versão modificada da função render acima usando o json-query:

 render() {
   const utopian = Object.keys(this.state.utopianCash);
   console.log(this.state.utopianCash);

   var author = jsonQuery('[*][author]', { data: this.state.utopianCash }).value
   var title = jsonQuery('[*][title]', { data: this.state.utopianCash }).value
   var payout = jsonQuery('[*][total_payout_value]', { data: this.state.utopianCash }).value
   var postLink = jsonQuery('[*][url]', { data: this.state.utopianCash }).value
   var pendingPayout = jsonQuery('[*][pending_payout_value]', { data: this.state.utopianCash }).value
   var netVotes = jsonQuery('[*][net_votes]', { data: this.state.utopianCash }).value


   let display = utopian.map((post, i) => {
     return (
       
        
          Author: 
          {author[i]}
        
        
          Title: 
            {title[i]}
        
        
          Pending Payout: 
            {pendingPayout[i]}
        
        
          Votes: 
          {netVotes[i]}
        
       
     );
   });

    return (
      
        {display}
        
      
    );
  }
}

Como começar a testar suas aplicações em React usando a React Testing Library e o Jest

Ana Laura Reis — Tue, 04 Jun 2024 21:00:00 +0000

Artigo original: How to Start Testing Your React Apps Using the React Testing Library and Jest

Testes são frequentemente vistos como um processo tedioso. É código extra que você tem que escrever e, em alguns casos, para ser honesto, não é necessário. Todo desenvolvedor, no entanto, deve saber pelo menos o básico de testes. Isso aumenta a confiança nos produtos que eles constroem e, na maioria das empresas, é um requisito.

No mundo do React, há uma incrível biblioteca chamada react-testing-library, que auxilia no teste mais eficiente de suas aplicações em React. Você a utiliza com o Jest.

Neste artigo, veremos 8 etapas simples para começar a testar suas aplicações em React como um especialista.

Pré-requisitos

Neste tutorial, pressupõe-se que você tenha, pelo menos, um entendimento básico do React. Vou focar apenas na parte de testes.

Para acompanhá-lo, você precisa clonar o projeto, executando no seu terminal:

  git clone https://github.com/ibrahima92/prep-react-testing-library-guide

Depois, execute:

  yarn

Ou, se estiver usando o npm:

npm install

É isso! Agora, vamos mergulhar em alguns princípios básicos.

Básico

Alguns pontos-chave serão amplamente utilizados neste artigo. Compreender o papel deles pode auxiliar na compreensão

it ou test: descreve o próprio teste. Recebe como parâmetros o nome do teste e uma função que contém os testes.

expect: a condição que o teste precisa satisfazer. Ela vai comparar o parâmetro recebido com um 'matcher'.

matcher: a função aplicada à condição esperada.

render: o método usado para renderizar um determinado componente

import React from 'react'
import {render} from '@testing-library/react'
import App from './App'
 
 it('should take a snapshot', () => {
    const { asFragment } = render()
    
    expect(asFragment()).toMatchSnapshot()
   })
});

Como você pode ver, descrevemos o teste com isso. Em seguida, usamos o render para exibir o componente e esperamos que asFragment() corresponda a toMatchSnapshot() (o verificador fornecido pelo jest-dom).

A propósito, o método render retorna vários métodos que podemos usar para testar nossos recursos. Também usamos a desestruturação para obter o método.

Dito isso, vamos avançar e aprender mais sobre a React Testing Library na próxima seção.

O que é a React Testing Library?

A React Testing Library é um pacote muito leve e excelente criado por Kent C. Dodds. É uma substituição para o Enzyme e fornece funções utilitárias leves em cima do `react-dom` e `react-dom/test-utils`.

O React Testing Library é uma biblioteca de teste de DOM, o que significa que, em vez de lidar com instâncias de componentes do React renderizados, ele lida com elementos do DOM e com o modo como eles se comportam diante de usuários reais.

É uma ótima biblioteca, relativamente fácil de começar a usar, e promove boas práticas de teste. Observação: você também pode utilizá-la sem o Jest.

"Quanto mais seus testes se assemelharem à maneira como seu software é utilizado, maior confiança eles podem lhe proporcionar".

Agora, vamos começar a utilizá-los na próxima seção. Aliás, você não precisa instalar nenhum pacote, já que o create-react-app vem com a biblioteca e suas dependências.

**1. Como criar um snapshot de teste**

Um snapshot (em português, algo como uma fotografia ou instantâneo), como o nome sugere, nos permite salvar uma imagem do estado atual de um componente específico. Isso é especialmente útil quando você faz atualizações ou realiza alguma refatoração e deseja obter ou comparar as mudanças.

Agora, vamos tirar um snapshot do arquivo App.js .

App.test.js

import React from 'react'
import {render, cleanup} from '@testing-library/react'
import App from './App'

 afterEach(cleanup)
 
 it('should take a snapshot', () => {
    const { asFragment } = render()
    
    expect(asFragment()).toMatchSnapshot()
   })
});

Para tirar um snapshot, primeiro precisamos importar os métodos render e cleanup. Esses dois métodos serão amplamente utilizados ao longo deste artigo

render, como você pode imaginar, é usado para renderizar um componente do React. A função cleanup é passada como um parâmetro para o afterEach para limpar tudo após cada teste, a fim de evitar vazamentos de memória.

Agora, podemos renderizar o componente App com o método render e obter asFragment como o valor retornado. Por fim, nos certificamos de que o fragmento do componente corresponda ao snapshot.

Agora, para executar o teste, abra o termina, navegue até a raiz do projeto e execute o seguinte comando:

  yarn test

Ou, se estiver usando npm:

  npm test

Como resultado, ele criará uma outra pasta __snapshots__ e um arquivo App.test.js.snap na pasta src, que se parecerá com isto:

App.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Take a snapshot should take a snapshot 1`] = `

  
    Testing
  

`;

Se você fizer outra alteração em App.js, o teste falhará, pois o snapshot não corresponderá mais à condição. Para fazê-lo passar, basta pressionar 'u' para atualizá-lo. Você terá o snapshot atualizado no arquivo App.test.js.snap.

Agora, vamos prosseguir e começar a testar nossos elementos.

2. Testando elementos do DOM

Para testar nossos elementos do DOM, primeiro devemos examinar o arquivo TestElements.js

TestElements.js

import React from 'react'

const TestElements = () => {
 const [counter, setCounter] = React.useState(0)
  
 return (
  <>
    { counter }
    
    
 
    )
  }
  
export default TestElements

Aqui, a única coisa que você precisa manter é o data-testid. Ele será usado para selecionar esses elementos no arquivo de teste. Agora, vamos escrever nosso teste unitário.

Teste se o contador está igual a 0:

TestElements.test.js

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import TestElements from './TestElements'

afterEach(cleanup);

  it('should equal to 0', () => {
    const { getByTestId } = render(); 
    expect(getByTestId('counter')).toHaveTextContent(0)
   });

Como você pode notar, a sintaxe é bastante similar ao teste anterior. A única diferença é que usamos getByTestId para selecionar os elementos necessários (lembre-se de data-testid) e checamos se isso passava no teste. Em outras palavras, verificamos se o conteúdo do texto

`{ counter }`

é igual a zero.

Teste se os botões estão habilitados ou desabilitados:

TestElements.test.js (adicione o seguinte bloco de código no arquivo)

   it('should be enabled', () => {
    const { getByTestId } = render();
    expect(getByTestId('button-up')).not.toHaveAttribute('disabled')
  });

  it('should be disabled', () => {
    const { getByTestId } = render(); 
    expect(getByTestId('button-down')).toBeDisabled()
  });

Aqui, como de costume, usamos getByTestId para selecionar os elementos e verificar no primeiro teste se o botão possui o atributo 'disabled'. No segundo teste, verificamos se o botão está desabilitado ou não.

Se você salvar o arquivo ou rodar novamente no seu terminal o comando 'yarn test', os testes passarão.

Parabéns! Seu primeiro teste passou!

Agora, vamos aprender como testar um evento na próxima seção.

3. Testando eventos

Antes de escrever nossos testes unitários, vamos primeiro verificar como é o arquivo TestEvents.js

TestEvents.js

import React from 'react'

const TestEvents = () => {
  const [counter, setCounter] = React.useState(0)
  
return (
  <>
    { counter }
    
    
 
    )
  }
  
  export default TestEvents

Agora, vamos escrever os testes.

Teste se o contador incrementa e decrementa corretamente quando clicamos nos botões

TestEvents.test.js

import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import TestEvents from './TestEvents'

  afterEach(cleanup);
  
  it('increments counter', () => {
    const { getByTestId } = render(); 
    
    fireEvent.click(getByTestId('button-up'))

    expect(getByTestId('counter')).toHaveTextContent('1')
  });

  it('decrements counter', () => {
    const { getByTestId } = render(); 
    
    fireEvent.click(getByTestId('button-down'))

    expect(getByTestId('counter')).toHaveTextContent('-1')
  });

Como você pode ver, esses dois testes são muito semelhantes, exceto pelo conteúdo de texto esperado. O primeiro teste dispara um evento de clique com fireEvent.click() para verificar se o contador incrementa para 1 quando o botão é clicado.

O segundo teste verifica se o contador decrementa para -1 quando o botão é clicado.

fireEvent tem vários métodos que você pode usar para testar eventos. Fique à vontade para mergulhar na documentação e aprender mais.

Agora que sabemos como testar eventos, vamos avançar e aprender na próxima seção como lidar com ações assíncronas.

4. Testando ações assíncronas

Uma ação assíncrona é algo que pode levar tempo para ser concluído. Pode ser uma solicitação HTTP, um temporizador e assim por diante.

Agora, vamos verificar o arquivo TestAsync.js.

TestAsync.js

import React from 'react'

const TestAsync = () => {
  const [counter, setCounter] = React.useState(0)

  const delayCount = () => (
    setTimeout(() => {
      setCounter(counter + 1)
    }, 500)
  )
  
return (
  <>
    { counter }
    
    
 
    )
  }
  
  export default TestAsync

Aqui, usamos setTimeout() para atrasar o evento de incremento em 0,5 segundo.

Teste se o contador é incrementado após 0,5 segundo: TestAsync.test.js

import React from 'react';
import { render, cleanup, fireEvent, waitForElement } from '@testing-library/react';
import TestAsync from './TestAsync'

afterEach(cleanup);
  
  it('increments counter after 0.5s', async () => {
    const { getByTestId, getByText } = render(); 

    fireEvent.click(getByTestId('button-up'))

    const counter = await waitForElement(() => getByText('1')) 

    expect(counter).toHaveTextContent('1')
  });

Para testar o evento de incremento, primeiro precisamos usar async/await para lidar com a ação, porque, como mencionei anteriormente, ela leva tempo para ser concluída.

Em seguida, usamos um novo método auxiliar getByText(). Ele é semelhante ao getByTestId(), exceto pelo fato de que getByText() seleciona o conteúdo do texto em vez do id ou data-testid.

Agora, após clicar no botão, esperamos que o contador seja incrementado com waitForElement(() => getByText('1')). Uma vez que o contador foi incrementado para 1, podemos passar para a condição e verificar se o contador é efetivamente igual a 1. Dito isso, vamos agora passar para casos de teste mais complexos.

Você está pronto?

5. Testando o React Redux

Se você é novo no React Redux, este artigo (texto em inglês) pode ajudar você. Caso contrário, vamos verificar como o TestRedux.js se parece.

TestRedux.js

import React from 'react'
import { connect } from 'react-redux'

const TestRedux = ({counter, dispatch}) => {

 const increment = () => dispatch({ type: 'INCREMENT' })
 const decrement = () => dispatch({ type: 'DECREMENT' })
  
 return (
  <>
    { counter }
    
    
 
    )
  }
  
export default connect(state => ({ counter: state.count }))(TestRedux)

Agora, para o Redux:

store/reducer.js

export const initialState = {
    count: 0,
  }
  
  export function reducer(state = initialState, action) {
    switch (action.type) {
      case 'INCREMENT':
        return {
          count: state.count + 1,
        }
      case 'DECREMENT':
        return {
          count: state.count - 1,
        }
      default:
        return state
    }
  }

Como você pode ver, não há nada extravagante – é apenas um componente Counter básico manipulado pelo React Redux.

Agora, vamos escrever os testes unitários.

Teste se o estado inicial é igual a 0:

TestRedux.test.js

import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { render, cleanup, fireEvent } from '@testing-library/react';
import { initialState, reducer } from '../store/reducer'
import TestRedux from './TestRedux'

const renderWithRedux = (
  component,
  { initialState, store = createStore(reducer, initialState) } = {}
) => {
  return {
    ...render({component}),
    store,
  }
}

 afterEach(cleanup);

it('checks initial state is equal to 0', () => {
    const { getByTestId } = renderWithRedux()
    expect(getByTestId('counter')).toHaveTextContent('0')
  })

Existem algumas coisas que precisamos importar para testar o React Redux. Aqui, criamos nossa própria função auxiliar renderWithRedux() para renderizar o componente, já que ele será usado várias vezes.

renderWithRedux() recebe como parâmetros o componente a ser renderizado, o estado inicial e a loja.

Se não houver loja, ele criará uma. Se não receber um estado inicial ou uma loja, ele retornará um objeto vazio.

Em seguida, usamos render() para renderizar o componente e passamos a loja para o Provider. Dito isso, agora, podemos passar o componente TestRedux para renderWithRedux() para testar se o contador é igual a 0.

Teste se o contador incrementa e decrementa corretamente: TestRedux.test.js (adicione o seguinte bloco de código ao arquivo)

it('increments the counter through redux', () => {
  const { getByTestId } = renderWithRedux(, 
    {initialState: {count: 5}
})
  fireEvent.click(getByTestId('button-up'))
  expect(getByTestId('counter')).toHaveTextContent('6')
})

it('decrements the counter through redux', () => {
  const { getByTestId} = renderWithRedux(, {
    initialState: { count: 100 },
  })
  fireEvent.click(getByTestId('button-down'))
  expect(getByTestId('counter')).toHaveTextContent('99')
})

Para testar os eventos de incremento e decremento, passamos um estado inicial como segundo argumento para renderWithRedux().

Agora, podemos clicar nos botões e testar se o resultado esperado corresponde à condição ou não.

Vamos passar para a próxima seção e introduzir o React Context. React Router e Axios virão em seguida – você ainda está comigo?

6. Testando o React Context

Se você é novo no React Context, confira este artigo primeiro (texto em inglês). Caso contrário, vamos verificar o arquivo TextContext.js.

TextContext.js

import React from "react"

export const CounterContext = React.createContext()

const CounterProvider = () => {
  const [counter, setCounter] = React.useState(0)
  const increment = () => setCounter(counter + 1)
  const decrement = () => setCounter(counter - 1)

  return (
    
      
    
  )
}

export const Counter = () => {  
    const { counter, increment, decrement } = React.useContext(CounterContext)   
    return (
     <>
       { counter }
       
       
    
       )
}

export default CounterProvider

Agora, o estado do contador é gerenciado por meio do React Context. Vamos escrever o teste unitário para verificar se ele se comporta conforme esperado.

Teste se o estado inicial é igual a 0:

TextContext.test.js

import React from 'react'
import { render, cleanup,  fireEvent } from '@testing-library/react'
import CounterProvider, { CounterContext, Counter } from './TestContext'

const renderWithContext = (
  component) => {
  return {
    ...render(
        
            {component}
        )
  }
}

afterEach(cleanup);

it('checks if initial state is equal to 0', () => {
    const { getByTestId } = renderWithContext()
    expect(getByTestId('counter')).toHaveTextContent('0')
})

Assim como na seção anterior com o React Redux, aqui usamos a mesma abordagem, criando uma função auxiliar renderWithContext() para renderizar o componente.

Dessa vez, porém, ela recebe apenas o componente como parâmetro. Para criar um outro contexto, passamos CounterContext para o Provider. Agora, podemos testar se o contador é inicialmente igual a 0 ou não.

Teste se o contador incrementa e decrementa corretamente: TextContext.test.js (adicione o seguinte bloco de código ao arquivo)

  it('increments the counter', () => {
    const { getByTestId } = renderWithContext()

    fireEvent.click(getByTestId('button-up'))
    expect(getByTestId('counter')).toHaveTextContent('1')
  })

  it('decrements the counter', () => {
    const { getByTestId} = renderWithContext()

    fireEvent.click(getByTestId('button-down'))
    expect(getByTestId('counter')).toHaveTextContent('-1')
  })

Como você pode ver, aqui disparamos um evento de clique para testar se o contador incrementa corretamente para 1 e decrementa para -1.

Dito isso, podemos passar para a próxima seção e introduzir o React Router.

7. Testando o React Router

Se você quiser se aprofundar no React Router, este artigo pode ajudar você (texto em inglês). Caso contrário, vamos verificar o arquivo TestRouter.js.

TestRouter.js

import React from 'react'
import { Link, Route, Switch,  useParams } from 'react-router-dom'

const About = () => About page

const Home = () => Home page

const Contact = () => {
  const { name } = useParams()
  return {name}
}

const TestRouter = () => {
    const name = 'John Doe'
    return (
    <>
    
      Home
      About
      Contact
    
    
      
        
        
        
      
    
  )
}

export default TestRouter

Aqui, temos alguns componentes para renderizar ao navegar pela página inicial.

Agora, vamos escrever os testes:

TestRouter.test.js

import React from 'react'
import { Router } from 'react-router-dom'
import { render, fireEvent } from '@testing-library/react'
import { createMemoryHistory } from 'history'
import TestRouter from './TestRouter'


const renderWithRouter = (component) => {
    const history = createMemoryHistory()
    return { 
    ...render (
    
        {component}
    
    )
  }
}

it('should render the home page', () => {

  const { container, getByTestId } = renderWithRouter() 
  const navbar = getByTestId('navbar')
  const link = getByTestId('home-link')

  expect(container.innerHTML).toMatch('Home page')
  expect(navbar).toContainElement(link)
})

Para testar o React Router, primeiro, precisamos ter um histórico de navegação para começar.

Portanto, usamos createMemoryHistory() para, como o nome sugere, criar um histórico de navegação. Em seguida, usamos nossa função auxiliar renderWithRouter() para renderizar o componente e passamos o histórico para o componente Router. Com isso, podemos agora testar se a página carregada no início é a página inicial ou não e se a barra de navegação é carregada com os links esperados.

Teste se ele navega para outras páginas com os parâmetros quando clicamos nos links: TestRouter.test.js (adicione o seguinte bloco de código ao arquivo)

it('should navigate to the about page', ()=> {
  const { container, getByTestId } = renderWithRouter() 

  fireEvent.click(getByTestId('about-link'))

  expect(container.innerHTML).toMatch('About page')
})

it('should navigate to the contact page with the params', ()=> {
  const { container, getByTestId } = renderWithRouter() 
   
  fireEvent.click(getByTestId('contact-link'))
   
  expect(container.innerHTML).toMatch('John Doe')
})

Agora, para verificar se a navegação funciona, precisamos disparar um evento de clique nos links de navegação. Para o primeiro teste, verificamos se o conteúdo é igual ao texto na página Sobre (em inglês, about) e, para o segundo, testamos os parâmetros de roteamento e verificamos se foram passados corretamente.

Podemos passar para a seção final e aprender como testar uma solicitação com o Axios.

Estamos quase lá!

8. Testando requisições HTTP

Como de costume, vamos primeiro ver como é o arquivo TextAxios.js.

TextAxios.js

import React from 'react'
import axios from 'axios'

const TestAxios = ({ url }) => {
  const [data, setData] = React.useState()

  const fetchData = async () => {
    const response = await axios.get(url)
    setData(response.data.greeting)    
 }     
 
 return (
  <>
    
    { 
    data ?
    {data}:
    Loading...
    }
  
     )
}

export default TestAxios

Como você pode ver aqui, temos um componente simples que tem um botão para fazer uma solicitação.

Se os dados não estiverem disponíveis, ele exibirá uma mensagem de carregamento.

Agora, vamos escrever os testes. Teste se os dados são buscados e exibidos corretamente:

TextAxios.test.js

import React from 'react'
import { render, waitForElement, fireEvent } from '@testing-library/react'
import axiosMock from 'axios'
import TestAxios from './TestAxios'

jest.mock('axios')

it('should display a loading text', () => {

 const { getByTestId } = render()

  expect(getByTestId('loading')).toHaveTextContent('Loading...')
})

it('should load and display the data', async () => {
  const url = '/greeting'
  const { getByTestId } = render()

  axiosMock.get.mockResolvedValueOnce({
    data: { greeting: 'hello there' },
  })

  fireEvent.click(getByTestId('fetch-data'))

  const greetingData = await waitForElement(() => getByTestId('show-data'))

  expect(axiosMock.get).toHaveBeenCalledTimes(1)
  expect(axiosMock.get).toHaveBeenCalledWith(url)
  expect(greetingData).toHaveTextContent('hello there')
})

Esse caso de teste é um pouco diferente, pois lidamos com uma requisição HTTP e, para fazer isso, temos que simular uma solicitação do Axios com a ajuda de jest.mock('axios').

Agora, podemos usar axiosMock e aplicar um método get() a ele. Finalmente, usaremos a função mockResolvedValueOnce() do Jest para passar os dados simulados como parâmetro.

Com isso, para o segundo teste, podemos clicar no botão para buscar os dados e usar async/await para resolvê-los.

Temos que testar 3 coisas:

Se a requisição HTTP foi feita corretamente;
Se a requisição HTTP foi feita com o URL correto;
Se os dados buscados correspondem à expectativa.

Para o primeiro teste, apenas verificamos se a mensagem de carregamento é exibida quando não temos dados para mostrar. Dito isso, terminamos com os 8 passos simples para começar a testar suas aplicações em React.

Não tenha mais medo de testar.

Conclusão

A React Testing Library é um ótimo pacote para testar aplicações em React. Ela nos dá acesso aos matchers do jest-dom que podemos usar para testar nossos componentes de maneira mais eficiente e com boas práticas.

Espero que este artigo tenha sido útil e que ajude você a criar aplicações em React robustas no futuro.

Você pode encontrar o projeto finalizado aqui.

Obrigado pela leitura!

Você pode ler outros artigos como este no blog do autor.

Próximos passos (documentações em inglês)

Documentação da React Testing Library

Ficha informativa da React Testing Library

Ficha informativa dos matchers do Jest DOM

Documentação do Jest

Aprenda a criar uma aplicação de bate-papo em React em 10 minutos – um tutorial de React

Caroline Andrade — Tue, 28 May 2024 21:00:00 +0000

Artigo original: Learn to build a React chat app in 10 minutes - React JS tutorial

Clique aqui para acessar o curso completo (em inglês) no qual este artigo é baseado.

Neste artigo, mostrarei a maneira mais fácil possível de se criar uma aplicação de bate-papo usando o React.js. Isso será feito totalmente sem código do lado do servidor, pois deixaremos a API do Chatkit cuidar do back-end.

Presumo que você saiba o básico de JavaScript e que já tenha visto um pouco de React.js antes. Fora isso, não há pré-requisitos.

Observação: também criei um curso completo e gratuito sobre como criar uma aplicação de bate-papo React.js aqui.

Se seguir este tutorial, você terá sua própria aplicação de bate-papo no final, que poderá ser melhorada posteriormente, se desejar.

Vamos começar!

Etapa 1: divisão da interface do usuário (UI) em componentes

O React foi desenvolvido com base em componentes. Portanto, a primeira coisa que você deve fazer ao criar uma aplicação é dividir a interface do usuário em componentes.

Vamos começar desenhando um retângulo ao redor de toda a aplicação. Esse é o componente raiz e o ancestral comum de todos os outros componentes. Vamos chamá-lo de App:

Depois de definir o componente raiz, você precisa se fazer a seguinte pergunta:

Quais filhos diretos esse componente tem?

No nosso caso, faz sentido dar a ele três componentes filhos, que chamaremos de:

Title (Título)
MessagesList (Lista de mensagens)
SendMessageForm (Formulário de envio de mensagens)

Vamos desenhar um retângulo para cada um deles:

Isso nos dá uma boa visão geral dos diferentes componentes e da arquitetura por trás da nossa aplicação.

Poderíamos ter continuado e nos perguntado quais são os filhos desses componentes. Assim, poderíamos ter dividido a interface do usuário em ainda mais componentes, por exemplo, transformando cada uma das mensagens em seus próprios componentes. No entanto, vamos parar por aqui por uma questão de simplicidade.

Etapa 2: configuração da base de código

Agora, precisamos configurar nosso repositório. Usaremos a estrutura mais simples possível: um arquivo *index.html * com links para um arquivo JavaScript e uma stylesheet. Também estamos importando o Chatkit SDK e o Babel, que é usado para transformar nosso JSX:

Aqui está um playground do Scrimba com o código final do tutorial. Recomendo que você o abra em uma nova guia e brinque com ele sempre que se sentir confuso.

Como alternativa, você pode fazer o download do projeto do Scrimba como um arquivo .zip e executar um servidor simples para colocá-lo em funcionamento localmente.

Etapa 3: criação do componente raiz

Com o repositório instalado, podemos começar a escrever algum código em React, o que faremos dentro do arquivo *index.js *.

Vamos começar pelo componente principal, App. Esse será nosso único componente "inteligente", pois tratará dos dados e da conexão com a API. Esta é a configuração básica para ele (antes de adicionarmos qualquer lógica):

    class App extends React.Component {
      
      render() {
        return (
          
            
            <MessageList />
            <SendMessageForm />
         </div>
        )
      }
    }
</code></pre><p>Como você pode ver, ele simplesmente renderiza três filhos: os componentes <code><Title></code>,<code><MessageList></code>, e <code><SendMessageForm></code>.</p><p>No entanto, vamos torná-lo um pouco mais complexo, pois as mensagens de bate-papo precisarão ser armazenadas dentro do estado (em inglês, <em>state</em>) desse componente App. Isso nos permitirá acessar as mensagens por meio de <code>this.state.messages</code> e, assim, passá-las para outros componentes.</p><p>Começaremos com o uso de dados fictícios para que possamos entender o fluxo de dados da aplicação. Em seguida, trocaremos esses dados por dados reais da API do Chatkit.</p><p>Vamos criar uma variável <code>DUMMY_DATA</code>:</p><pre><code class="language-jsx">    const DUMMY_DATA = [
      {
        senderId: "perborgen",
        text: "who'll win?"
      },
      {
        senderId: "janedoe",
        text: "who'll win?"
      }
    ]
</code></pre><p>Em seguida, adicionaremos esses dados ao estado da aplicação e os passaremos para o componente MessageList como uma propriedade.</p><pre><code class="language-jsx">    class App extends React.Component {
      
      constructor() {
        super()
        this.state = {
           messages: DUMMY_DATA
        }
      }
      
      render() {
        return (
          <div className="app">
            <MessageList messages={this.state.messages}/>
            <SendMessageForm />
         </div>
        )
      }
    }
</code></pre><p>Aqui, estamos inicializando o estado no <code>constructor</code> e também estamos passando <code>this.state.messages</code> para <code>MessageList</code>.</p><p>Observe que estamos chamando <code>super()</code> no construtor. Você deve fazer isso se quiser criar um componente com estado (em inglês, <em>stateful</em>).</p><h3 id="etapa-4-renderiza-o-de-mensagens-fict-cias"><strong>Etapa 4: renderização de mensagens fictícias</strong></h3><p>Vamos ver como podemos renderizar essas mensagens no componente MessageList. Veja como fica:</p><pre><code class="language-jsx">    class MessageList extends React.Component {
      render() {
        return (
          <ul className="message-list">                 
            {this.props.messages.map(message => {
              return (
               <li key={message.id}>
                 <div>
                   {message.senderId}
                 </div>
                 <div>
                   {message.text}
                 </div>
               </li>
             )
           })}
         </ul>
        )
      }
    }
</code></pre><p>Esse é o chamado componente estúpido. Ele usa uma propriedade, <code>messages</code>, que contém um <em>array</em> de objetos. Então, estamos simplesmente renderizando as propriedades <code>text</code> e <code>senderId</code> dos objetos.</p><p>Com nossos dados fictícios fluindo para esse componente, ele renderizará o seguinte:</p><figure class="kg-card kg-image-card"></figure><p>Portanto, agora temos a estrutura básica da nossa aplicação e também podemos renderizar mensagens. Excelente trabalho!</p><p><strong>Agora, vamos substituir nossos dados fictícios por mensagens reais de uma sala de bate-papo!</strong></p><h3 id="etapa-5-obten-o-de-chaves-de-api-do-chatkit"><strong>Etapa 5: obtenção de chaves de API do Chatkit</strong></h3><p>Para buscar mensagens, precisaremos nos conectar à API do Chatkit. Para isso, precisamos obter as chaves da API.</p><p>Neste ponto, quero incentivá-lo a seguir minhas etapas para que você possa colocar sua própria aplicação de bate-papo em funcionamento. Você pode usar meu <a href="https://scrimba.com/c/crVznf6?utm_source=freecodecamp.org&utm_medium=referral&utm_campaign=greactchatkit_10_minute_article">playground do Scrimba</a> para testar suas próprias chaves de API.</p><p>Comece criando uma conta gratuita <a href="https://dashboard.pusher.com/accounts/sign_up?utm_medium=Website&utm_source=Homepage_Signup_CTA&utm_campaign=Homepage_CTA">aqui</a>. Depois de fazer isso, você verá seu painel de controle. É aqui que você cria instâncias do Chatkit. Crie uma e dê a ela o nome que você quiser:</p><figure class="kg-card kg-image-card"></figure><p>Em seguida, você será direcionado para a instância recém-criada. Aqui, você precisará copiar quatro valores:</p><ul><li>O localizador de instâncias (<em>instance locator</em>)</li><li>O provedor do token de teste (<em>test token provider</em>)</li><li>O ID da sala (<em>room ID</em>)</li><li>O nome de usuário</li></ul><p>Começaremos com o <strong>localizador de instâncias</strong>:</p><figure class="kg-card kg-image-card"></figure><p><em>Você pode copiar usando o ícone no lado direito do localizador de instâncias.</em></p><p>Se você rolar a tela um pouco para baixo, encontrará o <strong>provedor do token de teste</strong>:</p><figure class="kg-card kg-image-card"></figure><p>O próximo passo é criar um <strong><strong>Us</strong>uário </strong>e uma <strong>Sala</strong>, o que é feito na mesma página. Observe que, <em>primeiro</em>, será necessário criar um usuário e, em seguida, você poderá criar uma sala, o que dará a você acesso ao identificador da sala.</p><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>No segundo círculo vermelho, você vê o identificador da sala</figcaption></figure><p>Agora, você encontrou os seus quatro identificadores. Muito bem!</p><p>No entanto, antes de voltarmos à base de código, quero que você também envie manualmente uma mensagem do painel do Chatkit, pois isso nos ajudará no próximo capítulo.</p><p>Veja como fazer isso:</p><figure class="kg-card kg-image-card"></figure><p>Isso é para que tenhamos de fato uma mensagem para renderizar na próxima etapa.</p><h3 id="etapa-6-renderiza-o-de-mensagens-reais-de-bate-papo"><strong>Etapa 6: renderização de mensagens reais de bate-papo</strong></h3><p>Agora, vamos voltar ao nosso arquivo <em>index.js</em> e armazenar esses quatro identificadores como variáveis na parte superior do nosso arquivo.</p><p>Aqui estão as minhas, mas eu o encorajo a criar as suas próprias:</p><pre><code class="language-jsx">    const instanceLocator = "v1:us1:dfaf1e22-2d33-45c9-b4f8-31f634621d24"

    const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token"

    const username = "perborgen"

    const roomId = 9796712
</code></pre><p>Com isso pronto, finalmente estamos prontos para nos conectar ao Chatkit. Isso ocorrerá no componente <code>App</code> e, mais especificamente, no método <code>componentDidMount</code>. Esse é o método que você deve usar ao conectar componentes React.js a APIs.</p><p>Primeiro, criaremos um <code>chatManager</code>:</p><pre><code class="language-jsx">    componentDidMount() {
      const chatManager = new Chatkit.ChatManager({
        instanceLocator: instanceLocator,
        userId: userId,
        tokenProvider: new Chatkit.TokenProvider({
          url: testToken
        })
     })  
</code></pre><p>Em seguida, usaremos <code>chatManager.connect()</code> para nos conectarmos à API:</p><pre><code class="language-jsx">      chatManager.connect().then(currentUser => {
          currentUser.subscribeToRoom({
          roomId: roomId,
          hooks: {
            onNewMessage: message => {
              this.setState({
                messages: [...this.state.messages, message]
              })
            }
          }
        })
      })
    }
</code></pre><p>Isso nos dá acesso ao objeto <code>currentUser</code>, que é a interface para interagir com a API.</p><p>Observação: como precisaremos usar o <code>currentUser</code> mais tarde, vamos armazená-lo na instância, com <code>this.currentUser = ``currentUser</code>.</p><p>Em seguida, chamamos <code>currentUser.subscribeToRoom()</code> e passamos a ele nosso <code>roomId</code> e um <em>hook</em> <code>onNewMessage</code>.</p><p>O <em>hook</em> <code>onNewMessage</code> é acionado toda vez que uma nova mensagem é transmitida para a sala de bate-papo. Portanto, toda vez que isso acontecer, simplesmente adicionaremos a nova mensagem no final de <code>this.state.messages</code>.</p><p>Isso faz com que a aplicação busque dados da API e depois os renderize na página.</p><figure class="kg-card kg-image-card"></figure><p>Isso é fantástico, pois agora temos o esqueleto da nossa conexão <em>client</em>-servidor.</p><p>Uau!</p><h3 id="etapa-7-manipula-o-de-entrada-do-usu-rio"><strong>Etapa 7: manipulação de entrada do usuário</strong></h3><p>A próxima coisa que precisaremos criar é o componente <code>SendMessageForm</code>. Esse será o chamado <em>componente controlado</em>, o que significa que o componente controla o que está sendo renderizado no campo de entrada por meio de seu estado.</p><p>Dê uma olhada no método <code>render()</code>:</p><pre><code class="language-jsx">    class SendMessageForm extends React.Component {
      render() {
        return (
          <form
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
          </form>
        )
      }
    }
</code></pre><p>Estamos fazendo duas coisas:</p><ol><li>Ouvir as entradas do usuário com o ouvinte de eventos <code>onChange</code>, de modo que possamos acionar o método <code>handleChange</code> </li><li>Definir o <code>value</code> do campo de entrada explicitamente usando <code>this.state.message</code></li></ol><p>A conexão entre essas duas etapas é encontrada dentro do método <code>handleChange</code>. Ele simplesmente atualiza o estado para o que quer que o usuário digite no campo de entrada:</p><pre><code class="language-jsx">    handleChange(e) {
      this.setState({
        message: e.target.value
      })
    }
</code></pre><p>Isso aciona uma nova renderização e, como o campo de entrada é definido explicitamente a partir do estado usando <code>value={this.state.message}</code>,  o campo de entrada será atualizado.</p><p>Portanto, mesmo que a aplicação pareça instantânea para o usuário quando ele digita algo no campo de entrada, <strong>os dados realmente passam pelo estado antes que o React atualize a interface do usuário.</strong></p><p>Para encerrar esse recurso, precisamos dar ao componente um <code>constructor</code>. Nele, inicializaremos o estado e vincularemos <code>this</code> no método <code>handleChange</code>:</p><pre><code class="language-jsx">    constructor() {
        super()
        this.state = {
           message: ''
        }
        this.handleChange = this.handleChange.bind(this)
    }
</code></pre><p>Precisamos vincular o método <code>handleChange</code> para que tenhamos acesso à palavra-chave <code>this</code> dentro dele. É assim que o JavaScript funciona: a palavra-chave <code>this</code> é, por padrão, <em>indefinida</em> dentro do corpo de uma função.</p><h3 id="etapa-8-envio-de-mensagens"><strong>Etapa 8: envio de mensagens</strong></h3><p>Nosso componente <code>SendMessageForm</code> está quase pronto, mas também precisamos cuidar do envio do formulário. Precisamos buscar as mensagens e enviá-las!</p><p>Para fazer isso, conectaremos um manipulador uniforme <code>handleSubmit</code> ao ouvinte de eventos <code>onSubmit</code> no <code><form></code>.</p><pre><code class="language-jsx">    render() {
        return (
          <form
            onSubmit={this.handleSubmit}
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
        </form>
        )
      }
</code></pre><p>Como temos o valor do campo de entrada armazenado em <code>this.state.message</code>, é muito fácil passar os dados corretos junto com o envio. Basta fazer isso:</p><pre><code class="language-jsx">    handleSubmit(e) {
      e.preventDefault()
      this.props.sendMessage(this.state.message)
      this.setState({
        message: ''
      })
    }
</code></pre><p>Aqui, estamos chamando a propriedade <code>sendMessage</code> e passando <code>this.state.message</code> como parâmetro. Talvez você esteja um pouco confuso com isso, pois ainda não criamos o método <code>sendMessage</code>. No entanto, faremos isso na próxima seção, pois esse método está dentro do componente <code>App</code>. Portanto, não se preocupe!</p><p>Em segundo lugar, estamos limpando o campo de entrada definindo <code>this.state.message</code> como uma <em>string </em>vazia.</p><p>Aqui está o componente <code>SendMessageForm</code> completo. Observe que também vinculamos o <code>this</code> ao método <code>handleSubmit</code>:</p><pre><code class="language-jsx">    class SendMessageForm extends React.Component {
      constructor() {
        super()
        this.state = {
          message: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
      }

      handleChange(e) {
        this.setState({
          message: e.target.value
        })
      }

      handleSubmit(e) {
        e.preventDefault()
        this.props.sendMessage(this.state.message)
        this.setState({
          message: ''
        })
      }

      render() {
        return (
          <form
            onSubmit={this.handleSubmit}
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
          </form>
        )
      }
    }
</code></pre><h3 id="etapa-9-envio-de-mensagens-para-o-chatkit"><strong>Etapa 9: envio de mensagens para o Chatkit</strong></h3><p>Agora, estamos prontos para enviar as mensagens para o Chatkit. Isso é feito no componente <code>App</code>, onde criaremos um método chamado <code>this.sendMessage</code>:</p><pre><code class="language-jsx">    sendMessage(text) {
      this.currentUser.sendMessage({
        text: text,
        roomId: roomId
      })
    }
</code></pre><p>Ele recebe um parâmetro (o texto) e simplesmente chama <code>this.currentUser.sendMessage()</code>.</p><p>A etapa final é passar isso para o componente <code><SendMessageForm></code> como uma propriedade:</p><pre><code class="language-jsx">    /* App component */
      
    render() {
      return (
        <div className="app">
          <Title />
          <MessageList messages={this.state.messages} />
          <SendMessageForm sendMessage={this.sendMessage} />
      )
    }
</code></pre><p>Com isso, passamos o manipulador para que <code>SendMessageForm</code> possa invocá-lo quando o formulário for enviado.</p><h3 id="etapa-10-criando-o-componente-title"><strong>Etapa 10: criando o componente Title</strong></h3><p>Para finalizar, vamos criar também o componente Title. Ele é apenas um componente funcional simples, ou seja, uma função que retorna uma expressão JSX.</p><pre><code class="language-jsx">    function Title() {
      return <p class="title">My awesome chat app</p>
    }
</code></pre><p>É uma boa prática usar componentes funcionais, pois eles têm mais restrições do que os componentes de classe, o que os torna menos propensos a <em>bugs</em>.</p><h3 id="o-resultado">O resultado</h3><p>Com isso, você tem sua própria aplicação de bate-papo, que pode ser usada para conversar com seus amigos!</p><figure class="kg-card kg-image-card"></figure><p>Dê a si mesmo um tapinha nas costas se tiver programado toda a aplicação até o fim.</p><p>Se você quiser saber como desenvolver esse exemplo, <a href="https://scrimba.com/g/greactchatkit?utm_source=freecodecamp.org&utm_medium=referral&utm_campaign=greactchatkit_10_minute_article">então confira meu curso gratuito sobre como criar uma aplicação de bate-papo</a> com o React aqui.</p><p>Obrigado pela leitura e boa programação! 😀</p> 
</article>
<article>
<h1> React – mudar o CSS em linha condicionalmente com base no estado do componente </h1>
<p>Daniel Rosa — Mon, 06 May 2024 23:09:45 +0000</p>
 <p data-test-label="translation-intro">
        <strong>Artigo original:</strong> <a href="https://www.freecodecamp.org/news/react-change-inline-css-conditionally-based-on-component-state/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">React - Change Inline CSS Conditionally Based on Component State</a>
      </p><p>Se você estiver com problemas com o desafio <a href="https://www.freecodecamp.org/portuguese/learn/front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state">Mudar CSS em linha condicionalmente com base no estado do componente</a> do freeCodeCamp, provavelmente, não está sozinho.</p><p>Nesse desafio, você precisa adicionar código para alterar de modo condicional o CSS em linha com base no estado, ou <em>state</em>, de um componente do React.</p><p>Ao chegar ao desafio, este é o código que você verá:</p><pre><code class="language-jsx">class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Altere o código abaixo desta linha

    // Altere o código acima desta linha
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};
</code></pre><p>Perceba que um objeto de estilo em linha, chamado <code>inputStyle</code>, já foi declarado com estilização padrão.</p><p>Seu objetivo nesse desafio é atualizar <code>inputStyle</code> de maneira que a borda do elemento <code>input</code> seja <code>3px solid red</code> quando houver mais de 15 caracteres na entrada. Observe que o texto na caixa de entrada é salvo no <em>state</em> do componente como <code>input</code>:</p><pre><code class="language-jsx">...
this.state = {
  input: ''
};
...</code></pre><h2 id="quase-l-mas-ainda-n-o-est-certo"><strong>Quase lá, mas ainda não está certo</strong></h2><p>Imagine que, após ler a descrição e as instruções, você tenha essa ideia:</p><pre><code class="language-jsx">class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Altere o código abaixo desta linha
    const char = 15;
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // Altere o código acima desta linha
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};</code></pre><p>Ao tentar enviar, porém, o código não passa em todos os testes. Vamos examinar mais de perto o que está havendo.</p><h2 id="solu-es"><strong>Soluções</strong></h2><h3 id="usando-uma-instru-o-if"><strong>Usando uma instrução <code>if</code></strong></h3><p>Declarar <code>char</code> é uma boa ideia, mas examine a condição no bloco <code>if</code>:</p><pre><code class="language-jsx">if(this.state.input > char) {
  inputStyle = {
    border:'3px solid red'
  }
}  </code></pre><p>Lembre-se de que <code>this.state.input</code> é o valor da caixa de entrada e que é uma <em>string</em>. Por exemplo, ela pode ser "testando testando 1, 2, 3".</p><p>Se você inserir "testando testando 1, 2, 3" na caixa de texto e se registrar <code>this.state.input</code> no console (usando <code>console.log</code>):</p><pre><code class="language-jsx">class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Altere o código abaixo desta linha
    const char = 15;
    console.log(this.state.input);
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // Altere o código acima desta linha
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};</code></pre><p>Você verá <code>testando testando 1, 2, 3</code> no console.</p><p>Além disso, se você registrar <code>this.state.input > char</code> no console, verá que seu valor é <code>false</code>:</p><pre><code class="language-jsx">class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Altere o código abaixo desta linha
    const char = 15;
    console.log(this.state.input > char);
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // Altere o código acima desta linha
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};</code></pre><p>Dito de maneira simplificada, não é possível comparar uma <em>string</em> (<code>this.state.input</code>) diretamente com <code>char</code>, que é um número.</p><p>Em vez disso, chame <code>.length</code> em <code>this.state.input</code> para obter o tamanho da <em>string</em> e compare-o a <code>count</code>:</p><pre><code class="language-jsx">class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Altere o código abaixo desta linha
    const char = 15;
    if(this.state.input.length > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // Altere o código acima desta linha
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};</code></pre><p>Como o tamanho da <em>string</em> "testando testando 1, 2, 3" é de 23 caracteres (incluindo espaços e vírgulas), a borda da caixa de entrada deverá ser vermelha:</p><h3 id="usando-um-operador-tern-rio"><strong>Usando um operador ternário</strong></h3><p>Um <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">operador ternário ou condicional</a> é como uma instrução <code>if...else</code> de apenas uma linha, o que pode ajudar você a reduzir significativamente o tamanho do seu código.</p><p>Volte agora à sua solução e remova tudo, exceto a variável <code>char</code>:</p><pre><code class="language-jsx">class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Altere o código abaixo desta linha

    // Altere o código acima desta linha
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};
</code></pre><p>Agora, pegue a condição que você usou na sua instrução <code>if</code> de antes e use-a na primeira parte do operador ternário: <code>this.state.input.length > char ?  :  ;</code></p><p>Tudo o que estiver entre <code>?</code> e <code>:</code> indica o que ocorrerá se a instrução retornar <code>true</code>. Você pode simplesmente copiar o código que estava dentro da instrução <code>if</code> de antes: <code>this.state.input.length > char ? inputStyle = { border:'3px solid red' } :  ;</code></p><p>Depois disso, você precisa lidar com a parte do <code>else</code> do operador ternário, que é tudo o que se encontra entre <code>:</code> e <code>;</code>.</p><p>Embora você não tenha usado uma instrução <code>else</code> na sua primeira solução, você conseguiu usar <code>inputStyle</code> como estava de modo eficaz. Assim, basta usar <code>inputStyle</code> do modo como foi declarado anteriormente no código: <code>this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;</code></p><p>Sua solução completa deverá ter esta aparência:</p><pre><code class="language-jsx">class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Altere o código abaixo desta linha
    const char = 15;
    this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
    // Altere o código acima desta linha
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};
</code></pre><p>Está resolvido – agora, você deve ser capaz de passar no desafio! Agora, você já sabe como estilizar de modo condicional os componentes do React da maneira que quiser.</p> 
</article>
<article>
<h1> Como implementar uma aplicação do React em produção usando Docker, NGINX e APIs </h1>
<p>Diego Crescêncio — Sun, 21 Apr 2024 21:00:00 +0000</p>
 <p data-test-label="translation-intro">
        <strong>Artigo original:</strong> <a href="https://www.freecodecamp.org/news/how-to-deploy-react-apps-to-production/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to Deploy a React App to Production Using Docker and NGINX with API Proxies</a>
      </p><p>Neste artigo, você vai aprender como implementar (eminglês, <em>deploy</em>) uma aplicação desenvolvida com React em produção. Vamos utilizar o Docker e o NGINX para assegurar nossas chaves de acesso da API e requisições de proxy, a fim de prevenir ataques de <a href="https://pt.wikipedia.org/wiki/Cross-origin_resource_sharing">Cross-Origin Resource Sharing</a> (CORS).</p><p>No final do artigo, você pode conferir o código e um vídeo relacionado.</p><h3 id="o-que-voc-vai-aprender-neste-artigo">O que você vai aprender neste artigo</h3><p>Em todo ciclo de vida do projeto de software, chega a hora de publicá-lo. Porém, nem sempre é óbvio como fazê-lo. O ambiente de produção é diferente do ambiente de desenvolvimento. A maioria das aplicações consome algum tipo de API – por vezes, hospedada em diferentes servidores.</p><p>Como desenvolvedores, precisamos resolver potenciais riscos de CORS. Às vezes, acabamos construindo um <em>back-end</em> desnecessariamente. Eu acredito que desenvolvedores devem manter suas aplicações simples, cortando todas as partes redundantes.</p><p>Neste artigo, vou mostrar como eu preparo minhas aplicações desenvolvidas em React para implantar em produção. </p><p>Eu poderia demonstrar uma aplicação simples, mas isso seria pouco útil. Portanto, decidi criar uma aplicação que consome dados de uma API real, a fornecida pela <a href="https://fred.stlouisfed.org/docs/api/fred/">Divisão de Pesquisa Econômica do Federal Reserve Bank of Saint Louis</a>. A API requer uma chave de acesso para obter dados, e os <em>endpoints</em> estão protegidos contra vulnerabilidades de CORS.</p><p><strong>Observação</strong>: se sua aplicação é baseada em rederização no servidor (SSR, em inglês, <em>server-side rendering</em>), <strong>esta não é a melhor estratégia de implantação</strong>. Você, provavelmente, precisará de algum tipo de <em>back-end</em>.</p><h2 id="pr-requisitos">Pré-requisitos</h2><p>É importante que você tenha conhecimento básico de como construir aplicações em React e conheça os fundamentos de Docker antes de seguir as instruções deste artigo. Caso você precise revisar esses conteúdos, acesse esses conteúdos do FreeCodeCamp (ambos em inglês):</p><ul><li><a href="https://www.freecodecamp.org/news/a-beginner-friendly-introduction-to-containers-vms-and-docker-79a9e3e119b/">A Beginner-Friendly Introduction to Containers, VMs and Docker</a>, de <a href="https://twitter.com/iam_preethi">@iam_preethi</a></li><li><a href="https://www.freecodecamp.org/news/create-react-app-crash-course/">Create React App Crash Course</a></li></ul><h2 id="construindo-a-aplica-o-em-react">Construindo a aplicação em React</h2><p>Eu criei uma aplicação simples usando o comando <a href="https://legacy.reactjs.org/docs/create-a-new-react-app.html#create-react-app">create-react-app</a>. A única funcionalidade da aplicação será exibir um gráfico que representa o produto interno bruto (PIB) dos Estados Unidos da América.</p><p><strong>Observação:</strong>  a documentação legada do React recomenda o uso do <em>create-react-app</em> para aplicações de página única (SPA– do inglês, <em>single page applications</em>) ou para quem esta aprendendo React.</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>A aplicação obtém dados somente desta API:</p><pre><code>https://api.stlouisfed.org/fred/series/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456</code></pre><p>Os parametros são:</p><ul><li><code>series_id</code> – o identificador das séries. <code>GDPCA</code> se refere à "GDP real".</li><li><code>frequency</code> – a agregação do dado. O <code>a</code> se refere à "anual".</li><li><code>observation_start</code> – o início do período observado.</li><li><code>observation_end</code> – o fim do período observado.</li><li><code>file_type</code> – o formato do dado. O padrão é <code>xml</code>.</li><li><code>api_key</code> – A chave da API é requerida para obter dados. Você pode solicitar uma chave de acesso aqui: <a href="https://fred.stlouisfed.org/docs/api/api_key.html">veja uma aqui</a>.</li></ul><p>Para mais detalhes, consulte a <a href="https://fred.stlouisfed.org/docs/api/fred/series_observations.html">documentação</a>.</p><p>Como nem tudo é perfeito, o projeto da API também não é. Nessa API, é necessário que o desenvolvedor envie a chave de acesso e o retorno vem como parâmetros de URL.</p><p>Enviar o código como parâmetro não é um problema para nós. Entretanto, o vazamento da chave da API pode ser um problema! Imagine que alguém pode interceptar a busar da API, realizando procedimentos abusivos. Ninguém quer correr esse risco, certo?</p><p>Vamos assumir que a chave da API não é um problema. Ainda assim, é possível abusar da API. A API FRED tem proteção contra requisições interdomínio (do inglês, <em>cross-domain request</em>). Portanto, você obtém os seguintes erros se tentar acessá-la de um domínio externo:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Muitos desenvolvedores podem sugerir o emprego de uma aplicação intermediária (<em>middleware</em>) para requisitar a API e filtrar conteúdo sensível via proxy. Podem dizer que precisam ampliar as funcionalidades futuras e, de certa maneira, essa é uma boa abordagem.</p><p>Entretanto, eu prefiro construir minhas aplicações seguindo um dos princípios da vertente da <a href="https://pt.wikipedia.org/wiki/Programação_extrema">Programação Extrema</a> (do inglês, <em>Extreme Programming</em>). Um dos tantos princípios se trata de "você não vai precisar disso", que prega evitar a adição de muitas funcionalidades, principalmente as que "você talvez nunca use" (<a href="https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it">YAGNI way</a>). Portanto, vou evitar construir um <em>back-end</em> até ser necessário, ou no nosso caso, "nunca ser necessário".</p><h2 id="vamos-usar-o-nginx-">Vamos usar o NGINX!</h2><p>Eu sou fã do <a href="https://www.nginx.com">NGINX</a> porque ele traz a simplicidade de uso. O NGINX permite que você prepare um servidor web de nível de produção, com funcionalidade HTTP2, compressão, TLS etc.</p><p>Podemos chegar a configurações robustas com poucas linhas de código. Veja o exemplo abaixo:</p><pre><code class="language-none">...

http {
    ...

    server {
        ...

        location /api {
            set         $args   $args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456;
            proxy_pass  https://api.stlouisfed.org/fred/series;
        }
    }
}</code></pre><p>Essas quatro linhas de código são todo o necessário para ocultar nossa chave API e suprimir errros de CORS. Agora, todo o tráfego HTTP para <code>/api</code> será enviado para a FRED API e apenas a nossa aplicação esta habilitada a consumir estes dados. Todas as outras requisições externas vão obter erro de CORS.</p><blockquote>Para se livrar dos excessos, eu troquei todo o conteúdo do arquivo por <code>...</code>. Você pode encontrar a versão completa no meu <strong>GitHub </strong><em>ou no</em><strong> vídeo </strong>(links abaixo).</blockquote><p>Agora, nosso ponto de acesso (<em>endpoint</em>) é: </p><pre><code>/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01</code></pre><p>Agora não é necessário passar os parâmetros <code>api_key</code> nem <code>file_type</code> para obter dados. Além disso, ninguém pode acessar a chave de acesso a partir do URL, o que torna o processo seguro.</p><figure class="kg-card kg-image-card kg-width-wide"></figure><h2 id="o-docker-prefere-o-nginx-">O Docker prefere o NGINX!</h2><p>A maneira mais conveniente de executar o NGINX na nuvem é usando o Docker. Para essa parte, assumo que você saiba o que é o Docker (mas se não souber, leia o artigo vinculado nos pré-requisitos). <br>Antes, precisamos criar um Dockerfile com o seguinte conteúdo:</p><pre><code class="language-dockerfile">FROM nginx

COPY container /
COPY build /usr/share/nginx/html</code></pre><p>Agora só restam esses três passos:</p><ol><li>Construir a aplicação em React. Esse processo gera o diretório <code>build/</code>, contendo os arquivos estáticos.</li><li>Construir a imagem do Docker. Isso criará uma imagem do Docker executável.</li><li>Publicar a imagem do Docker em algum repositório ou executá-la localmente. </li></ol><p>Por enquanto, vamos tentar executá-la em nossa máquina.</p><pre><code>$ yarn install
$ yarn build
$ docker build -t msokola/fred-app:latest .
$ docker run -p 8081:80 -it msokola/fred-app:latest</code></pre><p>A porta 8081 é uma porta local e em sua máquina. Isso significa que a aplicação estará disponível no seguinte URL: <a href="http://localhost:8081/">http://localhost:8081</a>. </p><p>Após abrir esse URL no navegador, você deve ver registros como estes em seu terminal:</p><pre><code>0.0.0.1 - - [11/Mar/2021:18:57:50 +0000] "GET / HTTP/1.1" 200 1556 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "-"
...
0.0.0.1 - - [11/Mar/2021:18:57:51 +0000] "GET /api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01 HTTP/1.1" 200 404 "http://localhost:8081/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "-"</code></pre><p>Observe os códigos 200, pois eles representam o status HTTP OK. Se você vir um 400 ao lado da solicitação da API, significa que algo está errado com sua chave de API. O código 304 também é válido (isso significa que os dados foram armazenados em cache).</p><h2 id="como-fazer-o-deploy-do-cont-iner-na-aws">Como fazer o <em>deploy </em>do contêiner na AWS</h2><p>O contêiner está funcionando, então podemos implementá-lo. Nessa parte do artigo, vou mostrar como executar sua aplicação na Amazon Web Services (AWS). A AWS é uma das plataformas de nuvem mais populares. Se você deseja usar o Microsoft Azure ou qualquer outra plataforma, os passos serão semelhantes, mas a sintaxe dos comandos será diferente. </p><p><strong>Observação</strong>: gravei um vídeo no YouTube para que você possa me ver passando por todo o processo de implantação. Se você ficar preso ou encontrar problemas, pode verificar se obtemos os mesmos resultados a cada etapa. Se quiser assistir ao vídeo, <a href="https://youtu.be/bUSXeQ4H20g">clique aqui</a> (vídeo em inglês).</p><h3 id="1-instale-as-ferramentas-de-cli-da-aws">1. Instale as ferramentas de CLI da AWS</h3><p>Antes de começarmos, você precisará instalar as ferramentas de CLI da AWS para poder digitar comandos em sua nuvem. A AWS oferece assistentes de instalação para todos os sistemas operacionais, então vou pular essa seção. Após uma instalação bem-sucedida, você precisará fazer login digitando o seguinte comando:</p><pre><code class="language-bash">$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-east-2
Default output format [None]: json</code></pre><p>Para gerar chaves de acesso, você precisa fazer login no Console da AWS. Lá, clique em seu nome de usuário e selecione <em>My Security Credentials</em> (em português, "Minhas Credenciais de Segurança").</p><figure class="kg-card kg-image-card kg-width-wide"></figure><h3 id="2-crie-um-elastic-container-registry-ecr-">2. Crie um <em>Elastic Container Registry</em> (ECR)<br></h3><p>Assim que as ferramentas da CLI estiverem configuradas, precisaremos criar um espaço onde podemos armazenar os executáveis de nossa aplicação. Usamos o Docker, então nossos executáveis serão imagens do Docker que serão executadas em máquinas virtuais.<br>A AWS oferece um serviço dedicado para armazenar imagens chamado <em>Elastic Container Registry</em>. O comando a seguir criará um para nós:</p><pre><code class="language-bash">aws ecr create-repository --repository-name react-to-aws --region us-east-2</code></pre><p>Aqui estão os parâmetros:</p><ul><li><code>ecr</code> – acrônimo para "Elastic Container Registry".</li><li><code>repository-name</code> – o nome do nosso registro. Observe que utilizaremos esse nome posteriormente.</li><li><code>region</code> – código da região. Você pode encontrar a região mais próxima da sua para reduzir a laência da comunicação. <a href="https://docs.aws.amazon.com/general/latest/gr/rande.html">Aqui há uma lista de todas as regiões</a>. </li></ul><p>Para mais detalhes, consulte a documentação.</p><p>Aqui está a saída do console:</p><pre><code class="language-none">{
    "repository": {
        "repositoryArn": "arn:aws:ecr:us-east-2:1234567890:repository/react-to-aws2",
        "registryId": "1234567890",
        "repositoryName": "react-to-aws",
        "repositoryUri": "1234567890.dkr.ecr.us-east-2.amazonaws.com/react-to-aws2",
        "createdAt": "2021-03-16T22:50:23+04:00",
        "imageTagMutability": "MUTABLE",
        "imageScanningConfiguration": {
            "scanOnPush": false
        },
        "encryptionConfiguration": {
            "encryptionType": "AES256"
        }
    }
}</code></pre><h3 id="3-envie-as-imagens-do-docker-para-a-nuvem">3. Envie as imagens do Docker para a nuvem</h3><p>Nesta etapa, vamos enviar nossas imagens do Docker para a nuvem. Podemos fazer isso copiando os comandos de envio de nosso Console AWS.<br>Vamos abrir o Console AWS no navegador e clicar em Elastic Container Registry na lista <em><em>All Services - Containers</em> </em>(Todos os Serviços - Contêineres). Se você não alterou sua região, pode simplesmente <a href="https://us-east-2.console.aws.amazon.com/ecr/repositories?region=us-east-2">clicar aqui</a>. Você verá a lista completa de seus repositórios:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Agoram você precisa selecionar o repositório <code>react-to-aws</code> e, em seguida, clicar em <em><em>View push commands</em></em> ("Visualizar comandos de envio") no menu (marcado com círculos vermelhos na imagem acima). Você verá a seguinte janela:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Você precisa copiar todos comandos do modal no terminal. <strong>Não copie diretamente da caixa abaixo, pois não funcionarão:</strong></p><pre><code class="language-bash">$ aws ecr get-login-password --region us-east-2 | docker login --username AWS --password-stdin 123456789.dkr.ecr.us-east-2.amazonaws.com
Login Succeeded

$ docker build -t react-to-aws .
[+] Building 0.6s (8/8) FINISHED
...

$ docker tag react-to-aws:latest 123465789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest

$ docker push 123456789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest
The push refers to repository [123456789.dkr.ecr.us-east-2.amazonaws.com/react-to-aws:latest]
...
latest: digest: sha256:3921262a91fd85d2fccab1d7dbe7adcff84f405a3dd9c0e510a20d744e6c3f74 size: 1988</code></pre><p>Agora, feche o modal e clique no nome do repositório (<code>react-to-aws</code>) para listar as imagens disponíveis. Você deve ver essa tela:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Sua aplicação está no repositório, pronta para implementação! Agora, clique em <em>Copy URI </em>(Copiar URI) <strong>e mantenha isso na sua 'área de transferência' (<em>clipboard</em>), ou copie em um arquivo de texto</strong>, pois precisaremos digitá-lo mais tarde!</p><h3 id="4-configurar-a-aplica-o">4. Configurar a aplicação</h3><p>Nossa imagem está disponível na nuvem. Agora, precisamos configurá-la.<br>Para executarmos máquinas virtuais, devemos definir algumas instruções, como portas abertas, variáveis de ambiente e assim por diante. A AWS chama isso de definição de tarefa (<em>task definition</em>).<br>Abra o console da AWS e clique em Elastic Container Service (ECS) na lista <em>All Services - Containers</em> ("Todos os Serviços - Contêineres"). Se você não alterou sua região, <a href="https://us-east-2.console.aws.amazon.com/ecs/home?region=us-east-2#/clusters">pode clicar aqui</a>.<br>Agora selecione <em>Task Definitions</em> ("Definições de Tarefas") e clique em <em>Create New Task Definition</em> ("Criar Definição de Tarefa"), conforme imagem abaixo:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Temos duas opções para executar as tarefas: <code>FARGATE</code> e <code>EC2</code>. Escolha <code>FARGATE</code><em> </em>e avance para o próximo passo.</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>No próximo passo, você precisa preencher o formulário com os seguintes valores:</p><ul><li><strong>Nomeclatura (Task Definition Name) </strong>– <code>react-to-aws-task</code>.</li><li><strong>Papel/Nível (Task Role)</strong> – <code>none</code>.</li><li><strong>Memória (Task memory) em GB </strong>– <code>0.5GB</code> (a menor).</li><li><strong>Recurso Processamento (Task CPU) em vCPU</strong> – <code>0.25 vCPU</code> (a menor).</li></ul><p>Assim que você chegar em <em>Container Definitions (</em>"Definições de container")<em>, </em>clique em <em>Add container</em><em> (</em>"Adicionar container"<em>)</em>:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Preencha o formulário com os seguintes valores:</p><ul><li><strong>Nome do container (<em>Container Name</em>) </strong>– <code>react-to-aws</code>.</li><li><strong>Imagem (<em>Image</em>)</strong> – o URI do passo anterior. Você colou os dados em um bloco de notas, lembra?</li><li><strong>Limite de memória (<em>Memory Limits</em>) em MiB </strong>– <code>Soft limit</code> <code>128</code>.</li><li><strong>Mapeamento de portas (<em>Port mappings</em>)</strong> – <code>80</code> – a porta HTTP.</li></ul><p>Outras opções não são relevantes para nós. Agora, clique no botão <em>Add</em> ("Adicionar") para adicionar um contêiner e finalize a definição de tarefa clicando em <em>Create </em>("Criar"). Você deve ver a seguinte tela e clicar em <em>View Task Definition </em>("Visualizar definição de tarefa").</p><figure class="kg-card kg-image-card kg-width-wide"></figure><h3 id="5-vamos-executar-">5. Vamos executar!</h3><p>Agora podemos criar o <em>cluster </em>para executar nossa aplicação na nuvem. Você pode selecionar <em>Clusters</em> a partir do menu ao lado esquerdo e clicar em <em>Create Cluster</em> ("Criar Cluster"), conforme a imagem abaixo:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Agora, temos três opções: <code>Networking only</code>, <code>EC2 Linux + Networking</code> e <code>EC2 Windows + Networking</code>. Selecione a primeira, <code>Networking only</code> ("Rede apenas") e avance para o próximo passo, onde você deve ver a seguinte tela:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Digite <code>react-to-aws</code> como nome do <em>cluster</em> e crie no botão <em>Create</em>. Você deve ver uma mensagem indicando sucesso. Pode parecer similar à imagem abaixo (quando criamos a nossa tarefa). Agora, clique em <em>View Cluster </em>("Ver cluster").</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Agora, clique na aba <em>Tasks</em> ("Tarefas") e clique em <em>Run new Task</em> ("Executar nova tarefa"). Parabéns! Chegamos ao último formulário! 😀</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Preencha seu último formulário com os seguintes valores:</p><ul><li><strong>Tipo de lançamento (Launch type) </strong>– <code>FARGATE</code>.</li><li><strong>Cluster VPC</strong> – a primeira opção.</li><li><strong>Subrede (Subnet)</strong> – a primeira opção.</li></ul><p><strong>Mantenha os demais valores com o padrão</strong> e clique no botão <em>Run task </em>("Executar tarefa"<em>).</em> Você deve ver essa tela:</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Precisaremos aguardar cerca de um minuto até que o "Último status" (<em>Last Status</em>) mude para "EXECUTANDO" (<em>RUNNING</em>). Lembre-se de que você precisa clicar no botão "Atualizar" (<em>Refresh</em>) para atualizar a lista. Assim que o status da tarefa estiver em execução, clique no nome da tarefa.</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Na seção "Rede" (<em>Network),</em> você pode encontrar o IP público (<em>Public IP)</em> do seu contêiner. Abra-o no navegador para visualizar sua aplicação.</p><h2 id="resumo">Resumo</h2><p>Se você está no início de sua carreira – talvez nunca tenha implementado uma aplicação por conta própria – mas é bom aprender essa habilidade, porque um dia precisará fazer isso.<br>Todo projeto precisa chegar aos usuários. Caso contrário, não terá chance de ser bem-sucedido e nunca será útil e/ou rentável.<br>O processo de configuração pode ser um pouco tedioso, mas a boa notícia é que você só precisa fazer isso uma vez! 🙂<br>Depois de configurar tudo, suas implantações futuras serão mais simples. Você só precisa enviar a nova imagem e reiniciar a tarefa para implantar uma nova versão de sua aplicação.<br>Se você estiver interessado em se aprofundar na AWS, o FreeCodeCamp oferece <a href="https://www.freecodecamp.org/news/aws-certified-cloud-practitioner-study-course-pass-the-exam-with-this-free-13-hour-course/">um tutorial gratuito sobre o assunto</a> (cerca de 14 horas).<br>Você pode encontrar <strong>uma gravação em vídeo deste tutorial (17 minutos)</strong> em meu canal no YouTube. Estou no início de minha jornada no YouTube – pelo menos semanalmente, faço upload de um vídeo sobre programação. Significaria muito para mim se você assistisse à minha gravação em vídeo, se inscrevesse no canal e clicasse no botão de curtir.</p><figure class="kg-card kg-embed-card" data-test-label="fitted">
        <div class="fluid-width-video-container">
          <div style="padding-top: 56.49999999999999%;" class="fluid-width-video-wrapper">
            
          </div>
        </div>
      </figure><p><strong>Você pode encontrar todo o código neste repositório do GitHub</strong>: <a href="https://github.com/mateuszsokola/react-to-aws">https://github.com/mateuszsokola/react-to-aws</a></p><p>Você pode enviar mensagens diretas ao autor (em inglês) pelo Twitter: <a href="https://twitter.com/msokola">@msokola</a></p><p>Pode enviar mensagens diretas ao tradutor (em português ou inglês) pelo Twitter: <a href="https://twitter.com/drcrescencio">@drcrescencio</a></p><p>É isso, pessoal! Tenham um bom dia! 🙂</p><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>Foto: <a href="https://unsplash.com/@vidarnm?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Vidar Nordli-Mathisen</a>, extraída do <a href="https://www.freecodecamp.org/news/s/photos/ship-storm?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></figcaption></figure> 
</article>
<article>
<h1> Por que você deve usar o React.js para o desenvolvimento para a web </h1>
<p>Luiz Nison Filler — Mon, 08 Apr 2024 10:36:36 +0000</p>
 <p data-test-label="translation-intro">
        <strong>Artigo original:</strong> <a href="https://www.freecodecamp.org/news/why-use-react-for-web-development/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Why You Should Use React.js For Web Development</a>
      </p><p>Se você é novo no React.js, você pode estar se perguntando o porquê de ele ser tão popular e por que você deveria usá-lo em suas aplicações. Se esse for o caso, você está no lugar certo.</p><p>Vamos discutir o que torna o React.js tão bom e porque você deve usá-lo em seus projetos.</p><h1 id="-ndice"><strong>Índice</strong></h1><ul><li>Breve história do React.js</li><li>Por que você deveria usar o React?</li><li>O React é flexível</li><li>O React possui uma ótima experiência de desenvolvedor</li><li>O React tem suporte/recursos do Facebook</li><li>O React também tem um amplo suporte da comunidade</li><li>O React possui um ótimo desempenho</li><li>O React é fácil de testar</li></ul><h2 id="breve-hist-ria-do-react-js"><strong>Breve história do Rea<strong>ct.js</strong></strong></h2><p>O Facebook criou o <a href="https://reactjs.org/">React.js</a> em 2011 para o seu próprio uso. Como você sabe, Facebook é, atualmente, um dos maiores sites de redes sociais da web do mundo.</p><p>Em 2012, o Instagram, que é uma subsidiária do Facebook, também começou a utilizá-lo.</p><p>Em 2013, o Facebook disponibilizou o código do React.js como código-aberto. Inicialmente, a comunidade de desenvolvedores o rejeitou, pois fazia uso de Markup e JavaScript em um único arquivo. No entanto, à medida que mais pessoas experimentavam, elas começaram a apoiar a abordagem centrada em componentes para separação de responsabilidades.</p><p>Em 2014, diversas empresas grandes começaram a usar o React.js em seus ambientes de produção.</p><p>Em 2015, o Facebook também disponibilizou o código do <a href="https://reactnative.dev/">React Native</a> como código-aberto. O React Native é uma biblioteca que nos permite a criação de aplicativos nativos para dispositivos móveis em Android e iOS usando o React.js.</p><p>Em 2016, com a versão 15, o React.js começou a empregar o versionamento semântico. Isso também ajudou a transmitir à comunidade de desenvolvedores que o React estava mais estável.</p><p>Hoje, o React.js é usado por muitas empresas dentre as <strong><strong><a href="https://fortune.com/ranking/fortune500/">Fortune 500</a></strong>. </strong>O Facebook possui uma equipe de desenvolvedores em tempo integral dedicada ao React. Eles, regularmente, lançam correções de bugs, melhorias, postagens em blogs e documentação.</p><h2 id="por-que-voc-deveria-usar-o-react"><strong>Por que você deveria usar o React<strong>?</strong></strong></h2><p>Você pode estar se perguntando por que você deveria usar o React.js. Afinal, com o aumento dos usos do JavaScript nos últimos anos, sabemos que há uma variedade de opções disponíveis no mercado, tais como <a href="https://angular.io/">Angular </a>e <a href="https://vuejs.org/">Vue.js</a>. Então, por que React?</p><p>Vamos explorar os seis motivos principais para usar o React.js.</p><h2 id="o-react-flex-vel"><strong>O <strong>React </strong>é f<strong>lex</strong>ível</strong></h2><p>O React é consideravelmente flexível. Após aprendê-lo, você pode usá-lo numa variedade de plataformas para construir interfaces de usuário de qualidade. O React é uma biblioteca, NÃO um<em> framework</em>. Sua abordagem de biblioteca o possibilitou evoluir e se tornar uma ferramenta notável.</p><p>O React foi criado com um único foco: criar componentes para aplicações para a web. Um <a href="https://www.freecodecamp.org/news/how-to-write-better-react-components/">componente do React</a> (texto em inglês) pode ser qualquer coisa em sua aplicação para a web como, por exemplo, um botão, um texto, um <em>label</em> ou um <em>grid</em>.</p><p>Porém, à proporção que a popularidade do React cresceu, seu ecossistema também ampliou para abranger diversos casos de uso.</p><p>Você pode gerar um site estático com React usando ferramentas como, por exemplo, o <a href="https://www.gatsbyjs.com/">Gatsby</a>. Você pode usar o React Native para construir aplicações para dispositivos móveis. Você, igualmente, pode criar uma aplicação para desktop, usando uma ferramenta como o <a href="https://www.electronjs.org/">Electron</a>, que consegue ser executada em Mac e Windows com a tecnologia React.js.</p><p>O React, da mesma maneira, suporta à renderização no servidor de seus componentes usando ferramentas como o <a href="https://nextjs.org/">Next.js</a>. Você também pode usar o React.js para criar um site da web de realidade virtual e experiências em 360 graus usando o React VR.</p><blockquote>"Aprenda o React uma vez e escreva código em qualquer lugar" - Reactjs.org</blockquote><p>Você também pode usar o React em suas aplicações já existentes. O React foi projetado com isso em mente. Você pode mudar uma pequena parte da sua aplicação existente usando o React e, se essa alteração funcionar, você pode começar a converter sua aplicação inteira para o React.js. O Facebook aplicou a mesma abordagem.</p><blockquote>"A principal vantagem de se usar uma biblioteca em vez de um <em>framework</em> é o fato de que as bibliotecas são leves. Há uma liberdade para escolher ferramentas diversas. O <em>framework</em>, por outro lado, consiste em um ecossistema completo para se criar uma aplicação. Não existe um <em>modo fácil<em> </em></em>de se usar outras ferramentas que não sejam do <em>framework</em>."</blockquote><h2 id="o-react-possui-uma-tima-experi-ncia-de-desenvolvedor">O React possui uma ótima experiência de desenvolvedor</h2><p>Seu time se apaixonará pelo React quando eles começarem a programar com ele. O rápido desenvolvimento e a API enxuta do React combinados criam uma fantástica experiência de desenvolvimento.</p><p>A API do React é muito simples, pois possui poucos conceitos para aprender. Aqui está um curto exemplo de um componente do React:</p><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>Componente do React</figcaption></figure><p>Você precisa apenas importar a biblioteca do React. <strong><em>Message</em></strong> é um componente que recebe uma <em>props</em> (entrada) e retorna JSX.</p><p>JSX é uma sintaxe especial que se assemelha ao HTML, convertendo as chamadas da API do React e, ao final, renderizando HTML.</p><p><em>Frameworks</em> tradicionais, como o Angular e Vue, potencializam o HTML. Eles usam JavaScript dentro do HTML. Eles criaram atributos HTML que fornecem capacidades adicionais a ele.</p><p>O principal problema com essa abordagem é que você tem que aprender esses novos atributos do HTML ou sempre ficar consultando a documentação oficial.</p><p>Aqui está um exemplo de laço de repetição no Angular. Olhe o atributo <strong><strong>*ngFor</strong></strong>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>Exemplo de laço de repetição no Angular (Fonte: <a href="https://angular.io/">Angular</a>)</figcaption></figure><p>Aqui, por outro lado, temos um exemplo de laço de repetição no Vue.js. Dê uma olhada no atributo <strong><strong>v-for</strong></strong>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>Exemplo de laço de repetição no Vue (Fonte: <a href="https://vuejs.org/">vuejs.org</a>)</figcaption></figure><p>O React usa uma conduta oposta. Ele utiliza HTML (JSX) dentro do JavaScript. Eu gosto dessa abordagem porque, nela, você pode lidar com JavaScipt e HTML puros.</p><p>Aqui temos um exemplo de laço de repetição no React.js</p><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>Exemplo de laços de repetição no React (Fonte: <a href="https://reactjs.org/">Reactjs.org</a>)</figcaption></figure><p>‌O componente <strong><strong>NumberList </strong></strong>do React usa código em JavaScript puro (a função 'map'). Além disso, você pode observar que o JSX é uma simples, e bem conhecida, tag HTML com atributos elegantes. A função '<em>render</em>' está apenas renderizando o componente <em>NumberList</em> no elemento raiz no arquivo HTML.</p><p>O que mais você precisa, enquanto desenvolvedor, se tem à disposição uma plataforma onde você pode lidar com JavaScript e HTML puros e, ainda, criar uma Interface de Usuário interativa?</p><p><strong>Observação<strong>:</strong></strong> <em>quando eu digo "JavaScript puro", isso não significa que você usará simplesmente JavaScript no React. O React é uma biblioteca do JavaScript e ele possui sua camada baseada no próprio JavaScript. PORÉM, como eu disse, a API do React é bem enxuta e simples de aprender. Angular e Vue forçam suas regras a você. O React é mais conceitual. Ele mostra como você pode fazer um melhor uso do JavaScript no estilo do React.</em></p><p>O React.js também nos disponibiliza o pacote <a href="https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/">create-react-app</a>, que permite a começar instantaneamente o desenvolvimento.</p><h2 id="o-react-tem-suporte-recursos-do-facebook">O React tem suporte/recursos do Facebook</h2><p>O React é amplamente usado na aplicação e no site da web do Facebook e no Instagram. É por isso que o Facebook é profundamente comprometido com isso. Eles usam mais de 50 mil componentes do React em seu ambiente de produção. Os quatro principais contribuidores do React no GitHub são funcionários em tempo integral do Facebook.</p><figure class="kg-card kg-image-card kg-card-hascaption"><figcaption>Maiores colaboradores do React.js</figcaption></figure><p>Além disso, o time do React mantém um <a href="https://reactjs.org/blog/all.html/">blog</a> que constantemente fornece detalhes de cada novo lançamento.</p><p>Por conta do sólido comprometimento do Facebook com o React em produção, quando ocorrem mudanças significativas (breaking changes) no React, o Facebook consistentemente provê um <a href="https://github.com/reactjs/react-codemod">Codemod</a> que automatiza a mudança. </p><p>O Codemod é uma ferramenta de linha de comando que automatiza mudanças em sua base de código. Quando uma nova especificação entra no React, o Codemod automaticamente substitui velhos componentes com a nova especificação.</p><p>Desde 2015, a popularidade do React tem crescido constantemente. Ele possui uma comunidade muito grande e bastante ativa. Seu <a href="https://github.com/facebook/react">repositório no GitHub</a> tem mais de 164 mil estrelas. É um dos cinco principais repositórios na plataforma.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><figcaption>Repositório do React no GitHub</figcaption></figure><p>O <a href="https://www.npmjs.com/package/react">pacote do NPM</a> do React tem, também, milhões de downloads semanalmente.</p><figure class="kg-card kg-image-card kg-width-wide"></figure><p>Mais de 9 mil empresas relataram no <a href="https://stackshare.io/react">Stackshare</a> que estão usando React. Você até pode ver empresas da Fortune 500.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><figcaption>Empresas que usam o React</figcaption></figure><p>A <a href="https://www.reactiflux.com/">Reactiflux</a> é uma comunidade especialmente feita para desenvolvedores do React. Mais de 110 mil membros da comunidade estão engajados em ajudar a resolver e compartilhar problemas relativos ao React.</p><p>Um dos sites da web mais populares entre os desenvolvedores de software é o <a href="https://stackoverflow.com/">StackOverflow</a>. Você pode ver que há mais de 250 mil perguntas feitas sobre o React e bibliotecas relacionadas a ele.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><figcaption>React no StackOverflow</figcaption></figure><p>Em alguns casos, você nem precisa criar seus próprios componentes. Existem várias bibliotecas de componentes gratuitas e maduras disponíveis on-line.</p><p>Aqui estão alguns exemplos:</p><ul><li>A Microsoft criou a biblioteca de componente <a href="https://developer.microsoft.com/en-us/fluentui#/">Fluent UI</a>, que possibilita desenvolver sua interface de usuário (semelhante a do <a href="https://www.office.com/">office</a>).</li><li>A <a href="https://material-ui.com/">Material-UI</a> oferece componentes do React que implementam as diretrizes de interface de usuário do Google Material.</li><li>A <a href="https://react-bootstrap.github.io/">React-Bootstrap</a> contém componentes do React que facilitam o trabalho com o Bootstrap.</li><li>Ademais, confira a lista <a href="https://github.com/brillout/awesome-react-components">Awesome React Components</a> no GitHub para encontrar mais componentes do React.</li></ul><p>Também existem projetos/bibliotecas maduras relacionadas que você pode usar com React.</p><ul><li>Se você quiser roteamento, então pode empregar o <a href="https://reactrouter.com/">React Router</a>. Se você deseja gerenciar um sistema de dados mais complexo, então utilize o <a href="https://redux.js.org/">Redux</a> e o <a href="https://mobx.js.org/README.html">MobX</a><a href="https://redux.js.org/"></a><a href="https://mobx.js.org/README.html">.</a></li><li>Para testes automatizados, use <a href="https://jestjs.io/">Jest</a>, que também é desenvolvido pelo Facebook.</li><li>Para chamadas a APIs RESTful, use o <a href="https://graphql.org/">GraphQL</a>.</li><li>Para renderização do lado do servidor de componentes do React com Node, faça uso do <a href="https://expressjs.com/">Express.js</a>.</li></ul><p>Todas essas bibliotecas e ferramentas são importantes, pois se você está procurando criar algo no React, você encontrará na web ajuda e soluções em abundância para tudo o que precisar.</p><h2 id="react-possui-um-timo-desempenho">React possui um ótimo desempenho</h2><p>A equipe do React percebeu que o JavaScript é rápido, mas atualizar o DOM o torna lento. O React minimiza as mudanças no DOM, tendo descoberto uma mais eficiente e inteligente de atualizá-lo.</p><p>Antes do React, a maioria dos <em>frameworks</em> e bibliotecas atualizava o DOM de maneira não inteligente para refletir um novo estado, resultando em mudanças em uma parte significativa da página.</p><p>O React monitora os valores do estado de cada componente com o <a href="https://reactjs.org/docs/faq-internals.html">Virtual DOM</a>. Quando o estado do componente é alterado, o React compara o estado existente do DOM com o que o novo DOM deveria parecer. Depois disso, ele encontra a maneira menos custosa de atualizá-lo.</p><p>Isso não parece ser muito fácil, mas o React lida muito bem com isso nos bastidores. Ele possui múltiplos benefícios, tais como evitar o 'layout trashing', que ocorre quando o navegador tem de recalcular a posição de tudo quando o elemento do DOM é modificado.</p><p>Além disso, como a maioria das aplicações tem sido usada em dispositivos móveis, elas precisam ser altamente eficientes. Portanto, economizar bateria e poder de CPU é muito importante.</p><p>O modelo simples de programação do React permite que ele mude os estados automaticamente quando dados são atualizados. Isso ocorre na memória, o que torna o processo bastante rápido.</p><p>O tamanho da biblioteca do React também é enxuto. É de menos de <strong>6kb</strong> (menos de 3kb quando compactado em gzip). Isso é significativamente inferior ao tamanho dos seus concorrentes.</p><h2 id="o-react-f-cil-de-testar">O React é fácil de testar</h2><p>O design do React é muito amigável para testes.</p><ul><li>O teste de interfaces de usuário tradicionais pode ser complicado de configurar. Por outro lado, você requer bem pouca ou nenhuma configuração para testar no React.</li><li>Testar interfaces de usuário tradicionais requer navegadores para os testes, mas você pode testar componentes do React rápida e facilmente usando a linha de comando no Node.</li><li>Os testes tradicionais de interface de usuário no navegador são lentos. No entanto, os testes de linha de comando são rápidos e você pode executar uma quantidade considerável de conjuntos de testes ao mesmo tempo.</li><li>O teste tradicional de interface de usuário no navegador, frequentemente, consome tempo e é desafiador para manter. Os testes em React podem ser escritos rapidamente usando ferramentas como Jest e <a href="https://enzymejs.github.io/enzyme/">Enzyme</a>.</li></ul><p>Há uma vasta variedade de <em>frameworks</em> JavaScript de testes disponíveis na web, os quais você pode implementar para testar o React.js (uma vez que também é uma biblioteca JavaScript). Alguns dos <em>frameworks</em> populares são o <a href="https://mochajs.org/">Mocha</a>, o <a href="https://jasmine.github.io/">Jasmine</a>, o <a href="https://github.com/substack/tape">Tape</a>, o <a href="https://qunitjs.com/">QUnit</a> e o <a href="https://github.com/avajs/ava">AVA</a>.</p><h2 id="conclus-o">Conclusão</h2><p>O React é uma ferramenta excelente para criar aplicações interativas para dispositivos móveis, para a web e para outras plataformas.</p><p>Tanto a popularidade quanto a utilização do React estão aumentando dia a dia por uma boa razão. Como desenvolvedor, programar em React torna você melhor em JavaScript, uma linguagem que detém, atualmente, aproximadamente 90% do mercado de desenvolvimento para a web.</p><p><em>Muito obrigado por ler este artigo. Conecte-se com o autor pelo <a href="https://www.linkedin.com/in/suraj-surve/">LinkedIn</a>.</em></p> 
</article>
<article>
<h1> React para principiantes – um guia do React.js para programadores de front-end </h1>
<p>Afonso Branco — Wed, 29 Nov 2023 21:00:00 +0000</p>
 <p data-test-label="translation-intro">
        <strong>Artigo original:</strong> <a href="https://www.freecodecamp.org/news/react-beginner-handbook/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">React for Beginners – A React.js Handbook for Front End Developers</a>
      </p><blockquote>Tradução em português europeu</blockquote><p>O React é um dos <em>frameworks </em>mais populares do JavaScript alguma vez criados, e acredito que seja uma das melhores ferramentas que anda por aí.</p><p>O objetivo deste manual é fornecer um guia inicial para aprender React.</p><blockquote>Nota da tradução: grande parte dos conceitos trabalhados neste manual seguem válidos para todas as versões de React. No entanto, é importante reforçar que, desde a concepção do artigo original, o React passou por atualizações e é possível que algumas das soluções oferecidas aqui estejam diferentes em versões mais recentes.</blockquote><p>No final deste manual, terás conhecimentos básicos sobre:</p><ul><li>O que é o React e porque é tão popular</li><li>Como instalar o React</li><li>Componentes do React</li><li><em>State</em> do React</li><li><em>Props</em> do React</li><li>Manipulação de eventos de utilizador em React</li><li>Eventos de ciclo de vida num componente do React</li></ul><p>Estes tópicos serão a base sobre a qual construirás em outros tutoriais de React mais avançados.</p><p>Este manual é escrito especialmente para programadores de JavaScript que estão a começar com o React. Por isso, vamos começar.</p><h2 id="o-que-react"><strong>O que é React?</strong></h2><p>O React é uma biblioteca do JavaScript que tem o objetivo de simplificar o desenvolvimento de interfaces visuais.</p><p>Desenvolvido pela Facebook e lançado ao mundo em 2013, ele impulsiona algumas das aplicações mais utilizadas no mundo, potenciando o Facebook e o Instagram, entre outras inúmeras aplicações.</p><p>O seu objetivo principal é facilitar o raciocínio sobre uma interface e o seu estado (em inglês, <em>state</em>), a qualquer momento. O React faz isso ao dividir a UI (Interface de Utilizador, em português) numa coleção de componentes.</p><p>Podes enfrentar algumas dificuldades iniciais ao aprender React. Porém, assim que fizer o "clique", garanto-te que será uma das melhores experiências que terás. O React facilita muitas coisas e o seu ecossistema está repleto de óptimas bibliotecas e ferramentas.</p><p>O React por si só tem uma API muito pequena e, basicamente, precisas compreender quatro conceitos para começar:</p><ul><li>Componentes</li><li>JSX</li><li><em>State</em></li><li><em>Props</em></li></ul><p>Vamos explorar todos eles neste manual e vamos deixar os conceitos mais avançados para outros tutoriais. Irei fornecer algumas dicas na última secção sobre como seguir em frente.</p><p>Podes também fazer o <a href="https://flaviocopes.com/page/react-handbook/">download deste manual em PDF / ePub / formato Mobi gratuitamente</a>.</p><h2 id="resumo-do-manual"><strong>Resumo do manual</strong></h2><ul><li><a href="https://www.freecodecamp.org/portuguese/news/#quanto-javascript-precisas-saber-para-utilizar-o-react">Quanto JavaScript precisas saber para utilizar o React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#porque-deves-aprender-react">Porque deves aprender React?</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#como-instalar-o-react">Como instalar o React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#componentes-do-react">Componentes do React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#introdu-o-ao-jsx">Introdução ao JSX</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#utilizar-jsx-para-compor-uma-ui">Utilizar JSX para compor uma UI</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#a-diferen-a-entre-jsx-e-html">A diferença entre JSX e HTML</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#incorporar-javascript-em-jsx">Incorporar JavaScript em JSX</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#gerir-o-state-em-react">Gerir o state em React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#props-de-componente-em-react">Props de componente em React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#fluxo-de-dados-numa-aplica-o-em-react">Fluxo de dados numa aplicação em React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#lidar-com-eventos-de-utilizador-em-react">Lidar com eventos de utilizador em React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#eventos-de-ciclo-de-vida-num-componente-react">Eventos de ciclo de vida num componente React</a></li><li><a href="https://www.freecodecamp.org/portuguese/news/react-para-principiantes-um-guia-do-react-js-para-programadores-de-front-end/#para-onde-seguir-a-partir-daqui">Para onde seguir a partir daqui</a></li></ul><h2 id="quanto-javascript-precisas-saber-para-utilizar-o-react"><strong>Quanto JavaScript precisas saber para utilizar o React</strong></h2><p>Antes de avançar diretamente para o React, deves ter uma boa compreensão de alguns conceitos fundamentais do JavaScript.</p><p>Não precisas ser um especialista em JavaScript, mas acho que precisas de uma compreensão (textos do autor abaixo em inglês) de:</p><ul><li><a href="https://flaviocopes.com/javascript-variables/">Variáveis</a></li><li><a href="https://flaviocopes.com/javascript-arrow-functions/">Funções de seta</a></li><li><a href="https://flaviocopes.com/javascript-rest-spread/">Trabalhar com objetos e arrays utilizando Rest e Spread</a></li><li><a href="https://flaviocopes.com/javascript-destructuring/">Desestruturação de objetos e arrays</a></li><li><a href="https://flaviocopes.com/javascript-template-literals/">Literais de template</a></li><li><a href="https://flaviocopes.com/javascript-callbacks/">Funções de callback</a></li><li><a href="https://flaviocopes.com/es-modules/">Módulos da ES</a></li></ul><p>Se estes conceitos não te forem familiares, deixei alguns links para descobrires mais sobre esses assuntos.</p><h2 id="porque-deves-aprender-react"><strong>Porque deves aprender React?</strong></h2><p>Recomendo vivamente que qualquer programador para a Web tenha, pelo menos, uma compreensão básica do React.</p><p>Recomendo isto por algumas razões.</p><ol><li>O React é muito popular. Como programador, é bem provável que vás trabalhar num projeto com React no futuro. Talvez num projeto existente, ou talvez a tua equipa vai querer que trabalhes numa nova aplicação com base no React.</li><li>Hoje em dia, muitas das ferramentas são criadas utilizando o React no seu núcleo. Frameworks populares e ferramentas como Next.js, Gatsby e muitos outros utilizam React em segundo plano.</li><li>Como engenheiro de front-end, o React provavelmente surgirá numa entrevista de emprego.</li></ol><p>Estas são todas boas razões, mas uma das principais razões para eu querer que aprendas React é que o React é espetacular.</p><p>O React promove várias boas práticas de desenvolvimento, incluindo a capacidade de reutilizar o código e desenvolvimento orientado a componentes. É rápido, é leve, e a maneira como te faz pensar sobre o fluxo de dados na aplicação combina com vários cenários comuns.</p><h2 id="como-instalar-o-react"><strong>Como instalar o React</strong></h2><p>Existem algumas formas diferentes de instalar o React.</p><p>Para começar, recomendo vivamente uma abordagem, que é utilizar a ferramenta oficial recomendada, chamada <code>create-react-app</code>.</p><p><code>create-react-app</code> é uma aplicação de linha de comandos, que tem o objetivo de te colocar a par do React sem demoras.</p><p>Começas por utilizar o <code>npx</code>, que é uma forma fácil de descarregar e executar comandos do Node.js sem ter de instalá-los.</p><blockquote><em>Vê o meu guia sobre o<em> npx </em>aqui<em>: </em></em><a href="https://flaviocopes.com/npx/"><em><em>https://flaviocopes.com/npx/</em></em></a><em> (em inglês)</em></blockquote><p>O <code>npx</code> vem com o <code>npm</code> (desde a versão 5.2). Se ainda não tiveres nenhum npm instalado, instala agora a partir de <a href="https://nodejs.org/">https://nodejs.org</a> (o npm é instalado com o Node).</p><p>Se não tiveres a certeza que versão tens do npm, executa <code>npm -v</code> para verificar se precisas de atualizar.</p><blockquote><em>Dica<em>: </em>analisa o meu tutorial sobre o terminal<em> OSX</em>, disponível em<em> <a href="https://flaviocopes.com/macos-terminal/">https://flaviocopes.com/macos-terminal/</a></em> (em inglês),<em> </em>caso ainda não te sintas à vontade a utilizar o<em> terminal. </em>Aplica-se<em> </em>ao<em> Mac </em>e ao<em> Linux.</em></em></blockquote><p>Quando executas <code>npx create-react-app <app-name></code>, o <code>npx</code> <em>irá descarregar</em> a versão mais recente de <code>create-react-app</code>. Executa-a, e de seguida, remove-a do teu sistema.</p><p>Isto é ótimo porque nunca vais ter uma versão desatualizada no teu sistema, e sempre que a executares, iras obter a versão mais recente e o melhor código disponível.</p><p>Vamos então começar:</p><pre><code class="language-sh">npx create-react-app todolist
</code></pre><figure class="kg-card kg-image-card"></figure><p>Isto é quando termina a execução:</p><figure class="kg-card kg-image-card"></figure><p><code>create-react-app</code> criou uma estrutura de ficheiros na pasta que indicaste (<code>todolist</code>, neste caso), e inicializou um repositório <a href="https://flaviocopes.com/git/">Git</a>.</p><p>Também adicionou alguns comandos no ficheiro <code>package.json</code>:</p><figure class="kg-card kg-image-card"></figure><blockquote>Nota da tradução: como é possível ver na parte das dependências, a versão na época da criação deste artigo é a versão 16.14.0. A versão atual, no momento em que esta tradução foi realizada, é a 18.2.0.</blockquote><p>Então, podes iniciar imediatamente a aplicação ao seguir para a pasta da aplicação recentemente criada e executando <code>npm start</code>.</p><figure class="kg-card kg-image-card"></figure><p>De início, este comando executa a aplicação na tua porta local 3000, e abre o teu navegador, apresentando o ecrã de boas vindas:</p><figure class="kg-card kg-image-card"></figure><p>Agora, está tudo pronto para trabalhares na aplicação!</p><h2 id="componentes-do-react"><strong>Componentes do React</strong></h2><p>Na última secção, viste como criar a tua primeira aplicação de React.</p><p>Esta aplicação vem com uma série de ficheiros que fazem várias coisas, em maior parte, relacionadas com a configuração, mas existe um ficheiro que se destaca: <code>App.js</code>.</p><p><code>App.js</code> é o <strong>primeiro Componente do<strong> React</strong></strong> que vais conhecer.</p><p>Este é o código dele:</p><pre><code class="language-js">import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App
</code></pre><p>Uma aplicação criada utilizando React, ou um dos outros <em>frameworks </em>de front-end populares, como Vue e Svelte, por exemplo, é criada utilizando dezenas de componentes.</p><p>Vamos começar, no entanto, por analisar o primeiro componente. Vou simplificar o código deste componente, assim:</p><pre><code class="language-js">import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return /* algo */
}

export default App
</code></pre><p>Podes ver algumas coisas aqui. <em>I<em>mpor</em>tamos</em> algumas coisas e <em><em>expor</em>tamos</em> uma função chamada <code>App</code>.</p><p>As coisas que importamos são, neste caso, uma biblioteca do JavaScript (o pacote de npm <code>react</code>), uma imagem SVG e um ficheiro CSS.</p><blockquote><code><em><em>create-react-app</em></em></code><em><em> </em>está configurado num modo que nos permite importar imagens e <em>CSS </em>para utilizar no nosso<em> JavaScript, </em>mas isto não é algo que tenhamos de nos preocupar para já<em>. </em>O que precisas de te preocupar é o conceito de um<em> </em></em><strong><strong><em><em>component</em></em></strong><em>e</em></strong></blockquote><p><code>App</code> é uma função que, no exemplo original, retorna algo que, à primeira vista, tem um aspeto muito estranho.</p><p>Parece ser <strong><strong>HTML</strong></strong> mas tem algum JavaScript incorporado.</p><p>Isto é <strong><strong>JSX</strong></strong>, uma linguagem especial que utilizamos para criar o resultado de um componente. Vamos falar mais sobre o JSX na próxima secção.</p><p>Para além de definir algum JSX para ser retornado, um componente tem muitas outras características.</p><p>Um componente pode ter o seu próprio <strong><strong><em>state</em></strong></strong>, que significa que encapsula algumas variáveis que outros componentes não conseguem aceder, a não ser que este componente exponha o <em>state</em> para a restante aplicação.</p><p>Um componente também pode receber dados de outros componentes. Neste caso, estamos a falar sobre <strong><strong><em>props</em></strong></strong>.</p><p>Não te preocupes, em breve vamos olhar com mais detalhes para todos estes termos (JSX, State e Props).</p><h2 id="introdu-o-ao-jsx"><strong>Introdução ao JSX</strong></h2><p>Não podemos falar sobre React sem explicar primeiro o JSX.</p><p>Na última secção, ficaste a conhecer o teu primeiro componente React, o componente <code>App</code> definido na aplicação predefinida criada pelo <code>create-react-app</code>.</p><p>O seu código era o seguinte:</p><pre><code class="language-js">import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App
</code></pre><p>Anteriormente, ignoramos tudo o que estava dentro da instrução <code>return</code>, mas, nesta secção, vamos falar sobre isso.</p><p>Chamamos JSX a tudo o que esteja entre os parênteses do que é retornado pelo componente:</p><pre><code class="language-jsx"><div className="App">
  <header className="App-header">
    
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>
</code></pre><p>Isto <em>parece</em> HTML, mas não é realmente HTML. É um pouco diferente.</p><p>É um pouco estranho ter este código dentro de um ficheiro JavaScript. Isto não se parece nada com JavaScript!</p><p>Em segundo plano, o React irá processar o JSX e vai transformá-lo em JavaScript, que o navegador será capaz de interpretar.</p><p>Então, estamos a escrever JSX, mas, no final, existe um passo de tradução que o torna legível para um interpretador de JavaScript.</p><p>O React fornece-nos esta interface por uma razão: <strong>é mais fácil criar interfaces de<strong> UI </strong>utilizando<strong> JSX</strong></strong>.</p><p>Assim que estiveres mais à vontade com o JSX, claro.</p><p>Na próxima secção, vamos falar sobre como o JSX te permite compor facilmente uma UI, e depois vamos ver as diferenças em relação ao "HTML normal" que precisas saber.</p><h2 id="utilizar-jsx-para-compor-uma-ui"><strong>Utilizar JSX para compor uma UI</strong></h2><p>Tal como introduzido na secção anterior, um dos principais benefícios do JSX é que torna muito fácil criar uma UI.</p><p>Em particular, num componente do React, podes importar outros componentes do React e podes incorporá-los e exibi-los.</p><p>Um componente do React é geralmente criado no seu próprio ficheiro, porque é assim que podemos facilmente reutilizá-lo (ao importá-lo) em outros componentes.</p><p>Um componente do React, no entanto, também pode ser criado no mesmo ficheiro de outro componente, se planeares utilizá-lo apenas nesse componente. Aqui não existe uma "regra", podes fazer o que achares melhor.</p><p>Eu geralmente utilizo ficheiros separados quando o número de linhas fica muito grande.</p><p>Para manter as coisas simples, vamos criar um componente no mesmo ficheiro <code>App.js</code>.</p><p>Vamos criar um componente <code>WelcomeMessage</code>:</p><pre><code class="language-js">function WelcomeMessage() {
  return <p>Welcome!</p>
}
</code></pre><p>Vês? É uma simples função que retorna uma linha de JSX, que representa um elemento de HTML <code>p</code>.</p><p>Vamos adicioná-lo ao ficheiro <code>App.js</code>.</p><p>Agora, dentro do componente de JSX <code>App</code>, podemos adicionar <code><WelcomeMessage /></code> para exibir este componente na interface de utilizador:</p><pre><code class="language-js">import React from 'react'
import logo from './logo.svg'
import './App.css'

function WelcomeMessage() {
  return <p>Welcome!</p>
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <WelcomeMessage />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App
</code></pre><p>Aqui está o resultado. Consegues ver a mensagem "Welcome!" (em português, "boas-vindas") no ecrã?</p><figure class="kg-card kg-image-card"></figure><p>Dizemos que <code>WelcomeMessage</code> é um <strong><strong>c</strong>omponente-filho</strong> de App, e <code>App</code> é o seu <strong>componente-pai</strong>.</p><p>Vamos adicionar o componente <code><WelcomeMessage /></code> como se fizesse parte da linguagem HTML.</p><p>Esta é a beleza dos componentes React e do JSX: podemos compor uma interface de uma aplicação e utilizá-la como se estivéssemos a escrever HTML.</p><p>Com algumas diferenças, como veremos na próxima secção.</p><h2 id="a-diferen-a-entre-jsx-e-html"><strong>A diferença entre JSX e HTML</strong></h2><p>O JSX parece mais ou menos HTML, mas não é.</p><p>Neste secção, quero apresentar-te algumas das coisas mais importantes que precisas ter em mente ao utilizar o JSX.</p><p>Uma das diferenças pode ser bastante óbvia se observaste o componente de JSX <code>App</code>: existe um atributo estranho chamado <code>className</code>.</p><p>Em HTML, utilizamos o atributo <code>class</code>. É provavelmente o atributo mais utilizado, por várias razões. Uma dessas razões é o CSS. O atributo <code>class</code> permite-nos estilizar facilmente elementos de HTML. Frameworks de CSS, como o Tailwind, colocam este atributo no centro do processo de design em CSS da interface de utilizador.</p><p>Existe um problema, contudo. Estamos a escrever o código desta UI num ficheiro de JavaScript e o atributo <code>class</code> na linguagem de programação JavaScript é uma palavra reservada. Isto quer dizer que não podemos utilizar esta palavra reservada como quisermos. Ela serve um propósito específico (definir classes de JavaScript) e os criadores do React tiveram de escolher um nome diferente.</p><p>Foi assim que acabamos com <code>className</code> em vez de <code>class</code>.</p><p>Vais ter de memorizar isso, especialmente quando estiveres a copiar/colar algum HTML existente.</p><p>O React vai fazer o seu melhor para impedir que as coisas quebrem, mas irá criar uma série de alertas nas Ferramentas de Programador:</p><figure class="kg-card kg-image-card"></figure><p>Esta não é a única funcionalidade do HTML que sofre deste problema, mas é uma das mais comuns.</p><p>Outra grande diferença entre JSX e HTML é que o HTML é muito <em><em>relax</em>ado</em>, digamos. Mesmo que tenhas um erro na sintaxe, ou tenhas fechado incorretamente uma tag, ou tenhas uma discrepância, o browser fará o seu melhor para tentar interpretar o HTML sem dar problemas.</p><p>É uma das principais funcionalidades da Web. É muito indulgente.</p><p>O JSX não perdoa. Se te esqueceres de fechar uma tag, receberás uma mensagem clara de erro:</p><figure class="kg-card kg-image-card"></figure><blockquote><em>O <em>React </em>geralmente fornece mensagens de erro muito boas e informativas que te apontam na direção correta para resolver o problema<em>.</em></em></blockquote><p>Outra grande diferença entre JSX e HTML é que em JSX podemos incorporar JavaScript.</p><p>Vamos falar sobre isto na próxima secção.</p><h2 id="incorporar-javascript-em-jsx"><strong>Incorporar JavaScript em JSX</strong></h2><p>Uma das melhores funcionalidades do React é que podemos facilmente incorporar JavaScript no JSX.</p><p>Outros <em>frameworks</em> de frontend, por exemplo Angular e Vue, têm as suas próprias formas específicas de imprimir valores JavaScript no <em>template</em>, ou realizar coisas como ciclos.</p><p>O React não adiciona coisas novas. Em vez disso, permite-nos utilizar JavaScript no JSX, ao utilizar chavetas.</p><p>O primeiro exemplo disto que te vou apresentar vem diretamente do componente <code>App</code> que temos estado a estudar até agora.</p><p>Importamos o ficheiro SVG <code>logo</code> utilizando o comando</p><pre><code class="language-js">import logo from './logo.svg'
</code></pre><p>e de seguida, no JSX, atribuímos este ficheiro SVG ao atributo <code>src</code> de uma tag <code>img</code>:</p><pre><code class="language-js">
</code></pre><p>Vamos fazer outro exemplo. Vamos supor que o componente <code>App</code> tem uma variável chamada <code>message</code>:</p><pre><code class="language-js">function App() {
  const message = 'Hello!'
  //...
}
</code></pre><p>Podemos imprimir este valor no JSX ao adicionar <code>{message}</code> em qualquer local do JSX.</p><p>Dentro das chavetas <code>{ }</code>, podemos adicionar qualquer instrução JavaScript, mas <em>apenas uma</em> instrução por cada bloco de chavetas.</p><p>Á instrução deve retornar algo.</p><p>Por exemplo, esta é uma instrução comum que irás encontrar em JSX. Temos um operador ternário onde definimos uma condição (<code>message === 'Hello!'</code>), e imprimimos um valor caso a condição seja verdadeira, ou outro valor (o conteúdo de <code>message</code>, neste caso) caso a condição seja falsa:</p><pre><code class="language-js">{
  message === 'Hello!' ? 'The message was "Hello!"' : message
}
</code></pre><h2 id="gerir-o-state-em-react"><strong>Gerir o <em>state</em> em React</strong></h2><p>Qualquer componente React pode ter o seu próprio <strong><strong><em>state</em></strong></strong>.</p><p>O que queremos dizer com <em><em>state</em></em>? O <em>state</em> é o <strong>conjunto de dados<strong> </strong>que é gerido pelo componente</strong>.</p><p>Imagina um formulário, por exemplo. Cada elemento <em>input</em> individual do formulário é responsável pela gestão do seu <em>state</em>: o que está escrito dentro dele.</p><p>Um botão está responsável por saber se está a ser clicado ou não. Se está a ser focado.</p><p>Um link está responsável por saber se o rato está por cima dele.</p><p>Em React, ou em qualquer framework/biblioteca com base em componentes, todas as nossas aplicações são baseadas e utilizam muito o <em>state</em> do componente.</p><p>Gerimos o <em>state</em> através do utilitário <code>useState</code> fornecido pelo React. É tecnicamente um <strong><strong><em>hook</em></strong></strong> (não precisas saber os detalhes dos <em>hooks</em> por enquanto, mas é o que isto é).</p><p>Importas o <code>useState</code> do React desta forma:</p><pre><code class="language-js">import React, { useState } from 'react'
</code></pre><p>Ao chamar <code>useState()</code>, irás receber uma nova variável de <em>state</em> e uma função que podemos chamar para alterar o seu valor.</p><p><code>useState()</code> aceita o valor inicial do item de <em>state</em> e retorna um array que contém a variável de <em>state</em> e a função que chamas para alterar o <em>state</em>.</p><p>Exemplo:</p><pre><code class="language-js">const [count, setCount] = useState(0)
</code></pre><p>Isto é importante. Não podemos simplesmente alterar diretamente o valor de uma variável de <em>state</em>. Temos de chamar a sua função de modificação. Caso contrário, o componente React não ira atualizar a sua UI para refletir as alterações feitas aos dados.</p><p>Chamar o modificador é a maneira com que podemos indicar ao React que o <em>state</em> de um componente foi alterado.</p><p>A sintaxe é um pouco estranha, não é? Visto que <code>useState()</code> retorna um array, utilizamos desestruturação de array para aceder a cada item individual, assim: <code>const [count, setCount] = useState(0)</code></p><p>Aqui está um exemplo prático:</p><pre><code class="language-js">import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))
</code></pre><p>Podes adicionar quantas chamadas <code>useState()</code> quiseres para criar quantas variáveis de <em>state</em> quiseres:</p><pre><code class="language-js">const [count, setCount] = useState(0)
const [anotherCounter, setAnotherCounter] = useState(0)
</code></pre><h2 id="props-de-componente-em-react"><strong><em>Props</em> de componente em React</strong></h2><p>Chamamos <code>props</code> aos valores iniciais passados para um componente.</p><p>Anteriormente, criamos um componente <code>WelcomeMessage</code></p><pre><code class="language-js">function WelcomeMessage() {
  return <p>Welcome!</p>
}
</code></pre><p>e utilizamos o componente desta maneira:</p><pre><code class="language-js"><WelcomeMessage />
</code></pre><p>Este componente não tem nenhum valor inicial. Não tem nenhum <em>prop</em>.</p><p>Os <em>props </em>podem ser passados como atributos para o componente no JSX:</p><pre><code class="language-js"><WelcomeMessage myprop={'somevalue'} />
</code></pre><p>Dentro do componente, recebemos os <em>props </em>como argumentos:</p><pre><code class="language-js">function WelcomeMessage(props) {
  return <p>Welcome!</p>
}
</code></pre><p>É comum utilizar desestruturação de objetos para obter os <em>props </em>pelo nome:</p><pre><code class="language-js">function WelcomeMessage({ myprop }) {
  return <p>Welcome!</p>
}
</code></pre><p>Agora que temos o <em>prop</em>, podemos utilizá-lo dentro do componente. Por exemplo, podemos imprimir o seu valor no JSX:</p><pre><code class="language-js">function WelcomeMessage({ myprop }) {
  return <p>{myprop}</p>
}
</code></pre><p>Aqui, as chavetas têm vários significados. No caso do argumento da função, as chavetas são utilizadas como parte da sintaxe de desestruturação do objeto.</p><p>De seguida, utilizamos as chavetas para definir o bloco de código da função, e por fim, no JSX, para imprimir o valor em JavaScript.</p><p>Passar <em>props </em>para os componentes é uma boa forma de transmitir valores na tua aplicação.</p><p>Um componente armazena dados (tem <em>state</em>) ou recebe dados através dos seus <em>props</em>.</p><p>Também podemos enviar funções como <em>props</em>. Por isso, um componente-filho pode chamar uma função no componente-pai.</p><p>Um <em>prop </em>especial, chamado <code>children</code>, contém o valor de tudo o que é passado entre as tags de abertura e de fecho do componente, por exemplo:</p><pre><code class="language-html"><WelcomeMessage> Here is some message </WelcomeMessage>
</code></pre><p>Neste caso, dentro de <code>WelcomeMessage</code>, poderíamos aceder ao valor <code>Here is some message</code> ao utilizar o <em>prop </em><code>children</code>:</p><pre><code class="language-js">function WelcomeMessage({ children }) {
  return <p>{children}</p>
}
</code></pre><h2 id="fluxo-de-dados-numa-aplica-o-em-react"><strong>Fluxo de dados numa aplicação em React</strong></h2><p>Numa aplicação em React, os dados geralmente fluem de um componente-pai para um componente-filho utilizando <em>props</em>, tal como vimos na secção anterior:</p><pre><code class="language-js"><WelcomeMessage myprop={'somevalue'} />
</code></pre><p>Se passares uma função para o componente-filho, podes alterar o <em>state</em> do componente-pai a partir de um componente-filho:</p><pre><code class="language-js">const [count, setCount] = useState(0)

<Counter setCount={setCount} />
</code></pre><p>Dentro do componente <em>Counter</em>, podemos agora pegar no prop <code>setCount</code> e chamá-lo para atualizar o <em>state</em> de <code>count</code> no componente-pai, quando algo acontece:</p><pre><code class="language-js">function Counter({ setCount }) {
  //...

  setCount(1)

  //...
}
</code></pre><p>É preciso saberes que existem formas mais avançadas de gerir dados, que incluem a API <em>Context</em> e bibliotecas como Redux. Estas formas, contudo, trazem mais complexidade. Em 90% das vezes, as duas maneiras que acabei de te explicar são a solução ideal.</p><h2 id="lidar-com-eventos-de-utilizador-em-react"><strong>Lidar com eventos de utilizador em React</strong></h2><p>O React fornece uma forma fácil de gerir eventos acionados a partir de eventos DOM, como cliques, eventos de formulário, entre outros.</p><p>Vamos falar sobre eventos de clique, que são bastante simples de digerir.</p><p>Podes utilizar o atributo <code>onClick</code> em qualquer elemento JSX:</p><pre><code class="language-js"><button
  onClick={(event) => {
    /* gerir o evento */
  }}
>
  Click here
</button>
</code></pre><p>Quando o elemento é clicado, a função passada para o atributo <code>onClick</code> é acionada.</p><p>Podes definir esta função fora do JSX:</p><pre><code class="language-js">const handleClickEvent = (event) => {
  /* gerir o evento */
}

function App() {
  return <button onClick={handleClickEvent}>Click here</button>
}
</code></pre><p>Quando o evento <code>click</code> é aciona no botão, o React chama a função do gestor de eventos.</p><p>O React suporta uma grande variedade de tipos de eventos, como <code>onKeyUp</code>, <code>onFocus</code>,<code>onChange</code>, <code>onMouseDown</code>, <code>onSubmit</code> e muito outros.</p><h2 id="eventos-de-ciclo-de-vida-num-componente-react"><strong>Eventos de ciclo de vida num componente React</strong></h2><p>Até agora, vimos como gerir o <em>state</em> com o <em>hook</em> <code>useState</code>.</p><p>Existe outro <em>hook</em> que te quero introduzir neste manual: <code>useEffect</code>.</p><p>O <em>hook</em> <code>useEffect</code> permite aos componentes terem acesso aos eventos de ciclo de vida de um componente.</p><p>Quando chamas o <em>hook</em>, passas-lhe uma função. A função será executada pelo React quando o componente é renderizado pela primeira vez, e em todas as re-renderizações/atualizações subsequentes.</p><p>O React atualiza primeiro o DOM, e depois chama qualquer função passada para <code>useEffect()</code>.</p><p>Tudo isto ocorre sem bloquear a renderização da UI, mesmo no código de bloqueio.</p><p>Aqui está um exemplo:</p><pre><code class="language-js">const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}
</code></pre><p>Visto que a função <code>useEffect()</code> é executada em todas as renderizações/atualizações subsequentes de um componente, podemos dizer ao React para passá-la à frente, para efeitos de desempenho. Fazemos isto ao adicionar um segundo parâmetro que é um <em>array </em>que contém uma lista de variáveis de <em>state</em> a ter em atenção.</p><p>O React irá executar novamente o efeito secundário apenas se um dos itens neste <em>array </em>for alterado.</p><pre><code class="language-js">useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
}, [name, count])
</code></pre><p>Da mesma maneira, podes dizer ao React para executar o efeito secundário apenas uma vez (no início), ao passar um <em>array </em>vazio:</p><pre><code class="language-js">useEffect(() => {
  console.log(`Component mounted`)
}, [])
</code></pre><p>Podes vir a utilizar essa opção muitas vezes.</p><p><code>useEffect()</code> é ótimo para adicionar registos, aceder a APIs externas, e muito mais.</p><h2 id="para-onde-seguir-a-partir-daqui"><strong>Para onde seguir a partir daqui</strong></h2><p>Dominar os tópicos explicados neste artigo é um grande passo no teu objetivo de aprender React.</p><p>Agora quero dar-te algumas dicas, porque é fácil perderes-te no mar de tutoriais e cursos sobre o React.</p><p>O que deves aprender a seguir? (os links citados pelo autor abaixo estão todos em inglês)</p><p>Aprende mais sobre o <a href="https://flaviocopes.com/react-virtual-dom/">DOM Virtual</a>, <a href="https://flaviocopes.com/react-declarative/">escrever código declarativo</a>, <a href="https://flaviocopes.com/react-unidirectional-data-flow/">fluxo de dados unidirecional</a>, <a href="https://flaviocopes.com/react-immutability/">imutabilidade</a>, <a href="https://flaviocopes.com/react-composition/">composição</a>.</p><p>Começa a criar algumas aplicações simples em React. Por exemplo, <a href="https://flaviocopes.com/react-example-counter/">cria um simples contador</a> ou uma <a href="https://flaviocopes.com/react-example-githubusers/">interação com uma API pública</a>.</p><p>Aprende como fazer <a href="https://flaviocopes.com/react-conditional-rendering/">renderizações condicionais</a>, como fazer <a href="https://flaviocopes.com/react-how-to-loop/">ciclos em JSX</a>, como utilizar as <a href="https://flaviocopes.com/react-developer-tools/">Ferramentas de Programador do React</a>.</p><p>Aprende como aplicar CSS numa aplicação em React, com <a href="https://flaviocopes.com/react-css/">CSS simples</a> ou <a href="https://flaviocopes.com/styled-components/">componentes estilizados</a>.</p><p>Aprende a gerir o <em>state</em> utilizando a <a href="https://flaviocopes.com/react-context-api/">API Context</a>, useContext e <a href="https://flaviocopes.com/redux/">Redux</a>.</p><p>Aprende como interagir com <a href="https://flaviocopes.com/react-forms/">formulários</a>.</p><p>Aprende como utilizar o <a href="https://flaviocopes.com/react-router/">Router do React</a>.</p><p>Aprende <a href="https://flaviocopes.com/react-testing-components/">como testar aplicações React</a>.</p><p>Aprende uma aplicação de <em>framework </em>construída sobre o React, como <a href="https://flaviocopes.com/gatsby/">Gatsby</a> ou <a href="https://flaviocopes.com/nextjs/">Next.js</a>.</p><p>Acima de tudo, não te esqueças de praticar ao criar aplicações simples para aplicar tudo o que aprendeste.</p><h2 id="conclus-o"><strong>Conclusão</strong></h2><p>Muito obrigado por leres este guia.</p><p>Espero que te inspire a aprender mais sobre o React e tudo o que podes fazer com ele!</p><p>Lembra-te que podes fazer <a href="https://flaviocopes.com/page/react-handbook/">download deste manual em PDF / ePub / e formato Mobi gratuitamente</a>, caso queiras.</p><p>O autor publica tutoriais de programação com frequência em seu site, <a href="https://flaviocopes.com/">flaviocopes.com</a>, se quiseres dar uma vista de olhos a outros bons conteúdos como este.</p><p>Podes entrar em contacto com o autor no Twitter: <a href="https://twitter.com/flaviocopes">@flaviocopes</a>.</p> 
</article>
<article>
<h1> Como identificar e resolver renderizações desnecessárias no React </h1>
<p>Ana Laura Reis — Mon, 02 Oct 2023 02:13:23 +0000</p>
 <p data-test-label="translation-intro">
        <strong>Artigo original:</strong> <a href="https://www.freecodecamp.org/news/how-to-identify-and-resolve-wasted-renders-in-react-cc4b1e910d10/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to identify and resolve wasted renders in React</a>
      </p><p>Escrito por: Nayeem Reza</p><p>Recentemente, estive analisando o desempenho de uma aplicação do React na qual eu trabalhava e, de repente, pensei em definir algumas métricas de desempenho para essa aplicação. Com isso, descobri que a primeira coisa que precisaria resolver são as renderizações desnecessárias que estou fazendo em cada uma das páginas da web. Você pode estar se perguntando o que são renderizações desnecessárias, não é mesmo? Vamos aprofundar nisso.</p><p>Desde o começo, o React mudou toda a filosofia de criação de aplicações para a web e, consequentemente, o modo como pessoas que desenvolvem o <em>front-end</em> pensam. Com a introdução do <em>Virtual DOM</em>, o React torna as atualizações de interface do usuário mais eficiente e, com isso, a experiência da aplicação para a web se torna mais "limpa". </p><p>Você já se perguntou como deixar suas aplicações em React mais rápida? Por que aplicações para a web em React de tamanho moderado continuam tendo um desempenho ruim? O problema está no modo como utilizamos o React!</p><h3 id="como-o-react-funciona">Como o React funciona</h3><p>Uma biblioteca moderna de <em>front-end</em> como o <a href="https://react.dev/">React</a> não torna nossa aplicação magicamente mais rápida. Primeiro, nós, pessoas desenvolvedoras, devemos entender como o React funciona. Como os componentes atravessam os ciclos de vida ao longo da existência da aplicação? Portanto, antes de mergulharmos em qualquer técnica de otimização, precisamos entender melhor como o React realmente funciona nos bastidores.</p><p>Na essência do React, temos a sintaxe do JSX e a poderosa habilidade do React de construir e comparar <a href="https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/">V<em>irtual DOMs</em></a><em> (texto em inglês)</em>. Desde o seu lançamento, o React influenciou muitas outras bibliotecas de <em>front-end</em>. Por exemplo, o Vue.js também depende da ideia de V<em>irtual DOMs.</em></p><p>Cada aplicação do React começa com um componente raiz. Podemos pensar na aplicação inteira como uma estrutura em forma de árvore onde cada galho é um componente. Componentes no React são 'funções' que renderizam a interface do usuário com base nos dados, ou seja, nas <em>props</em> e no <em>state</em>. Podemos representar com: <code>CF</code> (componente funcional)</p><pre><code>UI = CF(dados)</code></pre><p>Usuários interagem com a interface e causam alterações nos dados. As interações são tudo que o usuário pode fazer na nossa aplicação. Exemplos disso são: clicar em um botão, ver um carrossel de imagens, fazer solicitações a APIs. Todas essas interações alteram apenas os dados. Elas nunca causam nenhuma alteração na interface.</p><p>Aqui, os dados desempenham um papel fundamental na definição do estado de uma aplicação. Não apenas o que armazenamos em nosso banco de dados. Mesmo diferentes estados na interface do usuário, como qual aba está atualmente selecionada ou se uma caixa de seleção está marcada ou não, fazem parte desses dados. Sempre que ocorre uma alteração nos dados, o React utiliza as funções do componente para recriar a interface do usuário, mas apenas virtualmente:</p><pre><code>UI1 = CF(dados1)
UI2 = CF(dados2)</code></pre><p>O React calcula a diferença entre a interface atual e a nova interface aplicando um <a href="https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm" rel="noopener">algoritmo de comparação</a> (documentação em inglês) nas duas versões de seu <em>Virtual DOM</em>.</p><pre><code>Mudancas = Diferenca(UI1, UI2)</code></pre><blockquote>Nota da tradução: caso tente acessar a documentação apontada no parágrafo acima e mais abaixo, você verá que os links, agora, apontam para uma página de documentação legada. Ocorreram diversas mudanças tanto no React quanto em sua documentação a partir da versão 18, mas a explicação sobre o algoritmo de comparação ainda é válida para o entendimento do processo.</blockquote><p>Em seguida, o React prossegue aplicando apenas as alterações na interface do usuário (UI) real no navegador. Quando os dados associados a um componente mudam, o React determina se uma atualização na DOM "real" é necessária. Isso permite ao React evitar operações demoradas e que consomem muitos recursos no navegador, como a criação de elementos no DOM e a interação com elementos já existentes quando isso não é estritamente necessário.</p><p>Essa diferenciação e renderização repetida de componentes pode ser uma das principais fontes de problemas de desempenho no React. Criar uma aplicação em React na qual o algoritmo de diferenciação não consegue <a href="https://reactjs.org/docs/reconciliation.html">conciliar</a> (documentação em inglês) efetivamente, leva a uma renderização repetida de toda a aplicação, na verdade, resultando em <em>renderizações</em> desperdiçadas e podendo resultar em uma experiência lenta e frustrante.</p><p>Durante o processo de renderização inicial, o React constrói uma árvore DOM como esta:</p><figure class="kg-card kg-image-card"></figure><p>Suponha que uma parte dos dados mude. O que queremos que o React faça é renderizar novamente apenas os componentes que são diretamente afetados por essa mudança específica. Possivelmente, queremos que pule até mesmo o processo de diferenciação para o restante dos componentes. Vamos supor que alguns dados mudam no Componente <code>2</code> na imagem acima, e que esses dados foram passados de <code>R</code> para <code>B</code> e, depois, para <code>2</code>. Se <code>R</code> for renderizado novamente, ele também renderizará outra vez cada um de seus filhos (A, B, C e D). O que o React realmente faz é o seguinte:</p><figure class="kg-card kg-image-card"></figure><p>Na imagem acima, todos os nós amarelos são renderizados e diferenciados. Isso resulta em desperdício de tempo/recursos de computação. Aqui é onde concentrarmos principalmente nossos esforços de otimização. Configurando cada componente para renderizar e diferenciar apenas quando for necessário. Isso nos permitirá recuperar aqueles ciclos de CPU desperdiçados. Primeiro, veremos como identificar renderizações desnecessárias na nossa aplicação.</p><h3 id="identificar-renderiza-es-desnecess-rias"><strong>Id</strong>entificar renderizações desnecessárias</h3><p>Existem algumas maneiras diferentes de se fazer isso. O método mais simples é ativar a opção de <em><em>atualizações de destaque</em></em> na preferência de ferramentas de desenvolvimento do React.</p><figure class="kg-card kg-image-card"></figure><p>Durante a interação com a sua aplicação, as atualizações são destacadas na tela com bordas coloridas. Você verá os componentes que foram renderizados novamente. Isso nos permite identificar novas renderizações que não eram necessárias.</p><p>Vamos seguir este exemplo:</p><figure class="kg-card kg-image-card"></figure><p>Observe que, quando inserimos uma segunda tarefa, a primeira tarefa também pisca na tela a cada tecla pressionada. Isso significa que ela está sendo renderizada novamente pelo React juntamente com a entrada. Chamamos esse acontecimento de renderização "desnecessária". Sabemos que é desnecessária porque o conteúdo da primeira tarefa não mudou, mas o React não sabe disso.</p><p>Mesmo que o React atualize apenas os nós do DOM que foram alterados, a nova renderização ainda leva algum tempo. Em muitos casos, isso não é um problema, mas, se a lentidão for perceptível, devemos considerar algumas coisas para impedir essas renderizações redundantes. </p><h3 id="usando-o-m-todo-shouldcomponentupdate"><strong>Usando o método <em>shouldComponentUpdate</em> </strong></h3><p>Por padrão, O React renderizará o virtual DOM e comparará a diferença de cada componente na árvore para qualquer alteração em suas <em>props</em> ou <em>state</em>. Isso, no entanto, não é uma boa opção. À medida que nossa aplicação cresce, tentar renderizar novamente e comparar toda virtual DOM em cada ação acabará tornando tudo mais lento.</p><p>O React, então, fornece um método de ciclo de vida simples para indicar se um componente precisa de uma nova renderização. Isso é feito através de <code>shouldComponentUpdate</code>, que é acionado antes do início do processo da nova renderização. A implementação padrão dessa função retorna <code>true</code>.</p><figure class="kg-card kg-image-card"></figure><p>Quando essa função retorna <code>true</code> para qualquer componente, ela permite que o processo de diferenciação de renderização seja acionado. Isso nos dá o poder de controlar esse processo de diferenciação. Suponha que precisemos evitar que um componente seja renderizado novamente, precisamos apenas retornar <code>false</code> dessa função. Como podemos ver na implementação do método, podemos comparar as props e <em>state</em> atuais e próximos para determinar se uma nova renderização é necessária.</p><figure class="kg-card kg-image-card"></figure><h3 id="uso-de-componentes-puros"><strong>Uso de componentes puros</strong></h3><p>Você já deve conhecer o <code>React.Component</code>, mas e <code>React.PureComponent</code>? Nós já falamos aqui sobre o método de ciclo de vida <code>shouldComponentUpdate</code>. Em componentes puros, já existe uma implementação padrão de <code>shouldComponentUpdate()</code> com uma comparação rasa de <em>props </em>e <em>state</em>. Portanto, um componente puro é um componente que apenas é renderizado novamente se as <em>props</em> e o <em>state</em> forem diferentes dos anteriores.</p><figure class="kg-card kg-image-card"></figure><blockquote>Na comparação rasa, tipos de dados primitivos como string, booleano e número são comparados pelo seu valor, enquanto tipos de dados complexos como array, objeto e função são comparados pela referência.</blockquote><p>Se tivermos um componente funcional sem <em>state</em> em que precisamos implementar esse método de comparação antes que cada nova renderização ocorra, como podemos fazer isso? O React possui um Componente de Ordem Superior, chamado <code>React.memo</code>. É semelhante ao <code>React.PureComponent</code>, mas para componentes funcionais em vez de classes.</p><figure class="kg-card kg-image-card"></figure><p>Por padrão, ele faz o mesmo que o <code>shouldComponentUpdate()</code>, que apenas compara superficialmente o objeto de <em>props</em>. Se, contudo, quisermos ter o controle sobre essa comparação, o que faremos? Também podemos fornecer uma função de comparação customizada como segundo argumento.</p><figure class="kg-card kg-image-card"></figure><h3 id="tornar-os-dados-imut-veis">Tornar os dados imutáveis</h3><p><br>Poderíamos usar um <code>React.PureComponent</code> e ainda ter uma maneira eficiente de detectar automaticamente quando qualquer <em>prop</em> complexa ou <em>state </em>– como um <em>array</em>, objeto ou outras opções – fossem alterados? É aqui que a estrutura de dados imutáveis torna a vida mais fácil.</p><p>A ideia por trás do uso de estruturas de dados imutáveis é simples. Como falamos anteriormente, para tipos de dados complexos, a comparação é feita com base em suas referências. Sempre que um objeto contendo dados complexos é alterado, em vez de fazer as alterações nesse objeto, podemos criar uma cópia desse objeto com as alterações, o que criará uma referência.</p><p>O ES6 possui o operador de <em>spread</em> que torna isso possível.</p><figure class="kg-card kg-image-card"></figure><p>Podemos fazer o mesmo com <em>arrays</em>:</p><figure class="kg-card kg-image-card"></figure><h3 id="evite-passar-uma-nova-refer-ncia-para-os-mesmos-dados-antigos">Evite passar uma nova referência para os mesmos dados antigos</h3><p>Sabemos que sempre que <code>props</code> de um componente mudam, uma nova renderização acontece. Às vezes, porém, as <code>props</code> não mudam. Escrevemos o código de um modo que o React pensa que mudou, e isso acaba causando uma nova renderização. Dessa vez, no entanto, é uma renderizacão desnecessária. Então, basicamente, precisamos garantir que estamos passando uma referência diferente como <em>props</em> para dados diferentes. Além disso, precisamos evitar passar uma nova referência para os mesmos dados. Agora, vamos analisar alguns casos em que estamos criando esse problema. Veja o código abaixo:</p><figure class="kg-card kg-image-card"></figure><p>Aqui está o conteúdo do componente <code>BookInfo</code>, onde estamos renderizando dois componentes, <code>BookDescription</code> e <code>BookReview</code>. Esse é o código correto e funciona bem, mas há um problema. <code>BookDescription</code> será renderizado novamente sempre que recebermos novos dados de avaliações como <em>props</em>. Por quê? Assim que o componente <code>BookInfo</code> recebe novas <em>props</em>, a função <code>render</code> é chamada para criar a sua árvore de elementos. A função de renderização cria uma constante <code>book</code>, o que significa criar outra referência. Portanto, <code>BookDescription</code> receberá <code>book</code> como uma nova referência, o que causará uma nova renderização de <code>BookDescription</code>. Para resolver isso, vamos refatorar esse código do seguinte modo: </p><figure class="kg-card kg-image-card"></figure><p>Agora, a referência é sempre a mesma, <code>this.book</code>. Um outro objeto não é criado durante a renderização. Essa filosofia de nova renderização se aplica a todas as <em>props</em>, incluindo eventos, como abaixo:</p><figure class="kg-card kg-image-card"></figure><p>Aqui, usamos duas maneiras diferentes (vincular métodos e usar uma <em>arrow function</em> na renderização) para chamar os métodos manipuladores de eventos, mas ambas criarão uma função sempre que o componente for renderizado novamente. Para resolver esses problemas, podemos vincular o método no <code>constructor</code> e usar propriedades de classe, o que ainda é experimental e não padronizado, mas muitos desenvolvedores já estão usando para passar funções para outros componentes em aplicações prontas para produção:</p><figure class="kg-card kg-image-card"></figure><h3 id="conclus-o">Conclusão</h3><p>Internamente, o React utiliza diversas técnicas inteligentes para minimizar a quantidade de operações custosas no DOM e necessárias para atualizar a interface do usuário. Para muitas aplicações, o uso do React resultará em uma interface de usuário rápida sem a necessidade de fazer muito trabalho para otimizar o desempenho especificamente. No entanto, se conseguirmos seguir as técnicas que mencionei acima para resolver as renderizações desnecessárias, então, para aplicações grandes, também teremos uma experiência muito fluida em termos de desempenho.</p> 
</article>
<article>
<h1> Como configurar e fazer o deploy da sua aplicação React do zero usando o Webpack e o Babel </h1>
<p>Felipe Archanjo — Tue, 26 Sep 2023 15:21:25 +0000</p>
 <p data-test-label="translation-intro">
        <strong>Artigo original:</strong> <a href="https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to set up & deploy your React app from scratch using Webpack and Babel</a>
      </p><blockquote>Nota de tradução: assim como em outros artigos mais antigos sobre React, enfatizamos que, a partir da versão 18 do React, muitas modificações ocorreram e é possível que, tendo a versão mais recente instalada, as configurações feitas neste projeto não funcionem. Para o projeto funcionar, é preciso a instalação da versão sugerida no projeto.</blockquote><p>Você já vem usando o <em>create-react-app</em>, também conhecido como CRA, há algum tempo. É ótimo e você pode começar a programar diretamente. Porém, quando você precisar sair do <em>create-react-app</em> e começar a configurar sua própria aplicação do React, haverá um momento em que precisará abrir mão do controle automático e começar a explorar por conta própria.</p><p>Este guia abordará uma configuração mais simples do React que, pessoalmente, tenho usado em quase todos os meus projetos com React. Ao final deste tutorial, teremos nosso próprio esqueleto (em inglês, <em>boilerplate</em>) pessoal e aprenderemos algumas configurações a partir dele.</p><h4 id="-ndice"><strong>Índice</strong></h4><ul><li>Por que criar sua própria configuração?</li><li>Configurando o Webpack 4</li><li>Configurando o Babel 7</li><li>Adicionando o Prettier</li><li>Adicionando mapa de origem para obter melhores logs de erro</li><li>Configurando o ESLint</li><li>Encontrei erros! O que faço agora?</li><li>Adicionando o processador de CSS LESS</li><li>Fazendo o <em>deploy </em>da aplicação do React no Netlify</li><li>Conclusão</li></ul><h3 id="por-que-criar-sua-pr-pria-configura-o">Por que criar sua própria configuração?</h3><p>Existem razões específicas que tornam a criação da sua própria configuração do React algo sensato a se fazer. Provavelmente, você já está familiarizado com o React e deseja aprender a usar ferramentas como o Webpack e o Babel por conta própria. Essas ferramentas de construção são poderosas. Se tiver um tempo extra, sempre é bom aprender mais sobre elas.</p><p>Os desenvolvedores são naturalmente pessoas curiosas. Se você sente que gostaria de saber como as coisas funcionam e qual parte faz o quê, deixe-me ajudá-lo com isso.</p><p>Além disso, ocultar a configuração do React por meio do <em>create-react-app</em> é voltado para desenvolvedores que estão começando a aprender React, já que a configuração não deve ser um obstáculo para começar. No entanto, quando as coisas ficam mais sérias, é claro que você precisa de mais ferramentas para integrar ao seu projeto. Pense em:</p><ul><li>Adicionar carregadores do Webpack para LESS e SASS</li><li>Realizar a renderização no lado do servidor</li><li>Usar novas versões do ES</li><li>Adicionar MobX e Redux</li><li>Criar sua própria configuração apenas para fins de aprendizado</li></ul><p>Se você procurar pela Internet, encontrará alguns truques para contornar as limitações do CRA, como o "<em>create-react-app rewired</em>". Por que não aprender a configurar o React por conta própria, no entanto? Eu vou ajudar você a chegar lá, passo a passo.</p><p>Agora que você está convencido a aprender um pouco sobre configuração, vamos começar iniciando um projeto em React do zero.</p><p>Abra o prompt de comando ou o Git bash e crie um diretório.</p><pre><code>mkdir react-config-tutorial && cd react-config-tutorial</code></pre><p>Inicialize o projeto com o NPM executando:</p><pre><code>npm init -y</code></pre><p>Agora, instale o React:</p><pre><code>npm install react react-dom</code></pre><p>Além disso, você pode visualizar o código-fonte no GitHub enquanto lê este tutorial para obter explicações sobre as configurações.</p><h3 id="configurando-o-webpack-4">Configurando o Webpack 4</h3><blockquote>Nota da tradução: o próprio Webpack recomendado neste tutorial está na versão 4. No momento da tradução, a versão do Webpack é a versão 5.</blockquote><p>Nosso primeiro passo será configurar o Webpack. É uma ferramenta muito popular e poderosa para configurar não apenas o React, mas também quase todos os projetos de <em>front-end</em>. A função principal do Webpack é pegar vários arquivos JavaScript que escrevemos em nosso projeto e transformá-los em um único arquivo minificado, para que ele seja rápido de ser servido. A partir do Webpack 4, não é mais necessário escrever um arquivo de configuração para usá-lo, mas neste tutorial escreveremos um para entendermos melhor.</p><p>Primeiro, vamos fazer algumas instalações</p><pre><code>npm install --save-dev webpack webpack-dev-server webpack-cli</code></pre><p>Isso instalará:</p><ul><li><strong><strong>webpack</strong></strong> — que inclui todas as funcionalidades principais do Webpack</li><li><strong><strong>webpack-dev-server</strong></strong> — esse servidor de desenvolvimento executa automaticamente o Webpack novamente quando nosso arquivo é alterado</li><li><strong><strong>webpack-cli</strong></strong> — permite executar o Webpack a partir da linha de comando</li></ul><p>Vamos tentar executar o Webpack adicionando o seguinte script ao arquivo <code>package.json</code>:</p><pre><code class="language-js">"scripts": {
 "start": "webpack-dev-server --mode development",
},</code></pre><p>Agora, crie um arquivo <code>index.html</code> na raiz do seu projeto com o seguinte conteúdo:</p><pre><code class="language-html"><!DOCTYPE html>
<html>
 <head>
 <title>My React Configuration Setup

Crie um diretório chamado src e, dentro dele, crie um arquivo chamado index.js.

mkdir src && cd src && touch index.js

Então, escreva um componente do React no arquivo:

import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
  render() {
    return Hello World from React boilerplate;
  }
}
ReactDOM.render(, document.getElementById("root"));

Execute o Webpack usando npm run start … Ocorrerá um erro.

You may need an appropriate loader to handle this file type

"Você pode precisar de um carregador adequado para lidar com esse tipo de arquivo"

Configurando o Babel 7

O componente do React que escrevemos acima utilizou a sintaxe de classe, que é uma característica do ES6. O Webpack precisa do Babel para processar o ES6 em sintaxes do ES5, a fim de que essa classe funcione.

Vamos instalar o Babel no nosso projeto:

npm install --save-dev @babel/core @babel/preset-env \@babel/preset-react babel-loader

Por que precisamos desses pacotes?

@babel/core é a dependência principal que inclui o script de transformação do Babel.
@babel/preset-env é o preset padrão do Babel usado para transformar ES6+ em código ES5 válido. Opcionalmente, configura automaticamente polyfills do navegador.
@babel/preset-react é usado para transformar JSX e a sintaxe de classe do React em código JavaScript válido.
babel-loader é um loader do Webpack que conecta o Babel ao Webpack. Vamos executar o Babel a partir do Webpack usando este pacote.

Para integrar o Babel ao nosso Webpack, precisamos criar um arquivo de configuração do Webpack. Vamos criar um arquivo webpack.config.js:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }
    ]
  },
};

Esta configuração do Webpack basicamente está dizendo que o ponto de entrada (em inglês, entry)) da nossa aplicação é index.js, então pegue tudo o que é necessário por esse arquivo e coloque a saída (em inglês, output) do processo de agrupamento (bundling) no diretório dist, com o nome bundle.js. Ah, se estivermos executando no webpack-dev-server, diga ao servidor para servir o conteúdo a partir da configuração contentBase, que é também o diretório onde a configuração está. Para os arquivos .js ou .jsx, utilize o babel-loader para transpilar todos eles.

Para usar os presets do Babel, crie um arquivo .babelrc.

touch .babelrc

Escreva o seguinte conteúdo:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Agora, execute npm run start novamente. Dessa vez, funcionará.

Adicionando o Prettier

Para acelerar ainda mais o desenvolvimento, vamos criar um formatador de código usando o Prettier. Instale a dependência localmente e use o argumento --save-exact, já que o Prettier introduz mudanças estilísticas em lançamentos de correções.

npm install --save-dev --save-exact prettier

Agora, precisamos escrever o arquivo de configuração .prettierrc:

{
 "semi": true,
 "singleQuote": true,
 "trailingComma": "es5"
}

As regras significam que queremos adicionar ponto e vírgula no final de cada instrução, usar aspas simples sempre que apropriado e adicionar vírgulas finais para código ES5 com várias linhas, como objetos ou arrays.

Você pode executar o Prettier a partir da linha de comando com:

npx prettier --write "src/**/*.js"

Também é possível adicionar um novo script ao arquivo package.json:

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack-dev-server --mode development",
 "format": "prettier --write \"src/**/*.js\""
},

Agora, podemos executar o Prettier usando npm run format.

Além disso, se você estiver usando o VSCode para desenvolvimento, pode instalar a extensão do Prettier e executá-la toda vez que salvar suas alterações, adicionando esta configuração:

"editor.formatOnSave": true

Adicionando mapa de origem para obter melhores logs de erro

Uma vez que o Webpack empacota o código, os mapas de origem são obrigatórios para obter uma referência ao arquivo original que gerou um erro. Por exemplo, se você empacotar três arquivos de origem (a.js, b.js, e c.js) em um único pacote (bundler.js) e um dos arquivos de origem contiver um erro, o rastreamento de pilha simplesmente apontará para bundle.js. Isso é problemático, pois você provavelmente deseja saber exatamente se é o arquivo a, b ou c que está causando um erro.

Você pode instruir o Webpack a gerar mapas de origem usando a propriedade devtool na configuração:

module.exports = {
  devtool: 'inline-source-map',
  // … o resto da configuração
};

Embora isso possa tornar a compilação mais lenta, não afeta a produção. Os sourcemaps só são baixados se você abrir as ferramentas de desenvolvimento do navegador (DevTools) (texto em inglês).

Configurando o ESLint

Um linter é um programa que verifica nosso código em busca de erros ou avisos que possam causar bugs. O linter do JavaScript, o ESLint, é um programa de linting muito flexível que pode ser configurado de várias maneiras.

Antes de prosseguirmos, contudo, vamos instalar o ESLint em nosso projeto:

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react

O eslint é a dependência principal para todas as funcionalidades, enquanto o eslint-loader nos permite integrar o eslint ao Webpack. Agora, como o React usa a sintaxe ES6+, vamos adicionar o babel-eslint — um analisador que permite que o eslint verifique todos os códigos ES6+ válidos.
eslint-config-react e eslint-plugin-react são ambos usados para permitir que o ESLint utilize regras pré-definidas.

Como já temos o Webpack, só precisamos modificar a configuração ligeiramente:

module.exports = {
  // modify the module
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'] // include eslint-loader
    }]
  },
};

Em seguida, crie um arquivo de configuração do ESLint chamado .eslintrc com este conteúdo:

{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

A configuração basicamente está dizendo, "Ei, ESLint, por favor, analise o código usando o babel-eslint antes de verificá-lo e, ao fazer a verificação, verifique se todas as regras do nosso arquivo de configuração de regras do React estão sendo cumpridas. Pegue as variáveis globais do ambiente do navegador e do Node. Ah, e se for código do React, pegue a versão do próprio módulo. Desse modo, o usuário não precisará especificar a versão manualmente."

Em vez de especificar nossas próprias regras manualmente, simplesmente estendemos as regras do react, que foram disponibilizadas por eslint-config-react e eslint-plugin-react.

Encontrei erros! O que faço agora?

Infelizmente, a única maneira de realmente descobrir como corrigir erros do ESLint é olhando a documentação das regras. Há uma maneira rápida de corrigir erros do ESLint usando eslint--fix. Na verdade, isso é útil para uma correção rápida. Vamos adicionar um script ao nosso arquivo package.json:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --mode development",
  "format": "prettier --write \"src/**/*.js\"",
  "eslint-fix": “eslint --fix \"src/**/*.js\"", // the eslint script
  "build": "webpack --mode production"
},

Em seguida, execute-o com npm run eslint-fix. Não se preocupe se você ainda não está muito familiarizado com o ESLint por enquanto. Você aprenderá mais sobre o ESLint à medida que o utilizar.

Adicionando o processador de CSS LESS

Para adicionar o processador LESS à nossa aplicação do React, precisaremos dos pacotes less e loader do Webpack:

npm install --save-dev less less-loader css-loader style-loader

O less-loader compilará nosso arquivo less em CSS, enquanto o css-loader resolverá a sintaxe do CSS, como import or url(). O style-loader pegará nosso CSS compilado e o carregará na tag

React - 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 próprio hook do React: um guia passo a passo

1. useCopyToClipboard

Como criar a função handleCopy

Como utilizar o hook useCopyToClipboard

Como adicionar um intervalo de reinicialização

Resultado

2. hook usePageBottom

Como criar o hook

Como obter a largura e altura da janela

Como adicionar suporte a Server Side Rendering

Como remover o event listener de redimensionamento

Resultado

3. hook useDeviceDetect

Como criei o hook

Como descobrir o User Agent através da window

Como checar se userAgent é um dispositivo móvel

Resultado

Conclusão

Torne-se um desenvolvedor de React profissional

Como construir um menu acordeão em React a partir do zero – sem necessidade de bibliotecas externas

Configuração inicial do projeto

Como criar as páginas iniciais

React Accordion Demo

Como abrir e fechar o menu acordeão

Como adicionar várias secções em acordeão

React Accordion Demo

Como refatorar o código

React Accordion Demo

Pontos finais

Obrigado pela leitura!

Como implantar uma aplicação do React em produção na AWS usando Express, Postgres, PM2 e nginx

Teoria

Prática

Teoria

Como funciona a rede na computação em nuvem

Endereços IP públicos x privados

IPv4

Conectando-se à rede pública a partir de uma rede privada

VPC e sub-redes

AWS EC2

SSH

Prática

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

Como criar a função `handleCopy`

Como descobrir o User Agent através da `window`

Obter elemento pelo valor de `data-testid`

**1. Como criar um snapshot de teste**

`{ counter }`