React: Fundamentos e Aplicações

O React revolucionou a forma como desenvolvemos interfaces de usuário na web. Criado pelo Facebook (agora Meta) em 2013, esta biblioteca JavaScript se tornou uma das tecnologias mais populares para desenvolvimento front-end. Neste artigo, vamos explorar o que é o React, seus conceitos fundamentais e como você pode começar a utilizá-lo em seus projetos.

O que é React?

React é uma biblioteca JavaScript de código aberto para construção de interfaces de usuário (UI). Diferente de frameworks completos como Angular, o React foca exclusivamente na camada de visualização de aplicações web. Esta abordagem modular permite que o React seja facilmente integrado com outras bibliotecas e frameworks.

As principais características que definem o React incluem:

• Baseado em componentes: O React utiliza uma arquitetura baseada em componentes reutilizáveis, permitindo que você construa interfaces complexas a partir de peças isoladas de código.
• Virtual DOM: Uma representação em memória da estrutura DOM real, que permite que o React otimize as atualizações de interface, melhorando significativamente o desempenho.
• Fluxo de dados unidirecional: Os dados fluem em uma única direção, tornando o código mais previsível e facilitando a depuração.
• JSX: Uma extensão de sintaxe que permite escrever HTML dentro do JavaScript, facilitando a criação de componentes de interface.
• Ecossistema rico: Uma vasta comunidade e ecossistema de bibliotecas complementares, como Redux para gerenciamento de estado e React Router para navegação.

Por que usar React?

Existem diversas razões pelas quais desenvolvedores e empresas escolhem React para seus projetos:

Produtividade e Reusabilidade

A abordagem baseada em componentes do React promove a reutilização de código e facilita a manutenção. Componentes bem projetados podem ser usados em diferentes partes da aplicação ou até mesmo em projetos distintos, economizando tempo de desenvolvimento.

Performance

Graças ao Virtual DOM, o React minimiza as manipulações diretas do DOM (que são operações caras em termos de desempenho). Quando o estado de um componente muda, o React cria uma nova representação virtual do DOM, compara com a anterior, e atualiza apenas o que realmente mudou no DOM real.

Suporte Corporativo e Comunidade

Sendo mantido pelo Facebook/Meta, o React tem suporte corporativo sólido. Além disso, conta com uma das maiores e mais ativas comunidades no mundo de desenvolvimento web, resultando em constantes melhorias, bibliotecas complementares e recursos de aprendizado abundantes.

Mercado de Trabalho

A popularidade do React se reflete no mercado de trabalho, com alta demanda por desenvolvedores proficientes na biblioteca. Aprender React pode abrir portas para diversas oportunidades profissionais.

Conceitos Fundamentais do React

Para começar a trabalhar com React, é importante entender alguns conceitos fundamentais:

Componentes

Componentes são os blocos de construção do React. Um componente encapsula uma parte da interface do usuário e pode conter lógica, estado e props (propriedades). Existem dois tipos principais de componentes:

• Componentes de Função: Definidos como funções JavaScript que retornam elementos React. Este é o tipo preferido atualmente.
• Componentes de Classe: Definidos como classes ES6 que estendem React.Component e implementam um método render().

Exemplo de um componente de função simples:

import React from 'react';

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

export default Saudacao;

O mesmo componente como classe:

import React from 'react';

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

export default Saudacao;

JSX

JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript que parece HTML, mas permite incluir expressões JavaScript usando chaves {}. O JSX é transpilado para chamadas de função JavaScript pelo Babel ou outras ferramentas similares.

// Exemplo de JSX
const elemento = <h1>Olá, mundo!</h1>;

// Como o JSX é transpilado
const elemento = React.createElement('h1', null, 'Olá, mundo!');

O JSX permite escrever interfaces de forma mais declarativa e intuitiva, facilitando a visualização da estrutura do componente.

Props

Props (abreviação de "properties") são a forma de passar dados de um componente pai para um componente filho no React. São somente leitura, o que significa que um componente nunca deve modificar suas próprias props.

