React: O que é e por que aprender
React é uma biblioteca JavaScript desenvolvida pelo Facebook para criar interfaces de usuário (UIs) de forma eficiente e escalável. Diferentemente de frameworks como Angular, React foca em uma coisa: renderizar componentes. Ele utiliza uma abordagem declarativa, o que significa você descreve como a UI deve ser, não como fazê-la acontecer. Isso torna o código mais previsível e fácil de debugar.
A filosofia do React repousa em três pilares: componentes reutilizáveis, unidirecionalidade de dados e virtual DOM. O virtual DOM é uma representação em memória da UI real. Quando o estado muda, React atualiza apenas o necessário no DOM real, tornando as aplicações extremamente rápidas. Aprender React hoje é praticamente obrigatório para qualquer desenvolvedor frontend moderno.
JSX: A Sintaxe que Facilita Tudo
O que é JSX
JSX (JavaScript XML) permite escrever estruturas HTML dentro de código JavaScript. Parece HTML, mas é na verdade JavaScript compilado. Um transpilador como Babel converte JSX em chamadas de função React que o navegador compreende.
// JSX
const elemento = <h1>Olá, mundo!</h1>;
// Compilado para:
const elemento = React.createElement('h1', null, 'Olá, mundo!');
JSX é opcional, mas torna o código infinitamente mais legível e intuitivo. Sem JSX, você precisaria escrever React.createElement() manualmente para cada elemento, o que rapidamente vira um pesadelo.
Expressões dinâmicas em JSX
Dentro de chaves {}, você insere expressões JavaScript. Isso permite dados dinâmicos, operações lógicas e até chamadas de função.
const nome = 'Maria';
const idade = 28;
const ativo = true;
const perfil = (
<div>
<h1>Bem-vinda, {nome}!</h1>
<p>Idade: {idade + 1}</p>
<p>Status: {ativo ? 'Online' : 'Offline'}</p>
</div>
);
Lembre-se: dentro de {} você usa JavaScript puro. Fora delas, é HTML. Classes em JSX se chamam className (não class, que é palavra-chave do JS). Atributos multi-palavra como data-id viram camelCase: dataId.
Componentes Funcionais: A Forma Moderna
Estrutura básica
Um componente React é uma função JavaScript que retorna JSX. A função recebe props (propriedades) como argumentos — dados passados de componentes pai para filho.
function Saudacao(props) {
return <h1>Olá, {props.nome}!</h1>;
}
// Uso:
<Saudacao nome="João" />
Componentes funcionais são a forma recomendada atualmente. Componentes de classe (sintaxe mais antiga) ainda existem, mas foram largamente substituídos por hooks, que adicionam estado e efeitos colaterais às funções.
Props: Dados do Pai para o Filho
Props são leitura apenas — um componente filho nunca modifica as props que recebe. Elas fluem sempre de cima para baixo. Você pode desconstruir props para código mais limpo.
function Produto({ titulo, preco, desconto }) {
const precoFinal = preco * (1 - desconto / 100);
return (
<div>
<h2>{titulo}</h2>
<p>R$ {precoFinal.toFixed(2)}</p>
</div>
);
}
// Uso:
<Produto titulo="Notebook" preco={3000} desconto={10} />
Hooks: Estado e Efeitos
O Hook useState adiciona estado aos componentes funcionais. Toda vez que o estado muda, o componente re-renderiza.
import { useState } from 'react';
function Contador() {
const [contagem, setContagem] = useState(0);
return (
<div>
<p>Contagem: {contagem}</p>
<button onClick={() => setContagem(contagem + 1)}>
Incrementar
</button>
</div>
);
}
O Hook useEffect executa efeitos colaterais (requisições HTTP, subscrições, etc.) depois da renderização. Use o array de dependências para controlar quando executa.
import { useState, useEffect } from 'react';
function Usuarios() {
const [usuarios, setUsuarios] = useState([]);
useEffect(() => {
fetch('/api/usuarios')
.then(res => res.json())
.then(dados => setUsuarios(dados));
}, []); // Executa uma vez, quando monta
return (
<ul>
{usuarios.map(user => <li key={user.id}>{user.nome}</li>)}
</ul>
);
}
Composição e Boas Práticas
Componentes pequenos e reutilizáveis
Evite "god components" — componentes gigantes que fazem tudo. Divida a UI em componentes menores, cada um com responsabilidade única. Um botão é um componente, um card é outro.
function BotaoPrimario({ texto, onClick }) {
return (
<button
style={{ background: '#007bff', color: 'white', padding: '10px 20px' }}
onClick={onClick}
>
{texto}
</button>
);
}
function Card({ titulo, filhos, ao_clicar }) {
return (
<div style={{ border: '1px solid #ddd', padding: '15px' }}>
<h3>{titulo}</h3>
{filhos}
<BotaoPrimario texto="Confirmar" onClick={ao_clicar} />
</div>
);
}
Lifting State Up
Quando dois componentes precisam compartilhar estado, mova o estado para o componente pai comum. Isso mantém a fonte da verdade (single source of truth) clara.
function App() {
const [filtro, setFiltro] = useState('');
return (
<div>
<Buscador valor={filtro} onChange={setFiltro} />
<Lista filtro={filtro} />
</div>
);
}
Dica de ouro: React flui de cima para baixo. Dados descem (props), eventos sobem (callbacks). Quando respeita isso, seu código fica limpo e previsível.
Conclusão
Você aprendeu que React é uma biblioteca para criar UIs com componentes reutilizáveis, onde a declaração clara do que você quer é mais importante que os detalhes de implementação. JSX é JavaScript com cara de HTML, tornando o código legível sem perder o poder da linguagem. Componentes funcionais com hooks são o padrão moderno — useState para estado, useEffect para efeitos colaterais, e sempre tenha em mente que props descem e eventos sobem. Comece pequeno, crie componentes focados, e não tenha medo de refatorar. React premia a disciplina.