O que é React?

Uma página com um botão que conta cliques precisa manter o número sincronizado com cada clique. Em JavaScript puro, você pega o nó de texto do botão, adiciona um listener de clique e atualiza o número manualmente cada vez que alguém clica. Adicione um filtro de busca, um total de carrinho de compras e um modal que abre e fecha, e você terá um monte de atualizações manuais espalhadas pelo código, cada uma delas um lugar onde um bug pode aparecer quando os dados mudam em outro lugar da página.

React é uma biblioteca JavaScript para construir interfaces de usuário a partir de componentes, e ela tira esse trabalho manual de você. Este capítulo mostra o que isso significa na prática: a ideia central por trás do React, onde funciona e como se encaixa na questão biblioteca-versus-framework que surge cedo para a maioria das pessoas que estão aprendendo.

Componentes e a ideia central

Aqui está esse mesmo contador de cliques escrito como um componente React:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

Este exemplo usa algumas coisas que você ainda não conhece: a marcação dentro de return é JSX, useState é um hook, e onClick é um manipulador de eventos. Os capítulos Components e JSX cobrem essa marcação, State cobre useState em detalhes, e Events cobre onClick, então confie na sintaxe por enquanto e siga a forma da ideia.

count é o estado. O JSX retornado por Counter descreve o que o botão deve mostrar para esse estado. Clicar no botão chama setCount, que atualiza count, e React renderiza novamente o botão para corresponder. Você nunca toca o texto do botão diretamente. Você o descreve novamente para o novo valor, e React descobre o que mudou na página.

Essa é a ideia central em todo componente React: você descreve a interface como uma função de seus dados, geralmente chamado estado, e React cuida de atualizar o DOM para corresponder. Um componente é uma função que retorna um pedaço de interface, e um app é uma árvore de componentes combinados, todos funcionando da mesma forma que o contador acima.

O contraste que vale a pena nomear com precisão é declarativo versus imperativo. Código imperativo, manipulação pura do DOM, detalha os passos: encontre este elemento, mude seu texto, adicione esta classe. Código declarativo, o que um componente retorna, detalha o estado final: dados estes, aqui está o que o botão deve mostrar. React executa os passos no meio.

Esses passos passam por um virtual DOM: uma representação em memória leve da interface que React constrói a partir do que seus componentes retornam, compara com a versão anterior e usa para descobrir o menor conjunto de mudanças reais do DOM necessárias. Isso existe, e é bom deixar de lado por enquanto. Você não cria, não lê e não o gerencia diretamente; é o mecanismo interno do React para a metade "fazer o DOM corresponder" do modelo.

Isso deixa um modelo mental que vale a pena manter para o resto deste manual: UI = f(state). Um componente é uma função de seus dados, e hooks, re-renders e efeitos são todos construídos em cima dessa ideia única. A maioria do que parece um conceito React separado depois é realmente uma consequência dessa.

Onde React funciona

React funciona principalmente no navegador, renderizando componentes para o DOM. Esse é o ambiente em que este manual permanece ao longo do tempo.

O modelo de componentes do React não está vinculado especificamente ao DOM. Outros renderizadores conectam o mesmo modelo a diferentes destinos. O exemplo mais conhecido é React Native, que usa os componentes e o modelo de estado do React para impulsionar interfaces móveis nativas em vez de uma página web. É mencionado aqui para que o nome não seja uma surpresa depois. Ensiná-lo está fora do escopo deste manual.

Biblioteca ou framework?

React renderiza a interface. Ele não traz roteamento, não decide como você carrega dados e não trata renderização no servidor. Essas são escolhas que você faz, muitas vezes buscando outra ferramenta junto com ela. Essa é a razão prática pela qual React é considerado uma biblioteca em vez de um framework completo: ele faz um trabalho bem e deixa o resto para você, em vez de possuir o app inteiro como um framework faz.

The kinds of frameworks cobre essa distinção em detalhes, incluindo onde React se encaixa ao lado de algo como Next.js, que adiciona as peças que faltam.

JunoUI como uma função do estado Tudo em React se resume a um hábito: descreva como a tela deve parecer com os dados que você tem, e deixe React lidar com a mudança. Você não coloca a mão na página e a edita manualmente, você diz como ela deve aparecer, e React se atualiza. Onde funciona, no navegador ou em algo como React Native, é um detalhe para depois. O hábito é o que importa agora.

JunoUI como uma função do estado Crie o hábito de escrever componentes como uma função do estado: dados estes, renderize isto. Isso é o que você está fazendo toda vez, seja uma contagem de cliques em um botão ou uma página inteira. React lida com as atualizações do DOM para que você não as escreva manualmente, e chamá-lo de biblioteca em vez de framework é preciso: ele renderiza a interface e deixa roteamento, carregamento de dados e estratégia de renderização para você.

JunoUI como uma função do estado Mantenha UI = f(state) como o quadro para tudo que vem a seguir. Componentes são funções de dados, o virtual DOM é a própria contabilidade do React para transformar uma renderização no próximo conjunto de mudanças do DOM, e declarativo vence imperativo aqui porque você para de rastrear os passos de atualização. É por isso que é considerado uma biblioteca em vez de um framework: para na renderização e deixa roteamento, busca de dados e renderização no servidor para o que quer que você combine com ela.

A seguir: History and versions, que cobre como React chegou aqui e o que mudou de versão para versão.