Aprende React
moderno com Hooks

JSX é uma extensão de sintaxe que permite escrever HTML dentro de JavaScript. O Babel transpila JSX para chamadas React.createElement().

// JSX — parece HTML mas é JavaScript
const elemento = <h1 className="titulo">Olá, mundo!</h1>;

// O que o Babel gera por baixo:
const elemento = React.createElement(
  "h1",
  { className: "titulo" },
  "Olá, mundo!"
);

// Regras importantes do JSX:
// 1. class → className
// 2. for → htmlFor (em labels)
// 3. Tem de ter um único elemento raiz
// 4. Expressões JS vão dentro de {}
// 5. Tags auto-fechadas: <img />, <br />

const nome = "Ana";
const ui = (
  <div>
    <h1>Olá, {nome}!</h1>
    <p>{2 + 2} anos de experiência</p>
    <img src="foto.jpg" alt="Foto" />
  </div>
);

Componentes são funções JavaScript que retornam JSX. O nome começa sempre com letra maiúscula.

// Componente simples
function OlaMundo() {
  return <h1>Olá, mundo!</h1>;
}

// Componente com lógica
function Relogio() {
  const agora = new Date();
  const hora = agora.toLocaleTimeString("pt-PT");

  return (
    <div className="relogio">
      <p>Hora atual:</p>
      <h2>{hora}</h2>
    </div>
  );
}

// Renderizar na página
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(<Relogio />);

React torna a renderização condicional e de listas muito expressiva usando JSX e JavaScript puro.

// Renderização condicional
function Alerta({ tipo, mensagem }) {
  // if/else antes do return
  if (!mensagem) return null; // não renderiza nada

  return (
    <div className={`alerta alerta-${tipo}`}>
      {/* Operador && — renderiza se verdade */}
      {tipo === "erro" && <span>❌</span>}

      {/* Ternário — um ou outro */}
      {tipo === "sucesso"
        ? <span>✅ {mensagem}</span>
        : <span>⚠️ {mensagem}</span>
      }
    </div>
  );
}

// Listas — sempre com key única!
function ListaTarefas({ tarefas }) {
  return (
    <ul>
      {tarefas.map(tarefa => (
        <li key={tarefa.id}>
          {tarefa.texto}
        </li>
      ))}
    </ul>
  );
}

Podes definir valores por defeito para props usando desestruturação ou defaultProps.

// Valores por defeito na desestruturação (recomendado)
function Avatar({
  nome = "Utilizador",
  src = "/avatar-default.png",
  tamanho = 40
}) {
  return (
    <img
      src={src}
      alt={nome}
      width={tamanho}
      height={tamanho}
      style={{ borderRadius: "50%" }}
    />
  );
}

// Usar sem algumas props
<Avatar nome="Ana" />  // src e tamanho usam defeito

A prop especial children representa o conteúdo entre as tags de abertura e fecho de um componente. É a base da composição em React.

// Componente "contentor" com children
function Cartao({ titulo, children }) {
  return (
    <div className="cartao">
      {titulo && <h3 className="cartao-titulo">{titulo}</h3>}
      <div className="cartao-corpo">
        {children}
      </div>
    </div>
  );
}

// Usar com qualquer conteúdo
<Cartao titulo="O meu perfil">
  <Avatar nome="Ana" />
  <p>Desenvolvedora Full-Stack</p>
  <Botao texto="Seguir" />
</Cartao>

Quando o novo estado depende do anterior, usa a forma funcional do setter. Para objetos e arrays, nunca mutes — cria sempre uma cópia.

// ✅ Forma funcional — usa o valor mais recente
setCount(prev => prev + 1);

// Imutabilidade com objetos
const [user, setUser] = useState({ nome: "Ana", idade: 28 });

// ❌ Errado — mutação direta
user.idade = 29;
setUser(user);

// ✅ Correto — criar nova cópia
setUser(prev => ({ ...prev, idade: 29 }));

// Imutabilidade com arrays
const [lista, setLista] = useState(["a", "b"]);

// Adicionar
setLista(prev => [...prev, "c"]);

// Remover por índice
setLista(prev => prev.filter((_, i) => i !== 1));

