O que é React? A biblioteca JavaScript de interfaces

React é uma biblioteca JavaScript para construir interfaces de usuário a partir de componentes. Você descreve como a tela deve ficar para os dados atuais e, quando os dados mudam, o React atualiza a página para combinar com eles. React, React JS e ReactJS são a mesma coisa: uma biblioteca open source criada no Facebook (hoje Meta).

import { useState } from 'react';

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

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Clique nos dois botões. Cada Counter guarda seu próprio número, porque cada um é uma cópia separada do componente com o próprio estado. Adicione uma terceira linha, <Counter label="Plums" />, e aparece um novo contador independente.

Esse exemplo curto já mostra as três ideias em que o React se apoia: componentes (Counter e App são funções que retornam UI), JSX (a sintaxe parecida com HTML dentro do return) e estado (count, um valor que faz o React redesenhar o componente quando muda).

O problema que o React resolve

Uma interface de usuário é uma imagem de alguns dados. Quando os dados mudam, a imagem também precisa mudar, e cada parte da tela que depende desses dados precisa mudar junto. Sem uma biblioteca, você escreve esse código à mão: encontra cada elemento e define você mesmo o texto, a classe ou a visibilidade dele. Cada nova funcionalidade acrescenta mais um lugar que você precisa lembrar de atualizar.

O React inverte isso. Você escreve uma função que diz como a tela deve ser para um determinado estado, e o React descobre quais partes da página precisam mudar. Isso se chama UI declarativa, em oposição ao código imperativo, que lista cada mudança no DOM passo a passo. Aqui estão os dois estilos lado a lado em um exemplo:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

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

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand entrega seu parágrafo para código DOM puro (o efeito só executa esse código depois que o React criou o parágrafo). Ele guarda o número em uma variável, encontra cada elemento com querySelector e define o texto à mão. Declarative só diz "mostre a contagem e mostre se ela é par". Apague a linha de handleClick que define .parity e clique algumas vezes: a primeira linha agora afirma que 3 é par, enquanto a segunda não consegue ficar dessincronizada, porque o texto é calculado a partir de count em toda renderização.

Como o React atualiza a página

Quando o estado muda, o React chama de novo a função do seu componente. Essa chamada é uma renderização. A função retorna uma descrição nova da UI, o React a compara com a anterior e muda só as partes da página real que são diferentes. Muita gente chama essa descrição em memória de virtual DOM.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Abra o console abaixo da prévia e digite algumas letras. Cada tecla registra uma renderização com o novo valor. O input mantém o foco e a posição do cursor, porque o React só mexeu no texto do parágrafo e no valor do input, não na página inteira. A página sobre renderização explica exatamente quando um componente renderiza de novo.

Componentes, JSX e estado num relance

Componentes são funções JavaScript cujos nomes começam com letra maiúscula. Eles retornam o que deve aparecer na tela, e você os usa como tags HTML: <Counter />. Uma página é uma árvore de componentes, dos pequenos, como um botão, aos grandes, como uma tela inteira de configurações. Veja componentes.

JSX é a sintaxe que permite escrever marcação dentro do JavaScript. As chaves voltam para o JavaScript, então {count} mostra um valor e {items.map(...)} transforma um array em uma lista. Uma ferramenta de build compila o JSX em chamadas de função comuns antes de o navegador executá-lo.

Estado são dados que um componente lembra entre renderizações. Você o cria com o hook useState, e chamar o setter dele é como você avisa o React de que algo mudou. Os dados descem dos pais para os filhos por meio das props, que são os argumentos de um componente.

Este exemplo usa todos eles: uma lista renderizada a partir de um array no estado e um formulário que adiciona itens a ela.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Adicione uma tarefa e duas coisas mudam ao mesmo tempo: a lista e a contagem abaixo dela. Você nunca mandou a contagem atualizar. As duas leem tasks, então as duas acompanham. Troque o array inicial por [] e a lista mostra "Nothing to do." no lugar.

O que o React não é

O React é uma biblioteca, não um framework completo. Ele cobre componentes, estado e a transformação deles em UI, e deixa de fora de propósito várias coisas de que uma aplicação completa precisa:

• Roteamento. Não há uma forma embutida de mapear URLs para páginas. O React Router e os roteadores dos frameworks preenchem essa lacuna.
• Busca de dados e renderização no servidor. O React oferece ferramentas como efeitos e Suspense, mas não tem opinião sobre de onde vêm os dados nem sobre como as páginas são renderizadas em um servidor.
• Uma configuração de build. Os navegadores não entendem JSX, então você precisa de uma ferramenta como o Vite para compilá-lo.

Os frameworks se apoiam no React para fornecer essas partes. O Next.js e o modo framework do React Router adicionam roteamento, renderização no servidor e carregamento de dados, e a equipe do React recomenda começar uma aplicação completa com um deles. Para uma aplicação client-side ou para aprender, Vite com React puro é um ponto de partida pequeno e rápido; veja como instalar o React.

React vs React Native

O React em si só descreve componentes e como eles mudam. Um renderizador separado os transforma em algo que você pode ver. O React DOM renderiza em páginas web, que é o que todos os exemplos deste site usam. O React Native renderiza o mesmo tipo de componente em views nativas de iOS e Android, então você escreve <View> e <Text> em vez de <div> e <p>, e não há arquivo HTML nem CSS. Componentes, props, estado e hooks funcionam igual nos dois, então o que você aprende aqui vale diretamente lá.

Quando aprender React

Aprenda React depois do básico de JavaScript, porque tudo no React é JavaScript. Antes de começar, você deve estar à vontade com:

• variáveis, funções e arrow functions
• arrays e seus métodos map e filter
• objetos, desestruturação e a sintaxe spread (...)
• import e export
• promises e async/await, para carregar dados

Se isso parece familiar, comece por JSX e componentes, depois props e estado. Efeitos, refs, context e ferramentas de performance vêm mais tarde, quando construir pequenos componentes interativos já parecer natural.