Douglas Nickson Blog

React para iniciantes

React para Iniciantes: Construindo Componentes e Interfaces Modernas

Introdução ao React

O React revolucionou a forma como desenvolvemos interfaces de usuário. Criado pelo Facebook em 2013, esta biblioteca JavaScript rapidamente conquistou a comunidade de desenvolvimento front-end por sua abordagem declarativa e componentizada. Se você está dando os primeiros passos no desenvolvimento web moderno, este guia completo irá ajudá-lo a entender os fundamentos do React e começar a construir interfaces interativas.

Por que aprender React em 2025?

Antes de mergulharmos nos detalhes técnicos, é importante entender por que o React continua sendo uma habilidade valiosa para desenvolvedores:

  • Mercado de trabalho aquecido: A demanda por desenvolvedores React permanece consistentemente alta.
  • Ecossistema maduro: Com mais de uma década de desenvolvimento, o React possui documentação excelente, ferramentas robustas e uma comunidade ativa.
  • Versatilidade: O conhecimento em React pode ser aplicado no desenvolvimento web (React.js), mobile (React Native) e até mesmo em realidade virtual (React VR).
  • Performance otimizada: Graças ao Virtual DOM e outras otimizações, aplicações React tendem a oferecer excelente performance.

Configurando seu Ambiente de Desenvolvimento

Para começar com React, você precisará de algumas ferramentas básicas. Vamos configurar um ambiente de desenvolvimento simples e eficiente:

Pré-requisitos

  • Node.js e npm: O React utiliza o npm (Node Package Manager) para gerenciar dependências. Baixe a versão LTS mais recente do Node.js em nodejs.org.
  • Editor de código: Recomendo o Visual Studio Code com extensões como ESLint e Prettier para uma melhor experiência de desenvolvimento.
  • Conhecimento básico: Familiaridade com HTML, CSS e JavaScript é essencial antes de começar com React.

Criando seu Primeiro Projeto React

Existem duas maneiras principais de iniciar um projeto React:

# Usando Create React App (recomendado para iniciantes)
npx create-react-app meu-primeiro-app
cd meu-primeiro-app
npm start

# OU usando Vite (mais rápido e mais moderno)
npm create vite@latest meu-app-vite -- --template react
cd meu-app-vite
npm install
npm run dev

O Create React App é uma ferramenta oficial que configura automaticamente seu projeto com as melhores práticas. O Vite é uma alternativa mais moderna e rápida que está ganhando popularidade.

Entendendo Componentes: O Coração do React

No centro da filosofia do React estão os componentes – blocos de construção independentes e reutilizáveis para sua interface. Vamos entender como eles funcionam:

Componentes Funcionais vs. Componentes de Classe

Atualmente, o React favorece os componentes funcionais com Hooks. Vamos ver a diferença:

// Componente Funcional Moderno (recomendado)
import React, { useState } from 'react';

function BotaoContador() {
  const [contador, setContador] = useState(0);
  
  return (
    <button onClick={() => setContador(contador + 1)}>
      Clicado {contador} vezes
    </button>
  );
}

// Componente de Classe (abordagem mais antiga)
import React, { Component } from 'react';

class BotaoContadorClasse extends Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }
  
  render() {
    return (
      <button onClick={() => this.setState({ contador: this.state.contador + 1 })}>
        Clicado {this.state.contador} vezes
      </button>
    );
  }
}

Os componentes funcionais são mais concisos, mais fáceis de entender e aproveitar os recursos modernos do React como Hooks.

Props: Passando Dados Entre Componentes

As props (abreviação de propriedades) permitem a comunicação entre componentes. Elas fluem de cima para baixo na árvore de componentes:

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

// Componente Filho
function Saudacao(props) {
  return <h1>Olá, {props.nome}! Você tem {props.idade} anos.</h1>;
}

As props são imutáveis – um componente filho não pode modificar suas próprias props. Esta é uma restrição intencional que ajuda a manter o fluxo de dados previsível.

Estado (State): Tornando Componentes Interativos

Enquanto props são passadas de fora, o estado (state) é gerenciado internamente pelo componente. Vamos ver como usar o Hook useState:

import React, { useState } from 'react';

