O que é React?

Uma página com um botão que conta cliques precisa manter o número sincronizado a 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ê tem um monte de atualizações manuais espalhadas pelo código agora, cada uma um lugar onde um bug pode aparecer quando os dados mudam em outro lugar na 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 explora o que isso significa na prática: a ideia central por trás do React, onde é executado e como se encaixa na questão biblioteca-versus-framework que aparece cedo para a maioria das pessoas que o aprendem.

Componentes e a ideia central

Aqui está o 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)}>
      Clicado {count} vezes
    </button>
  )
}

Este exemplo usa algumas coisas que você ainda não viu: o código dentro de return é JSX, useState é um hook, e onClick é um event handler. Os capítulos Components e JSX cobrem esse código, State cobre useState em detalhes, e Events cobre onClick, então confie na sintaxe por enquanto e siga a estrutura da ideia.

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

Essa é a ideia central que fica sob cada componente React: você descreve a interface como uma função dos seus dados, geralmente chamado state, e React se encarrega 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 do mesmo jeito que o contador acima.

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

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

O que sobra é um modelo mental que vale a pena levar para o resto deste handbook: UI = f(state). Um componente é uma função dos seus dados, e hooks, re-renders e effects são todos construídos sobre essa única ideia. A maioria do que parece um conceito React separado mais tarde é realmente uma consequência dessa um.

Onde React é executado

React é executado principalmente no navegador, renderizando componentes para o DOM. Esse é o ambiente em que este handbook permanece durante todo o tempo.

O modelo de componentes do React não é específico do DOM. Outros renderers conectam o mesmo modelo em diferentes destinos. O exemplo mais conhecido é React Native, que usa os componentes e o modelo de state do React para conduzir 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 handbook.

Biblioteca ou framework?

React renderiza interface. Não vem com roteamento, não decide como você carrega dados e não gerencia renderização no servidor. Essas são escolhas que você faz você mesmo, geralmente alcançando outra ferramenta junto com ele. Essa é a razão prática pela qual React é considerado uma biblioteca em vez de um framework completo: faz um trabalho bem e deixa o resto para você, em vez de controlar o app inteiro como um framework faz.

Os tipos de frameworks cobre essa distinção em detalhes, incluindo onde React fica ao lado de algo como Next.js, que adiciona as peças faltantes.

JunoInterface como uma função do state O todo do React se resume a um hábito: descreva como a tela deve parecer para os dados que você tem, e deixe o React lidar com a mudança. Você não alcança a página e a edita manualmente, você diz o que deve mostrar, e React acompanha.

Onde é executado, no navegador ou algo como React Native, é um detalhe para depois. O hábito é o que importa agora.

JunoInterface como uma função do state Desenvolva o hábito de escrever componentes como uma função do state: dados esses dados, renderize 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 você não escrevê-las manualmente, e chamá-lo de biblioteca em vez de framework é preciso: ele renderiza interface e deixa roteamento, carregamento de dados e estratégia de renderização para você.

JunoInterface como uma função do state Mantenha UI = f(state) como o marco para tudo que vem depois. Componentes são funções de dados, o virtual DOM é a própria contabilidade do React para transformar um render no próximo conjunto de mudanças do DOM, e declarativo vence imperativo aqui porque você para de acompanhar os passos de atualização você mesmo.

É por isso que é considerado uma biblioteca em vez de um framework: ele para na renderização e deixa roteamento, busca de dados e renderização no servidor para o que quer que você pareie com ele.

Próximo: História e versões, que cobre como React chegou aqui e o que mudou versão a versão.