⚛️ React: A Biblioteca para Interfaces de Usuário

React, desenvolvida e mantida pelo Meta (anteriormente Facebook), é uma biblioteca JavaScript de código aberto utilizada para construir interfaces de usuário (User Interfaces - UI) interativas e dinâmicas. Seu principal objetivo é permitir que desenvolvedores criem UIs complexas a partir de pequenas e isoladas peças de código chamadas “componentes”.

🧠 Conceitos Fundamentais

O poder do React reside em sua abordagem declarativa e baseada em componentes.

Componentes: Os Blocos de Construção

Tudo em React é um componente. Um componente é uma função JavaScript ou uma classe que, opcionalmente, aceita entradas (chamadas de props) e retorna um elemento React que descreve o que deve aparecer na tela. A componentização permite dividir a UI em partes independentes e reutilizáveis.

Exemplo de Componente Funcional:

// Greeting.jsx
import React from 'react';

// Um componente funcional simples que recebe 'name' via props.
function Greeting(props) {
  return <h1>Olá, {props.name}!</h1>;
}

export default Greeting;

JSX: JavaScript e XML

JSX é uma extensão de sintaxe para JavaScript que se assemelha a HTML ou XML. Ele permite escrever a estrutura da UI de forma declarativa dentro do próprio código JavaScript. JSX não é executado diretamente no navegador; ele é transpilado (convertido) para chamadas de funções JavaScript puras por ferramentas como o Babel.

// Sem JSX
React.createElement('h1', {className: 'title'}, 'Olá, Mundo!');

// Com JSX (mais legível)
<h1 className="title">Olá, Mundo!</h1>

Props: Passando Dados para Componentes

Props (abreviação de “properties”) são usadas para passar dados de um componente pai para um componente filho. Elas são somente leitura, o que significa que um componente filho nunca deve modificar as props que recebe.

// App.jsx (Componente Pai)
import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Beto" />
    </div>
  );
}

State: Gerenciando o Estado Interno

Enquanto props são dados externos, o state é um objeto que armazena dados internos de um componente. Quando o state de um componente muda, o React o re-renderiza automaticamente para refletir essa mudança na UI.

O Hook useState é a forma moderna de adicionar estado a componentes funcionais.

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  // Declara uma nova variável de estado chamada 'count'
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      {/* Ao clicar, chama setCount para atualizar o estado */}
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

🎣 Hooks: Superpoderes para Componentes Funcionais

Introduzidos no React 16.8, os Hooks permitem que você use o state e outros recursos do React em componentes funcionais, sem a necessidade de escrever classes.

useState: Gerenciamento de Estado

Como visto no exemplo do contador, useState retorna um valor com estado e uma função para atualizá-lo.

useEffect: Sincronizando com Efeitos Colaterais

O Hook useEffect é usado para executar “efeitos colaterais” (side effects) em componentes. Efeitos colaterais são operações que não estão relacionadas à renderização, como:

// UserData.jsx
import React, { useState, useEffect } from 'react';

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  // O useEffect será executado após a renderização do componente
  useEffect(() => {
    // Função para buscar dados do usuário
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));

  // O array [userId] garante que o efeito só será executado
  // novamente se o `userId` mudar.
  }, [userId]);

  if (!user) {
    return <p>Carregando...</p>;
  }

  return <p>Nome do usuário: {user.name}</p>;
}

Outros Hooks Comuns

🔄 Fluxo de Dados e Ciclo de Vida

Fluxo de Dados Unidirecional

Em React, os dados fluem em uma única direção: de cima para baixo (do componente pai para o filho). Isso é conhecido como one-way data flow. Essa arquitetura torna o estado da aplicação mais previsível e fácil de depurar.

graph TD;
    A["Componente Pai (com State)"] -- Passa `props` --> B[Componente Filho A];
    A -- Passa `props` --> C[Componente Filho B];
    B --> D{Renderiza UI};
    C --> E{Renderiza UI};

Ciclo de Vida do Componente

Um componente React passa por três fases principais:

  1. Montagem (Mounting): O componente é criado e inserido no DOM.
  2. Atualização (Updating): O componente é re-renderizado devido a mudanças em suas props ou state.
  3. Desmontagem (Unmounting): O componente é removido do DOM.

Com Hooks, o useEffect gerencia todas essas fases.

🚀 Começando com React

A maneira mais moderna e recomendada de iniciar um novo projeto React é usando ferramentas de build como o Vite.

  1. Crie um novo projeto (é necessário ter o Node.js instalado): 
    npm create vite@latest meu-app-react -- --template react
  2. Navegue até a pasta do projeto: 
    cd meu-app-react
  3. Instale as dependências: 
    npm install
  4. Inicie o servidor de desenvolvimento: 
    npm run dev

Isso iniciará um servidor local, geralmente em http://localhost:5173, com hot-reloading ativado.

🎯 Por que Usar React?