function Formulario() {
  const [nome, setNome] = useState('');
  
  return (
    <div>
      <input 
        type="text"
        value={nome}
        onChange={(e) => setNome(e.target.value)}
        placeholder="Digite seu nome"
      />
      <p>Olá, {nome || 'visitante'}!</p>
    </div>
  );
}

O Hook useState retorna um par: o valor atual do estado e uma função que permite atualizá-lo. Sempre que o estado muda, o componente renderiza novamente.

Construindo uma Interface de Usuário Moderna

Agora que entendemos os fundamentos, vamos aplicar esse conhecimento para construir algo mais prático – uma lista de tarefas simples:

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, { texto: novaTarefa, concluida: false }]);
    setNovaTarefa('');
  };

  const alternarTarefa = (index) => {
    const novasTarefas = [...tarefas];
    novasTarefas[index].concluida = !novasTarefas[index].concluida;
    setTarefas(novasTarefas);
  };

  return (
    <div className="app-container">
      <h1>Minha Lista de Tarefas</h1>
      
      <div className="input-container">
        <input
          type="text"
          value={novaTarefa}
          onChange={(e) => setNovaTarefa(e.target.value)}
          placeholder="Adicionar nova tarefa"
          onKeyPress={(e) => e.key === 'Enter' && adicionarTarefa()}
        />
        <button onClick={adicionarTarefa}>Adicionar</button>
      </div>
      
      <ul className="lista-tarefas">
        {tarefas.length === 0 ? (
          <li className="tarefa-vazia">Nenhuma tarefa adicionada ainda</li>
        ) : (
          tarefas.map((tarefa, index) => (
            <li 
              key={index} 
              className={`tarefa ${tarefa.concluida ? 'concluida' : ''}`}
              onClick={() => alternarTarefa(index)}
            >
              {tarefa.texto}
            </li>
          ))
        )}
      </ul>
      
      <div className="contador">
        {tarefas.filter(t => t.concluida).length} de {tarefas.length} tarefas concluídas
      </div>
    </div>
  );
}

export default App;

Para que este exemplo funcione corretamente, você também precisará de algum CSS:

/* App.css */
.app-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

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

button {
  padding: 10px 15px;
  background-color: #0077ff;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #0066dd;
}

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

