⚛️ 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:

• Requisições a uma API (fetch de dados).
• Manipulação manual do DOM.
• Inscrição em eventos (subscriptions).

// 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

• useContext: Acessa dados de um “contexto” global sem precisar passar props por múltiplos níveis.
• useReducer: Uma alternativa ao useState para gerenciar lógicas de estado mais complexas.
• useMemo e useCallback: Otimizam a performance ao memorizar valores e funções.

🔄 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?

• Arquitetura Baseada em Componentes: Promove a reutilização de código e a organização do projeto.
• Virtual DOM: React usa uma representação em memória do DOM real (o Virtual DOM) para otimizar as atualizações, resultando em alta performance.
• Ecossistema Vasto: Uma enorme quantidade de bibliotecas, ferramentas e frameworks construídos em torno do React, como Next.js, React Native, Redux e Material-UI.
• Comunidade Forte e Apoio Corporativo: Mantido ativamente pelo Meta e com uma das maiores comunidades de desenvolvedores do mundo.
• Declarativo: Você descreve o que a UI deve parecer para cada estado, e o React cuida de como atualizá-la, tornando o código mais previsível e fácil de entender.

🔗 ricardotecpro.github.io