Aula Completa sobre React

Da História aos Hooks e Ecossistema Moderno

O que é React?

  • Uma biblioteca JavaScript para construir interfaces de usuário (UI).
  • Criada e mantida pelo Facebook.
  • Focada na construção de componentes de UI reutilizáveis.
  • Não é um framework completo (como Angular), mas a base para muitos.

Princípios Chave:

  • Declarativo: Descreva como sua UI deve parecer em qualquer estado, e o React cuidará de atualizá-la eficientemente quando os dados mudarem.
  • Baseado em Componentes: Crie componentes encapsulados que gerenciam seu próprio estado e, em seguida, componha-os para criar UIs complexas.
  • Aprenda uma vez, escreva em qualquer lugar: O React pode ser usado para construir aplicações web, mobile (com React Native) e desktop.

História e Evolução

  • 2011: Criado por Jordan Walke, um engenheiro de software do Facebook.
  • 2012: Implementado no feed de notícias do Facebook e, posteriormente, no Instagram.
  • Maio de 2013: O React se torna open-source.
  • 2015: Lançamento do React Native, permitindo o desenvolvimento de aplicativos móveis com React.
  • 2017 (React 16 - "Fiber"): Uma reescrita completa do núcleo do React, permitindo renderização incremental e melhorando o desempenho.
  • 2019 (React 16.8): Introdução dos Hooks, revolucionando a forma como escrevemos componentes.
  • 2022 (React 18): Introduz recursos de concorrência (concurrency) para melhorar a experiência do usuário em aplicações complexas.

Conceitos Fundamentais

Virtual DOM

  • O React cria uma cópia do DOM (Document Object Model) em memória.
  • Quando o estado de um componente muda, o React atualiza o Virtual DOM.
  • Em seguida, ele compara o Virtual DOM atualizado com a versão anterior e calcula a maneira mais eficiente de atualizar o DOM real.
  • Isso evita manipulações diretas e lentas do DOM, resultando em melhor desempenho.

JSX (JavaScript XML)

  • Uma extensão de sintaxe para JavaScript que se assemelha a HTML.
  • Permite escrever a estrutura da UI dentro do código JavaScript.
  • Não é obrigatório, mas é a forma mais comum e recomendada de escrever componentes React.

Exemplo de JSX:

const elemento = <h1>Olá, Mundo!</h1>;

Componentes: A Base de Tudo

Componentes Funcionais (Functional Components)

A maneira moderna e recomendada de escrever componentes React.

function BemVindo(props) {
  return <h1>Olá, {props.nome}</h1>;
}

// Uso do componente
<BemVindo nome="Maria" />;

Componentes de Classe (Class Components)

A forma mais antiga, ainda encontrada em bases de código legadas.

class BemVindo extends React.Component {
  render() {
    return <h1>Olá, {this.props.nome}</h1>;
  }
}

Props e State

Props (Propriedades)

  • São como argumentos de uma função.
  • Permitem passar dados de um componente pai para um componente filho.
  • São somente leitura (imutáveis).

// Componente Pai
<PerfilUsuario nome="João" idade={30} />;

// Componente Filho (PerfilUsuario.js)
function PerfilUsuario(props) {
  return (
    <div>
      <p>Nome: {props.nome}</p>
      <p>Idade: {props.idade}</p>
    </div>
  );
}

State (Estado)

  • Dados que um componente gerencia internamente.
  • Quando o estado de um componente muda, o React o renderiza novamente.
  • É gerenciado usando o Hook useState.

React Hooks: Superpoderes para Componentes Funcionais

Hooks são funções que permitem que você "se conecte" aos recursos de estado e ciclo de vida do React a partir de componentes funcionais.

Regras dos Hooks

  1. Chame Hooks apenas no nível superior: Não chame Hooks dentro de loops, condicionais ou funções aninhadas.
  2. Chame Hooks apenas em componentes de função React: Não chame Hooks em funções JavaScript comuns.

Hooks Essenciais

useState

Permite adicionar estado a um componente funcional.

  • Declaração: const [estado, setEstado] = useState(valorInicial);
  • Retorna: Uma variável com o valor do estado e uma função para atualizá-lo.

import React, { useState } from 'react';

function Contador() {
  const [contagem, setContagem] = useState(0);

  return (
    <div>
      <p>Você clicou {contagem} vezes</p>
      <button onClick={() => setContagem(contagem + 1)}>Clique aqui</button>
    </div>
  );
}

Hooks Essenciais (Continuação)

useEffect