.tarefa {
  padding: 12px 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.tarefa:hover {
  background-color: #f0f0f0;
}

.tarefa.concluida {
  text-decoration: line-through;
  color: #888;
  background-color: #f0fff0;
}

.tarefa-vazia {
  color: #888;
  text-align: center;
  padding: 20px 0;
}

.contador {
  margin-top: 20px;
  text-align: right;
  font-size: 14px;
  color: #888;
}

Este exemplo demonstra vários conceitos fundamentais do React:

  • Gerenciamento de estado: Usamos useState para rastrear tanto as tarefas quanto o input do usuário.
  • Manipulação de eventos: Tratamos cliques e pressionamentos de tecla.
  • Renderização condicional: Mostramos uma mensagem diferente quando a lista está vazia.
  • Renderização de listas: Usamos map() para transformar o array de tarefas em elementos da interface.
  • Estilização: Aplicamos classes CSS condicionalmente baseadas no estado.

Conceitos Avançados para Crescer

Depois de dominar os fundamentos, você pode avançar para tópicos mais sofisticados:

1. Efeitos Colaterais com useEffect

O hook useEffect permite executar código em momentos específicos do ciclo de vida do componente, como após a renderização ou quando certos valores mudam:

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

function PesquisaProdutos() {
  const [termo, setTermo] = useState('');
  const [resultados, setResultados] = useState([]);
  const [carregando, setCarregando] = useState(false);

  useEffect(() => {
    // Não fazemos nada se o termo estiver vazio
    if (termo.trim() === '') {
      setResultados([]);
      return;
    }
    
    // Função para buscar dados da API
    const buscarProdutos = async () => {
      setCarregando(true);
      try {
        const resposta = await fetch(`https://api.exemplo.com/produtos?q=${termo}`);
        const dados = await resposta.json();
        setResultados(dados);
      } catch (erro) {
        console.error('Erro ao buscar produtos:', erro);
        setResultados([]);
      } finally {
        setCarregando(false);
      }
    };

    // Configuramos um timer para evitar muitas requisições enquanto o usuário digita
    const timer = setTimeout(buscarProdutos, 500);
    
    // Função de limpeza que será executada antes do próximo efeito
    return () => clearTimeout(timer);
  }, [termo]); // Este efeito só executa quando o termo muda

  return (
    <div>
      <input
        type="text"
        value={termo}
        onChange={(e) => setTermo(e.target.value)}
        placeholder="Buscar produtos..."
      />
      
      {carregando && <p>Carregando...</p>}
      
      <ul>
        {resultados.map(produto => (
          <li key={produto.id}>{produto.nome} - R$ {produto.preco}</li>
        ))}
      </ul>
    </div>
  );
}

Este exemplo demonstra o useEffect para implementar uma busca que aguarda o usuário parar de digitar antes de fazer requisições à API.

2. Contexto para Gerenciamento de Estado Global

Conforme sua aplicação cresce, passar props através de muitos níveis de componentes torna-se inconveniente. O Context API oferece uma solução:

// TemasContext.js
import React, { createContext, useState, useContext } from 'react';

const TemasContext = createContext();

export const TemasProvider = ({ children }) => {
  const [tema, setTema] = useState('claro');
  
  const alternarTema = () => {
    setTema(temaAtual => temaAtual === 'claro' ? 'escuro' : 'claro');
  };
  
  return (
    <TemasContext.Provider value={{ tema, alternarTema }}>
      {children}
    </TemasContext.Provider>
  );
};

export const useTema = () => useContext(TemasContext);

// App.js
import React from 'react';
import { TemasProvider } from './TemasContext';
import Cabecalho from './Cabecalho';
import Conteudo from './Conteudo';

function App() {
  return (
    <TemasProvider>
      <div className="app">
        <Cabecalho />
        <Conteudo />
      </div>
    </TemasProvider>
  );
}

// Cabecalho.js
import React from 'react';
import { useTema } from './TemasContext';

function Cabecalho() {
  const { tema, alternarTema } = useTema();
  
  return (
    <header className={`cabecalho ${tema}`}>
      <h1>Minha Aplicação</h1>
      <button onClick={alternarTema}>
        Mudar para tema {tema === 'claro' ? 'escuro' : 'claro'}
      </button>
    </header>
  );
}

O Context é perfeito para informações que muitos componentes precisam acessar, como temas, dados do usuário autenticado ou preferências de idioma.

3. Renderização Otimizada com memo, useMemo e useCallback

Para aplicações maiores, a otimização de performance torna-se importante. O React oferece algumas ferramentas para isso:

import React, { useState, useMemo, useCallback, memo } from 'react';

// Componente filho otimizado com memo
const ItemLista = memo(function ItemLista({ item, onRemover }) {
  console.log(`Renderizando item: ${item.nome}`);
  return (
    <li>
      {item.nome}
      <button onClick={() => onRemover(item.id)}>Remover</button>
    </li>
  );
});

function ListaOtimizada() {
  const [items, setItems] = useState([
    { id: 1, nome: 'Item 1' },
    { id: 2, nome: 'Item 2' },
    { id: 3, nome: 'Item 3' }
  ]);
  const [contador, setContador] = useState(0);
  
  // useCallback memoriza a função entre renderizações
  const removerItem = useCallback((id) => {
    setItems(itemsAtuais => itemsAtuais.filter(item => item.id !== id));
  }, []);
  
  // useMemo memoriza o resultado computado
  const itemsOrdenados = useMemo(() => {
    console.log('Recalculando ordenação...');
    return [...items].sort((a, b) => a.nome.localeCompare(b.nome));
  }, [items]);
  
  return (
    <div>
      <h2>Lista de Itens ({itemsOrdenados.length})</h2>
      
      <button onClick={() => setContador(c => c + 1)}>
        Incrementar contador: {contador}
      </button>
      
      <ul>
        {itemsOrdenados.map(item => (
          <ItemLista 
            key={item.id} 
            item={item} 
            onRemover={removerItem}
          />
        ))}
      </ul>
    </div>
  );
}

Estas otimizações evitam renderizações desnecessárias e recálculos custosos quando o componente renderiza.

Integrando com o Ecossistema React

Uma das grandes vantagens do React é seu ecossistema. Aqui estão algumas bibliotecas populares que você deve conhecer:

Roteamento com React Router

Para criar aplicações de página única (SPA) com múltiplas “páginas”, você precisará de um roteador:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Início</Link>
        <Link to="/sobre">Sobre</Link>
        <Link to="/contato">Contato</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<PaginaInicial />} />
        <Route path="/sobre" element={<Sobre />} />
        <Route path="/contato" element={<Contato />} />
        <Route path="*" element={<NaoEncontrada />} />
      </Routes>
    </BrowserRouter>
  );
}

