O que é o React?

O React é uma biblioteca JavaScript para construção de interfaces de usuário, mantida principalmente pelo time do Facebook (agora Meta). Ele é component-based, ou seja, cada parte da interface da sua aplicação é representada por um componente reutilizável, o que facilita a manutenção, o reuso de código e o desenvolvimento escalável de aplicações modernas.

Por que usar React?

• Criação de interfaces reativas, que atualizam automaticamente conforme os dados mudam.
• Organização da aplicação em componentes reutilizáveis.
• Suporte a hooks, que permitem gerenciar estado e efeitos colaterais de forma intuitiva.
• Grande comunidade, documentação rica e ecossistema vasto (React Router, Redux, Next.js, etc).
• Performance e otimização por trás do Virtual DOM (modelo interno que compara atualizações de forma eficiente).

O que são Hooks?

Hooks são funções especiais introduzidas no React a partir da versão 16.8 que permitem “ligar” recursos do React (como estado e ciclo de vida) dentro de componentes funcionais.

useState

Permite que o componente tenha estado interno.

import { useState } from 'react';

const Contador = () => {
  const [contador, setContador] = useState(0);

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

• useState(0) inicializa o estado com valor 0.
• setContador é a função que altera o estado.
• Quando o estado muda, o componente re-renderiza automaticamente.

useEffect

Permite lidar com efeitos colaterais (side effects), como chamadas de API, timers, manipulação de DOM, etc.