// Componente pai
function App() {
  return <Saudacao nome="Maria" />;
}

// Componente filho recebendo a prop
function Saudacao(props) {
  return <h1>Olá, {props.nome}!</h1>;
}

Estado (State)

O estado é um objeto JavaScript que contém dados específicos do componente que podem mudar ao longo do tempo. Diferente das props, o estado é gerenciado internamente pelo componente.

Em componentes de função, usamos o Hook useState para gerenciar estado:

import React, { useState } from 'react';

function Contador() {
  // Declara uma variável de estado "contador" inicializada com 0
  const [contador, setContador] = useState(0);

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

Hooks

Introduzidos no React 16.8, os Hooks são funções que permitem "enganchar" no estado e no ciclo de vida do React a partir de componentes de função. Os Hooks mais comuns incluem:

• useState: Permite adicionar estado local a componentes de função.
• useEffect: Permite executar efeitos colaterais (como buscar dados, inscrever-se em eventos) em componentes de função.
• useContext: Permite consumir um contexto React.
• useReducer: Uma alternativa ao useState para estados mais complexos.
• useRef: Permite criar uma referência mutável que persiste durante todo o ciclo de vida do componente.

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

function ExemploEffect() {
  const [contador, setContador] = useState(0);

  // Similar a componentDidMount e componentDidUpdate
  useEffect(() => {
    // Atualiza o título do documento usando a API do browser
    document.title = `Você clicou ${contador} vezes`;
    
    // Opcional: função de limpeza (similar a componentWillUnmount)
    return () => {
      document.title = 'React App';
    };
  }, [contador]); // Só re-executa se contador mudar

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

Configurando um Ambiente React

Existem várias maneiras de começar a desenvolver com React. A forma mais simples é usar o Create React App, uma ferramenta oficial que configura todo o ambiente necessário com um único comando.

Usando Create React App

# Instalar globalmente (opcional)
npm install -g create-react-app

# Criar um novo projeto
npx create-react-app meu-app-react

# Navegar para o diretório do projeto
cd meu-app-react

# Iniciar o servidor de desenvolvimento
npm start

Isso criará uma nova aplicação React com a seguinte estrutura básica:

meu-app-react/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Exemplo Prático: Criando uma Lista de Tarefas

Vamos criar um exemplo simples de uma aplicação de lista de tarefas (Todo List) para ilustrar os conceitos do React:

// src/App.js
import React, { useState } from 'react';
import './App.css';

function App() {
  const [tarefas, setTarefas] = useState([]);
  const [novaTarefa, setNovaTarefa] = useState('');

  const adicionarTarefa = () => {
    if (novaTarefa.trim() === '') return;
    
    setTarefas([...tarefas, { 
      id: Date.now(), 
      texto: novaTarefa, 
      concluida: false 
    }]);
    setNovaTarefa('');
  };

  const alternarTarefa = (id) => {
    setTarefas(
      tarefas.map(tarefa => 
        tarefa.id === id 
          ? { ...tarefa, concluida: !tarefa.concluida } 
          : tarefa
      )
    );
  };

  const excluirTarefa = (id) => {
    setTarefas(tarefas.filter(tarefa => tarefa.id !== id));
  };

  return (
    <div className="App">
      <h1>Lista de Tarefas</h1>
      
      <div className="adicionar-tarefa">
        <input
          type="text"
          value={novaTarefa}
          onChange={(e) => setNovaTarefa(e.target.value)}
          placeholder="Adicionar uma nova tarefa"
          onKeyPress={(e) => e.key === 'Enter' && adicionarTarefa()}
        />
        <button onClick={adicionarTarefa}>Adicionar</button>
      </div>
      
      <ul className="lista-tarefas">
        {tarefas.map(tarefa => (
          <li key={tarefa.id} className={tarefa.concluida ? 'concluida' : ''}>
            <input
              type="checkbox"
              checked={tarefa.concluida}
              onChange={() => alternarTarefa(tarefa.id)}
            />
            <span>{tarefa.texto}</span>
            <button onClick={() => excluirTarefa(tarefa.id)}>Excluir</button>
          </li>
        ))}
      </ul>
      
      <div className="info">
        <p>Total de tarefas: {tarefas.length}</p>
        <p>Tarefas concluídas: {tarefas.filter(t => t.concluida).length}</p>
      </div>
    </div>
  );
}

export default App;

CSS básico para estilizar a aplicação:

/* src/App.css */
.App {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
}

.adicionar-tarefa {
  display: flex;
  margin-bottom: 20px;
}

.adicionar-tarefa input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.adicionar-tarefa button {
  padding: 10px 15px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.lista-tarefas {
  list-style-type: none;
  padding: 0;
}

.lista-tarefas li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.lista-tarefas li.concluida span {
  text-decoration: line-through;
  color: #888;
}

.lista-tarefas li span {
  flex: 1;
  margin: 0 10px;
}

.lista-tarefas li button {
  padding: 5px 10px;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.info {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  color: #666;
}

React e o Ecossistema JavaScript

O React raramente é usado isoladamente em projetos do mundo real. Geralmente, ele é combinado com outras bibliotecas para formar uma solução mais completa:

Gerenciamento de Estado

• Redux: Uma biblioteca de gerenciamento de estado previsível para aplicações JavaScript.
• MobX: Uma alternativa ao Redux que usa observáveis.
• Context API: API nativa do React para compartilhar dados entre componentes sem passar props manualmente.
• Zustand: Uma solução mais simples e minimalista baseada em hooks.

Roteamento

• React Router: A biblioteca de roteamento mais popular para React.
• Reach Router: Uma alternativa acessível (agora parte do React Router).

Busca de Dados

• Axios: Cliente HTTP baseado em Promises para fazer requisições.
• React Query: Biblioteca para buscar, armazenar em cache e atualizar dados assíncronos.
• SWR: Estratégia de stale-while-revalidate para busca de dados.

UI e Estilização

• Material-UI: Implementação dos componentes Material Design para React.
• Ant Design: Biblioteca de componentes UI empresarial.
• Styled Components: Uso de literais de template ES6 para estilizar componentes.
• Tailwind CSS: Framework CSS utility-first para criar designs personalizados.

Boas Práticas no React

Ao desenvolver com React, algumas práticas ajudam a manter seu código organizado e eficiente:

Organização de Componentes

• Divida componentes grandes em componentes menores e reutilizáveis.
• Utilize uma estrutura de pastas que faça sentido para seu projeto (por funcionalidade, por tipo, etc.).
• Separe componentes de apresentação (preocupados com a aparência) de componentes de contêiner (preocupados com o comportamento).

Performance

• Use React.memo() para componentes funcionais que renderizam com frequência com as mesmas props.
• Utilize useCallback() para funções e useMemo() para cálculos pesados.
• Evite renders desnecessários usando corretamente as dependências no useEffect.
• Considere técnicas de virtualização para listas longas (react-window, react-virtualized).

Gestão de Estado

• Mantenha o estado o mais próximo possível de onde é usado.
• Prefira múltiplos estados pequenos em vez de um estado complexo, quando possível.
• Use a Context API para estados globais somente quando necessário.
• Considere bibliotecas de gerenciamento de estado para aplicações complexas.

Conclusão

O React transformou a maneira como construímos interfaces de usuário na web, oferecendo uma abordagem componentizada e eficiente. Sua flexibilidade permite utilizá-lo em diversos contextos, desde pequenos widgets até aplicações completas. Seu ecossistema rico e comunidade ativa garantem que você terá suporte e recursos abundantes à medida que desenvolve suas habilidades.

Para continuar aprendendo sobre desenvolvimento web front-end, não deixe de conferir nossos artigos sobre Next.js e jQuery, duas tecnologias que complementam e expandem as capacidades do React.