// Atualizar um item
setLista(prev => prev.map((item, i) =>
  i === 0 ? "novo" : item
));

A forma mais comum de usar useState é para controlar o valor de campos de formulário — chamados componentes controlados.

function FormularioNome() {
  const [nome, setNome] = useState("");
  const [enviado, setEnviado] = useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    setEnviado(true);
  }

  if (enviado) {
    return <p>Olá, {nome}! 👋</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        O teu nome:
        <input
          type="text"
          value={nome}
          onChange={e => setNome(e.target.value)}
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

useContext permite partilhar dados entre componentes sem ter de passar props por cada nível da árvore — o chamado "prop drilling".

import { createContext, useContext, useState } from "react";

// 1. Criar o context
const TemaContext = createContext("claro");

// 2. Providenciar com o Provider
function App() {
  const [tema, setTema] = useState("claro");
  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      <Pagina />
    </TemaContext.Provider>
  );
}

// 3. Consumir em qualquer componente filho
function BotaoTema() {
  const { tema, setTema } = useContext(TemaContext);
  return (
    <button onClick={() => setTema(t => t === "claro" ? "escuro" : "claro")}>
      Tema atual: {tema}
    </button>
  );
}

useReducer é uma alternativa ao useState para estado mais complexo. Segue o padrão Redux — uma função reducer define como o estado muda.

import { useReducer } from "react";

// Reducer — função pura que retorna novo estado
function reducer(state, action) {
  switch (action.type) {
    case "incrementar":
      return { ...state, count: state.count + 1 };
    case "decrementar":
      return { ...state, count: Math.max(0, state.count - 1) };
    case "reset":
      return { count: 0 };
    default:
      return state;
  }
}

function Contador() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "incrementar" })}>+</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

useMemo memoriza o resultado de um cálculo pesado. useCallback memoriza uma função. Usa-os só quando há um problema real de desempenho.

import { useMemo, useCallback } from "react";

// useMemo — não recalcula se dependências não mudaram
const totalFiltrado = useMemo(() => {
  console.log("a calcular..."); // só corre quando lista muda
  return lista
    .filter(item => item.ativo)
    .reduce((acc, item) => acc + item.valor, 0);
}, [lista]);

// useCallback — mesma função entre renders
// Útil quando passas funções a componentes memorizados
const handleClick = useCallback(() => {
  setSeleccionado(id);
}, [id]);

// Regra geral: NÃO optimizes prematuramente.
// Só usa useMemo/useCallback quando tens evidência
// de que algo é lento com o React DevTools Profiler.

O padrão mais comum em React é três estados: loading, dados e erro. Gere os três para uma boa experiência de utilizador.

function ListaUtilizadores() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [erro, setErro] = useState(null);

  useEffect(() => {
    async function buscar() {
      try {
        const res = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        if (!res.ok) throw new Error(`Erro ${res.status}`);
        const data = await res.json();
        setUsers(data);
      } catch (e) {
        setErro(e.message);
      } finally {
        setLoading(false);
      }
    }
    buscar();
  }, []);

  if (loading) return <p>⏳ A carregar...</p>;
  if (erro) return <p style={{ color: "red" }}>❌ {erro}</p>;

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name} — {u.email}</li>
      ))}
    </ul>
  );
}

Quando repetes a mesma lógica em vários componentes, extrai-a para um hook personalizado. Começa sempre com "use".

// hooks/useFetch.js
import { useState, useEffect } from "react";

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelado = false; // evita race conditions
    async function buscar() {
      setLoading(true);
      try {
        const res = await fetch(url);
        const json = await res.json();
        if (!cancelado) setData(json);
      } catch (e) {
        if (!cancelado) setError(e.message);
      } finally {
        if (!cancelado) setLoading(false);
      }
    }
    buscar();
    return () => { cancelado = true; }; // cleanup
  }, [url]);

  return { data, loading, error };
}

// Usar em qualquer componente
function PostsList() {
  const { data, loading, error } = useFetch(
    "https://jsonplaceholder.typicode.com/posts"
  );
  if (loading) return <p>A carregar...</p>;
  if (error) return <p>Erro: {error}</p>;
  return <p>{data?.length} posts carregados</p>;
}