Gerenciamento de Formulários com React Hook Form

Formulários complexos podem se beneficiar de bibliotecas especializadas:

import { useForm } from 'react-hook-form';

function FormularioContato() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = data => {
    console.log(data);
    // Enviar para API
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Nome</label>
        <input 
          {...register("nome", { 
            required: "Nome é obrigatório",
            minLength: { value: 2, message: "Nome muito curto" }
          })} 
        />
        {errors.nome && <span>{errors.nome.message}</span>}
      </div>
      
      <div>
        <label>Email</label>
        <input 
          {...register("email", { 
            required: "Email é obrigatório",
            pattern: { 
              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i,
              message: "Email inválido" 
            }
          })} 
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>
      
      <div>
        <label>Mensagem</label>
        <textarea 
          {...register("mensagem", { required: "Mensagem é obrigatória" })}
        />
        {errors.mensagem && <span>{errors.mensagem.message}</span>}
      </div>
      
      <button type="submit">Enviar</button>
    </form>
  );
}

Gerenciamento de Estado Global com Redux ou Zustand

Para aplicações maiores, uma solução de gerenciamento de estado como Redux ou Zustand pode ser necessária. Zustand oferece uma API mais simples:

// loja.js
import create from 'zustand';

export const useStore = create(set => ({
  contador: 0,
  produtos: [],
  carregando: false,
  
  incrementar: () => set(state => ({ contador: state.contador + 1 })),
  decrementar: () => set(state => ({ contador: state.contador - 1 })),
  
  buscarProdutos: async () => {
    set({ carregando: true });
    try {
      const resposta = await fetch('<https://api.exemplo.com/produtos>');
      const dados = await resposta.json();
      set({ produtos: dados, carregando: false });
    } catch (erro) {
      console.error(erro);
      set({ carregando: false });
    }
  }
}));

// Componente.js
function PaginaProdutos() {
  const { 
    contador, 
    incrementar, 
    produtos, 
    carregando, 
    buscarProdutos 
  } = useStore();
  
  useEffect(() => {
    buscarProdutos();
  }, [buscarProdutos]);
  
  return (
    <div>
      <div>
        Contador: {contador}
        <button onClick={incrementar}>+</button>
      </div>
      
      <h2>Produtos</h2>
      {carregando ? (
        <p>Carregando...</p>
      ) : (
        <ul>
          {produtos.map(produto => (
            <li key={produto.id}>{produto.nome}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Próximos Passos na sua Jornada React

Depois de dominar os conceitos abordados neste artigo, aqui estão algumas direções para continuar seu aprendizado:

  • TypeScript com React: Adicione tipagem estática para tornar seu código mais robusto e autocomplete melhorado.
  • Server-Side Rendering: Explore frameworks como Next.js para renderização no servidor e melhor SEO.
  • Testes Automatizados: Aprenda a testar seus componentes com Jest e React Testing Library.
  • React Native: Use seu conhecimento React para criar aplicativos móveis nativos.
  • Performance Avançada: Técnicas de otimização como code-splitting, lazy loading e memorização.

Conclusão

O React transformou o desenvolvimento front-end, tornando-o mais previsível, modular e agradável. Esta introdução abrangente deve fornecer as ferramentas necessárias para começar a construir interfaces modernas e interativas com React.

Lembre-se que o React é uma biblioteca, não um framework completo. Isso significa que você tem a liberdade de escolher as ferramentas complementares que melhor atendem às necessidades do seu projeto.

À medida que você ganha experiência, continuará descobrindo novas maneiras de aproveitar o poder do React para criar aplicações web cada vez mais sofisticadas e eficientes. A jornada pode parecer desafiadora inicialmente, mas a curva de aprendizado vale a pena pelo poder e flexibilidade que o React oferece.

Comece com pequenos projetos, experimente diferentes abordagens e, mais importante, continue construindo. A prática é o caminho mais eficaz para dominar o React.

Boa sorte em sua jornada de desenvolvimento React!

Tags

, , , , , , , , ,

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *