React: O Guia Definitivo

1. Introdução: Por que o React existe?

Em 2011, o Facebook tinha um problema grave: as atualizações de status e o chat piscavam, travavam e dessincronizavam. Manter o DOM (a tela) atualizado manualmente usando JavaScript ou jQuery era insustentável em uma aplicação daquele tamanho.

O engenheiro Jordan Walke criou o React com uma premissa radical: "E se, em vez de tentarmos alterar a tela manualmente, nós apenas descrevêssemos como ela deve ser, e deixássemos o código descobrir como atualizá-la?"

Assim nasceu a UI Declarativa. Você não diz "Adicione uma classe no botão". Você diz "O botão é azul". Se o estado mudar, o React se vira para pintar o botão.

2. Arquitetura: A Mágica do Virtual DOM

O segredo da performance do React é o Virtual DOM. Manipular o HTML real é lento e custoso para o navegador.

• A Cópia Virtual: O React mantém uma cópia leve da sua interface na memória (JavaScript).
• O Algoritmo de Reconciliação (Diffing): Quando um dado muda, o React compara a Cópia Nova com a Cópia Antiga.
• A Atualização Cirúrgica: Ele detecta exatamente o que mudou (ex: apenas o texto de um <span>) e atualiza somente aquilo no DOM real. O resto da página nem percebe.

3. Instalação Moderna (Adeus, Create-React-App)

Antigamente usava-se o create-react-app. Hoje, ele é lento e pesado. O padrão da indústria em 2026 é usar o Vite.

Passo a Passo:

1. Abra seu terminal e garanta que tem o Node.js instalado.

2. Rode o comando de criação:

npm create vite@latest meu-projeto-react -- --template react

3. Entre na pasta, instale as dependências e rode:

cd meu-projeto-react
npm install
npm run dev

Agora acesse http://localhost:5173. Você verá o ambiente rodando instantaneamente.

4. Conceitos Fundamentais

4.1. Componentes (Lego)

Tudo em React é um componente. Um botão é um componente. O cabeçalho é um componente. A página inteira é um componente que contém os outros dois.

// Um componente é apenas uma função que retorna "HTML" (JSX)
function Botao() {
    return <button>Clique Aqui</button>;
}

4.2. JSX (JavaScript XML)

Parece HTML, mas é JavaScript disfarçado. Isso permite que você use a lógica de programação (if, for, map) direto no visual.

// O poder do JS dentro do HTML
const logado = true;

return (
    <div>
        <h1>Bem-vindo</h1>
        { logado ? <button>Sair</button> : <button>Entrar</button> }
    </div>
);

4.3. Props (Comunicação Pai -> Filho)

Como passar dados de um componente para outro? Via Props (Propriedades). São somente leitura.

function Cracha(props) {
    return <h2>Nome: {props.nome}</h2>;
}

// Uso:
// <Cracha nome="Ana" />

5. O Cérebro: Hooks (State e Effect)

Componentes funcionais eram "burros" até 2018. Com a chegada dos Hooks, eles ganharam memória e ciclo de vida.

useState (A Memória)

Variáveis normais (let x = 0) "morrem" quando o React redesenha a tela. O useState preserva o valor entre renderizações.

import { useState } from 'react';

function Contador() {
    // [valorAtual, funcaoParaMudarOValor]
    const [contador, setContador] = useState(0);

    return (
        <button onClick={() => setContador(contador + 1)}>
            Cliques: {contador}
        </button>
    );
}

useEffect (O Efeito Colateral)

Usado para coisas que acontecem "fora" do React: chamadas de API, timers ou manipular o DOM manualmente.

import { useEffect } from 'react';

function Alerta() {
    useEffect(() => {
        // Executa quando o componente nasce (montagem)
        alert("Bem-vindo!");

        // Opcional: Executa quando ele morre (desmontagem)
        return () => alert("Tchau!");
    }, []); // Array vazio = Executa só 1 vez
}

6. Projeto Prático: Lista de Tarefas (ToDo)

Vamos criar um mini-app completo. Ele demonstra: Estado, Manipulação de Arrays e Eventos.

Código Completo (App.jsx)

import { useState } from 'react';

export default function App() {
    // 1. Estado para armazenar o que o usuário digita
    const [texto, setTexto] = useState("");
    
    // 2. Estado para armazenar a lista de tarefas
    const [tarefas, setTarefas] = useState([]);

    function adicionar() {
        if (!texto) return; // Não adiciona vazio
        
        // Cria um novo array com tudo que já tinha (...) + o novo item
        setTarefas([...tarefas, texto]);
        setTexto(""); // Limpa o input
    }

    return (
        <div style={{ padding: "20px" }}>
            <h1>Minhas Tarefas</h1>
            
            <div>
                <input 
                    value={texto}
                    onChange={(e) => setTexto(e.target.value)}
                    placeholder="O que precisa fazer?"
                />
                <button onClick={adicionar}>Adicionar</button>
            </div>

            <ul>
                {/* Transformando Array em HTML com .map */}
                {tarefas.map((tarefa, index) => (
                    <li key={index}>{tarefa}</li>
                ))}
            </ul>
        </div>
    );
}

7. Pré-requisitos de JavaScript (Não pule!)

O erro nº 1 de quem aprende React é não saber JavaScript moderno suficiente. Antes de se aprofundar, garanta que você domina:

• Arrow Functions: const soma = (a, b) => a + b;
• Destructuring: const { nome, idade } = usuario;
• Map e Filter: Para manipular listas sem usar loops for.
• Modules: import e export.
• Spread Operator: const novo = [...antigo, item];

Conclusão: O Ecossistema

React é apenas a ponta do iceberg. Depois de dominar o básico, o mercado exigirá que você conheça o ecossistema ao redor dele.

Próximos Passos (Roadmap):
1. React Router: Para criar navegação entre páginas.
2. TanStack Query (React Query): Para buscar dados de APIs de forma profissional.
3. Next.js: O framework React para produção (Fullstack).