Se você já programou alguma interface web, sabe que a bagunça pode começar rápido. Criamos um botão aqui, um formulário ali, um monte de document.querySelector espalhado, e quando percebemos, o código virou um monstro difícil de manter. É aí que entra o React.
React é uma biblioteca JavaScript criada pelo Facebook (agora Meta) para facilitar o desenvolvimento de interfaces de usuário. Ele não é um framework completo como o Angular, nem uma simples biblioteca de manipulação de DOM como o jQuery. O React fica no meio do caminho: ele foca na criação de componentes reutilizáveis, que se atualizam de forma eficiente conforme o estado da aplicação muda.
Tabela de Conteúdo
Mas por que aprender React?
A resposta curta: porque ele domina o mercado. A resposta longa: porque ele é prático, performático e altamente escalável. Empresas como Netflix, Instagram e Airbnb utilizam React justamente porque ele resolve um dos maiores problemas do desenvolvimento web — a complexidade crescente conforme o projeto cresce.
Aqui estão alguns motivos pelos quais o React é uma das tecnologias mais populares entre desenvolvedores:
Componentização: Em vez de escrever um HTML gigantesco, você divide a interface em componentes independentes, como peças de Lego. Cada componente gerencia seu próprio estado e pode ser reutilizado onde quiser.
DOM Virtual: O React não altera o HTML diretamente. Ele cria uma cópia virtual do DOM (a estrutura da página) e só faz mudanças quando necessário, tornando tudo muito mais rápido.
Reatividade e Estado: O React permite que você trabalhe com estados, que são como variáveis que podem mudar e atualizar automaticamente a interface sem precisar recarregar a página.
Ecossistema Gigante: A comunidade do React é gigantesca, e isso significa que há milhares de bibliotecas, tutoriais e soluções prontas para qualquer problema que você encontrar.
Se você quer aprender a criar interfaces modernas, performáticas e bem estruturadas, React é uma das melhores escolhas. No próximo tópico, vamos ver como configurar seu ambiente e criar seu primeiro projeto. Preparado?
Configurando o Ambiente: Criando Seu Primeiro Projeto
Beleza, agora que você já entendeu o que é o React e por que ele é tão popular, vamos colocar a mão na massa e configurar o ambiente. Sem frescura, direto ao ponto.
O que você precisa instalar?
Antes de sair criando código, precisamos garantir que seu ambiente está pronto para rodar projetos React. Aqui estão os requisitos básicos:
Node.js e npm (ou yarn) – O React precisa do Node.js para funcionar. O npm (Node Package Manager) vem junto com ele e é usado para instalar pacotes. Você pode baixar e instalar o Node.js neste link. Para verificar se está tudo certo, rode este comando no terminal:
node -v
npm -vSe aparecer a versão do Node e do npm, significa que a instalação deu certo.
Criando seu primeiro projeto React
Agora que seu ambiente está configurado, podemos criar um projeto React. Existem algumas formas de fazer isso, mas as mais comuns são usando o Create React App (CRA) ou o Vite.
Opção 1: Usando Create React App (mais fácil, mas mais pesado)
Se você quer algo pronto e configurado sem se preocupar com detalhes técnicos, o Create React App é a melhor opção. Basta rodar o seguinte comando no terminal:
npx create-react-app meu-projetoDepois de instalado, entre na pasta do projeto e rode o servidor de desenvolvimento:
cd meu-projeto
npm startO navegador vai abrir automaticamente com seu primeiro projeto React rodando.
Opção 2: Usando Vite (mais leve e rápido)
Se você quer um ambiente mais moderno e rápido, recomendo o Vite. Para criar um projeto React com ele, rode:
npm create vite@latest meu-projeto --template reactDepois, entre na pasta e instale as dependências:
cd meu-projeto
npm install
npm run devO Vite é mais rápido para rodar e compilar, então pode ser uma ótima escolha se você quiser algo mais otimizado.
Entendendo a estrutura do projeto
Independente da ferramenta escolhida, você verá uma estrutura de arquivos parecida com esta:
meu-projeto/
├── node_modules/ # Pacotes instalados
├── public/ # Arquivos estáticos (favicon, index.html)
├── src/ # Código-fonte do React
│ ├── App.jsx # Componente principal
│ ├── index.jsx # Ponto de entrada da aplicação
├── package.json # Configurações e dependências do projetoAqui, o arquivo mais importante no começo será o App.jsx, pois ele é o coração da aplicação.
Próximos passos
Agora que seu projeto está rodando, é hora de entender como o React funciona de verdade. No próximo tópico, vamos falar sobre componentes e JSX, a base para construir qualquer aplicação React. Bora pro código!
Componentes e JSX: A Base do React
Agora que o ambiente está pronto, é hora de entender o conceito mais importante do React: componentes. Se você já criou uma página HTML tradicional, sabe que normalmente tudo fica misturado dentro de um arquivo, com um monte de div, button, h1 e outros elementos espalhados. No React, as coisas são organizadas de forma diferente.
Componentes são como pequenos blocos independentes da interface. Em vez de ter um único arquivo gigante com tudo misturado, você pode dividir sua aplicação em partes menores e reutilizáveis. Um botão pode ser um componente, um cabeçalho pode ser outro e assim por diante.
O que são componentes?
No React, um componente é simplesmente uma função ou classe que retorna um pedaço de interface. Hoje em dia, a forma mais usada é a de componentes funcionais. Um exemplo simples:
function OlaMundo() {
return <h1>Olá, mundo!</h1>;
}Esse componente OlaMundo retorna um título (h1). Para usá-lo em outro lugar da aplicação, basta chamá-lo como uma tag HTML dentro do App.jsx:
function App() {
return (
<div>
<OlaMundo />
</div>
);
}O React vai renderizar o OlaMundo, transformando isso em um h1 na tela.
O que é JSX?
Se você notou, o código dentro do return parece HTML, mas na verdade não é. Isso se chama JSX (JavaScript XML), uma sintaxe criada para facilitar a escrita de componentes no React. O JSX permite que você escreva algo parecido com HTML dentro do JavaScript, mas com algumas diferenças importantes.
Por exemplo, no HTML normal você escreveria assim:
<button onclick="alert('Clicado!')">Clique aqui</button>Já no JSX, isso muda um pouco:
<button onClick={() => alert('Clicado!')}>Clique aqui</button>Aqui, onClick usa camelCase e recebe uma função JavaScript dentro das chaves {}. Essa é uma das principais diferenças do JSX em relação ao HTML tradicional.
Diferença entre componentes funcionais e de classe
No passado, o React utilizava muito componentes de classe, que eram escritos de uma forma diferente:
class OlaMundo extends React.Component {
render() {
return <h1>Olá, mundo!</h1>;
}
}Com a chegada dos React Hooks, os componentes funcionais passaram a ser a melhor escolha, pois são mais simples e eficientes. Hoje em dia, raramente se usa componentes de classe em projetos novos.
Como passar dados para um componente?
Muitas vezes, você vai querer que um componente receba informações dinâmicas, como um nome de usuário ou uma mensagem. No React, isso é feito através das propriedades (props).
Exemplo:
function Saudacao(props) {
return <h1>Olá, {props.nome}!</h1>;
}Para usar esse componente passando um nome:
<Saudacao nome="Carlos" />O React renderiza:
<h1>Olá, Carlos!</h1>Isso permite criar componentes reutilizáveis e flexíveis.
Componentes e JSX são a base do React. Entender bem esses conceitos é essencial para criar aplicações bem organizadas e fáceis de manter.
Estado e Ciclo de Vida: Controlando Dados no React
Até agora, vimos como criar componentes e passar informações para eles usando props. Mas e quando um componente precisa armazenar e modificar seus próprios dados? É aí que entra o estado.
O estado no React permite que um componente guarde informações e as atualize conforme necessário. Diferente das props, que vêm de fora e não podem ser alteradas pelo próprio componente, o estado é interno e gerenciado pelo próprio React.
Usando o useState para armazenar dados
Para gerenciar o estado em componentes funcionais, utilizamos o useState, um Hook do React. Vamos ver um exemplo básico:
import { useState } from "react";
function Contador() {
const [contador, setContador] = useState(0);
return (
<div>
<p>Valor: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}Aqui, useState(0) cria um estado chamado contador, inicializado com 0. A função setContador é usada para atualizar esse valor. Sempre que o botão é clicado, o React atualiza o componente, refletindo a mudança na tela.
Como funciona a atualização de estado?
O React não altera diretamente o estado de um componente. Em vez disso, ele substitui o valor antigo por um novo sempre que chamamos a função de atualização (setContador no exemplo acima).
Isso é essencial porque permite que o React controle quando e como o componente deve ser atualizado. Alterações diretas, como contador = contador + 1, não funcionam corretamente porque o React não detecta essa mudança automaticamente.
Ciclo de Vida dos Componentes
Em aplicações reais, os componentes frequentemente precisam executar ações em momentos específicos, como ao serem montados na tela, atualizados ou removidos. No React, essas fases são conhecidas como ciclo de vida.
Os principais momentos do ciclo de vida são:
- Montagem: O componente aparece na tela.
- Atualização: O estado ou as props mudam e o componente precisa se atualizar.
- Desmontagem: O componente é removido da tela.
Para lidar com essas mudanças em componentes funcionais, usamos o useEffect, outro Hook do React.
Executando ações com useEffect
Vamos supor que queremos exibir uma mensagem no console sempre que o componente for renderizado. Podemos fazer isso com o useEffect:
import { useState, useEffect } from "react";
function Contador() {
const [contador, setContador] = useState(0);
useEffect(() => {
console.log("O componente foi renderizado.");
});
return (
<div>
<p>Valor: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}Sempre que o estado muda, o useEffect será executado novamente. Mas se quisermos rodá-lo apenas uma vez, quando o componente for montado, basta passar um array vazio como segundo argumento:
useEffect(() => {
console.log("O componente foi montado.");
}, []);
Se quisermos executar uma ação sempre que o valor do contador mudar, basta adicionar contador ao array de dependências:
useEffect(() => {
console.log(`O contador mudou para: ${contador}`);
}, [contador]);
Isso é útil para carregar dados de uma API, limpar recursos ou reagir a mudanças no estado.
O estado e o ciclo de vida são fundamentais para criar aplicações dinâmicas no React. O useState permite armazenar e alterar dados internos, enquanto o useEffect ajuda a reagir a mudanças e controlar o comportamento do componente ao longo do tempo.
Manipulação de Eventos: Interagindo com o Usuário
Criar interfaces reativas não se resume apenas a exibir dados na tela. Muitas vezes, precisamos permitir que o usuário interaja com a aplicação de alguma forma, como clicando em botões, preenchendo formulários ou movendo o mouse. No React, essas interações são tratadas por meio de eventos.
Se você já usou addEventListener no JavaScript puro, a ideia é parecida. A diferença é que no React, os eventos são definidos diretamente nos elementos JSX, utilizando camelCase.
Adicionando eventos a elementos
Vamos começar com um exemplo básico:
function Botao() {
function handleClick() {
alert("Botão clicado!");
}
return <button onClick={handleClick}>Clique aqui</button>;
}Aqui, o evento onClick chama a função handleClick quando o botão é pressionado. Note que a função não deve ser chamada diretamente (onClick={handleClick()}), pois isso faria com que ela fosse executada automaticamente assim que o componente fosse renderizado.
Passando parâmetros para eventos
Se precisarmos passar argumentos para a função de evento, usamos uma arrow function:
function Botao() {
function handleClick(nome) {
alert(`Olá, ${nome}!`);
}
return <button onClick={() => handleClick("Carlos")}>Clique aqui</button>;
}Dessa forma, handleClick só será chamada quando o botão for clicado, com o argumento correto.
Eventos em formulários
Outra interação comum é o usuário digitar algo em um campo de texto. Podemos capturar esse valor usando o evento onChange:
import { useState } from "react";
function Formulario() {
const [nome, setNome] = useState("");
function handleChange(evento) {
setNome(evento.target.value);
}
return (
<div>
<input type="text" value={nome} onChange={handleChange} />
<p>Você digitou: {nome}</p>
</div>
);
}Aqui, o estado nome é atualizado sempre que o usuário digita algo no campo de texto.
Prevenindo o comportamento padrão
Em alguns casos, precisamos evitar a ação padrão de um evento. Por exemplo, ao enviar um formulário, o navegador recarrega a página. Para impedir isso, usamos event.preventDefault():
function Formulario() {
function handleSubmit(event) {
event.preventDefault();
alert("Formulário enviado!");
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Enviar</button>
</form>
);
}Agora, o alerta aparece sem que a página recarregue.
Eventos de teclado e mouse
O React também permite capturar eventos como pressionamento de teclas e movimentação do mouse:
function CapturaTecla() {
function handleKeyPress(evento) {
alert(`Tecla pressionada: ${evento.key}`);
}
return <input type="text" onKeyDown={handleKeyPress} />;
}No caso de eventos do mouse:
function MovimentacaoMouse() {
function handleMouseMove(evento) {
console.log(`Mouse em: X=${evento.clientX}, Y=${evento.clientY}`);
}
return <div onMouseMove={handleMouseMove} style={{ height: "200px", background: "#ddd" }} />;
}Esse exemplo exibe as coordenadas do mouse no console sempre que ele se move dentro da área definida.
Manipular eventos no React é essencial para criar aplicações interativas. O uso de onClick, onChange, onSubmit e outros eventos torna o código mais intuitivo e organizado.
Renderização de Listas e Condicionais no React
Grande parte das aplicações modernas precisa lidar com listas de dados. Seja uma lista de tarefas, produtos de um e-commerce ou comentários em um post, o React facilita essa exibição de maneira dinâmica e eficiente. Além disso, muitas vezes é necessário exibir ou ocultar elementos dependendo de certas condições. Vamos explorar como fazer isso da forma correta.
Renderizando listas no React
No JavaScript, é comum usarmos o método .map() para percorrer arrays e criar elementos dinamicamente. No React, a lógica é a mesma, mas dentro do JSX.
Exemplo de uma lista de nomes sendo exibida em um componente:
function ListaNomes() {
const nomes = ["Alice", "Bruno", "Carlos", "Daniela"];
return (
<ul>
{nomes.map((nome, index) => (
<li key={index}>{nome}</li>
))}
</ul>
);
}Aqui, o .map() percorre o array nomes, gerando um elemento <li> para cada item. O atributo key é obrigatório e deve ser único para cada item, ajudando o React a otimizar a renderização. Se a lista for baseada em dados vindos de um banco ou API, é melhor usar um id único ao invés do índice do array.
Renderização condicional
Nem sempre queremos exibir todos os elementos de uma vez. Muitas vezes, a interface precisa mudar com base em alguma condição, como a existência de dados ou o status de um usuário.
Podemos fazer isso de três formas principais:
1. Operador ternário
function Mensagem({ logado }) {
return <p>{logado ? "Bem-vindo de volta!" : "Por favor, faça login."}</p>;
}Se logado for true, exibe uma mensagem de boas-vindas; caso contrário, pede para o usuário fazer login.
2. && para exibir elementos somente se a condição for verdadeira
function Notificacao({ temNotificacoes }) {
return <>{temNotificacoes && <p>Você tem novas notificações.</p>}</>;
}Se temNotificacoes for true, a mensagem será exibida. Caso contrário, nada será renderizado.
3. if dentro da função
function Status({ conectado }) {
if (!conectado) {
return <p>Você está offline.</p>;
}
return <p>Conectado à rede.</p>;
}Esse método é útil quando a lógica da renderização é mais complexa.
Lista condicional: combinando os dois conceitos
Podemos filtrar ou modificar listas antes da renderização. Suponha que queremos exibir apenas usuários ativos:
function ListaUsuarios() {
const usuarios = [
{ id: 1, nome: "Ana", ativo: true },
{ id: 2, nome: "João", ativo: false },
{ id: 3, nome: "Mariana", ativo: true },
];
return (
<ul>
{usuarios
.filter((usuario) => usuario.ativo)
.map((usuario) => (
<li key={usuario.id}>{usuario.nome}</li>
))}
</ul>
);
}Aqui, .filter() remove os usuários inativos antes de renderizar a lista.
Conclusão
Saber manipular listas e controlar a exibição de elementos é essencial para criar interfaces dinâmicas e eficientes no React. O uso correto de .map() para renderizar listas e das condicionais para controlar a exibição melhora a organização do código e a experiência do usuário.
Com isso, cobrimos os fundamentos do React para iniciantes. Agora, você já tem uma base sólida para explorar conceitos mais avançados e criar aplicações mais robustas.
Leia também: Desenvolvimento Web: 6 DICAS para iniciantes!