Permite executar efeitos colaterais (side effects) em componentes funcionais. Exemplos: buscar dados de uma API, definir assinaturas (subscriptions) ou manipular o DOM manualmente.

  • Sintaxe: useEffect(() => { /* efeito */ }, [dependencias]);
  • O array de dependências controla quando o efeito é executado.
    • []: Executa apenas uma vez, após a montagem do componente.
    • [variavel]: Executa sempre que variavel mudar.
    • Sem array: Executa a cada renderização (cuidado com loops infinitos!).

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

function ExemploAPI() {
  const [dados, setDados] = useState(null);

  useEffect(() => {
    fetch('[https://api.exemplo.com/dados](https://api.exemplo.com/dados)')
      .then((res) => res.json())
      .then((data) => setDados(data));
  }, []); // O array vazio garante que o efeito só rode uma vez

  return <div>{dados ? dados.titulo : 'Carregando...'}</div>;
}

Hooks Essenciais (Continuação)

useContext

Permite acessar dados de um "Contexto" React sem precisar passar props por múltiplos níveis de componentes (prop drilling).

  • Uso: Consumir um valor de um React.createContext.

// 1. Criar o Contexto (em um arquivo separado)
const TemaContexto = React.createContext('claro');

// 2. Prover o Contexto (no componente pai)
function App() {
  return (
    <TemaContexto.Provider value="escuro">
      <BarraDeFerramentas />
    </TemaContexto.Provider>
  );
}

// 3. Consumir o Contexto (em qualquer componente filho)
function Botao() {
  const tema = useContext(TemaContexto);
  return <button className={tema}>Botão</button>;
}

Hooks Adicionais

  • useReducer: Uma alternativa ao useState para gerenciar estados complexos, geralmente com um objeto de estado com múltiplas propriedades ou quando o próximo estado depende do anterior.
  • useCallback: Retorna uma versão "memoizada" de uma função. A função só é recriada se uma de suas dependências mudar. Útil para otimização.
  • useMemo: Retorna um valor "memoizado". Recalcula o valor apenas quando uma de suas dependências muda. Útil para otimizar cálculos caros.
  • useRef: Fornece uma maneira de acessar nós do DOM diretamente ou de manter um valor mutável que não causa uma nova renderização quando atualizado.
  • useLayoutEffect: Idêntico ao useEffect em sua assinatura, mas dispara de forma síncrona após todas as mutações do DOM.

O Ecossistema Moderno do React

Usar o React puro é possível, mas o desenvolvimento moderno geralmente envolve ferramentas e frameworks que fornecem uma experiência de desenvolvimento superior, otimizações e funcionalidades adicionais.

Vite

  • Uma ferramenta de build extremamente rápida.
  • Oferece um servidor de desenvolvimento quase instantâneo com Hot Module Replacement (HMR).
  • Ótima escolha para iniciar projetos React de forma rápida e moderna.
  • Como usar: npm create vite@latest meu-app-react -- --template react

Next.js (O Framework React para Produção)

  • Um framework completo construído sobre o React.
  • Principais recursos:
    • Renderização Híbrida: Server-Side Rendering (SSR) e Static Site Generation (SSG).
    • Roteamento baseado em arquivos: Crie páginas simplesmente adicionando arquivos na pasta pages ou app.
    • Otimização de Imagens, Fontes e Scripts.
    • API Routes: Crie endpoints de API como parte do seu projeto Next.js.
  • Ideal para aplicações web completas, sites de e-commerce, blogs e qualquer projeto que precise de SEO e performance.
  • Como usar: npx create-next-app@latest

Remix

  • Outro framework full-stack focado nos fundamentos da web.
  • Principais recursos:
    • Carregamento de dados focado em rotas: Cada rota pode definir suas próprias necessidades de dados.
    • Mutações de dados simplificadas: Formulários HTML funcionam como o esperado, com aprimoramentos de JavaScript.
    • Nested Routing: Rotas aninhadas que permitem layouts complexos.
  • Excelente para aplicações web ricas em dados e focadas na experiência do usuário.
  • Como usar: npx create-remix@latest

Outras Ferramentas

  • Create React App (CRA): A forma "clássica" de iniciar projetos React. Embora ainda funcional, hoje a recomendação oficial do React é usar um framework como Next.js ou Remix para novos projetos.
  • Gatsby: Um gerador de sites estáticos baseado em React, ótimo para blogs e sites de conteúdo.

Conclusão

  • React revolucionou o desenvolvimento de interfaces de usuário com seu modelo de componentes e o Virtual DOM.
  • Os Hooks modernizaram a forma de escrever componentes, tornando o código mais limpo e reutilizável.
  • O ecossistema ao redor do React, com ferramentas como Vite, Next.js e Remix, oferece soluções poderosas para construir desde simples páginas até aplicações web complexas e de alto desempenho.