Você abre qualquer vaga de front-end e lá está: React. Antes de sair decorando sintaxe, vale entender o que essa biblioteca resolve e por que ela virou padrão.
O que é React, afinal
React é uma biblioteca JavaScript para construir interfaces. Só isso. Ele não é um framework completo com regras para tudo: o foco dele é a camada visual, a parte que o usuário vê e com que interage.
A ideia central é quebrar a tela em pedaços pequenos e reutilizáveis, e deixar o React cuidar de atualizar a tela quando os dados mudam. Em vez de você mexer no DOM na mão, você descreve como a interface deve parecer e o React se vira para refletir isso.
Componentes: os blocos de montar
Em React tudo é componente. Um botão, um card, um formulário, a página inteira: cada um é uma função que retorna um pedaço de interface.
function Saudacao() {
return <h1>Olá, mundo!</h1>;
}
Componentes se encaixam uns dentro dos outros, como peças de Lego. Você monta componentes pequenos e combina eles em componentes maiores. Isso deixa o código organizado e, principalmente, reutilizável: escreveu um Botao uma vez, usa em dez lugares.
JSX: HTML dentro do JavaScript
Aquele <h1> no meio do JavaScript é JSX. É uma sintaxe que deixa você escrever algo parecido com HTML direto no código.
function Perfil() {
const nome = "Ana";
return <p>Bem-vinda, {nome}!</p>;
}
As chaves {} são a ponte: dentro delas você coloca JavaScript de verdade — variáveis, contas, chamadas de função. Parece HTML, mas é JavaScript, então a lógica e a marcação vivem juntas.
Props e state: dados que descem e dados que mudam
Componentes precisam de dados, e eles chegam por dois caminhos.
Props são os dados que um componente recebe de fora, como argumentos de função. Quem usa o componente passa os valores.
function Saudacao(props) {
return <h1>Olá, {props.nome}!</h1>;
}
// uso: <Saudacao nome="Ana" />
Props são só de leitura: o componente não muda o que recebeu.
State é o dado interno que muda ao longo do tempo — um contador, um campo de formulário, um menu aberto ou fechado. Quando o state muda, o React re-renderiza o componente sozinho.
import { useState } from "react";
function Contador() {
const [contagem, setContagem] = useState(0);
return (
<button onClick={() => setContagem(contagem + 1)}>
Cliquei {contagem} vezes
</button>
);
}
A regra mental: props descem de pai para filho, state mora dentro do componente.
O modelo declarativo (e por que ele facilita a vida)
Aqui está o pulo do gato. No jeito antigo (imperativo), você dava ordens passo a passo: "pega esse elemento, muda o texto, esconde aquele outro". Fácil de bagunçar.
React é declarativo: você descreve como a tela deve estar para um certo estado, e ponto. Mudou o state? Você não corre atrás de atualizar cada pedacinho na mão. O React compara o que era com o que deve ser e aplica só a diferença.
É a diferença entre dizer "o botão mostra a contagem atual" e ter que lembrar de reescrever o texto do botão toda vez que o número muda. Menos passos manuais, menos bugs.
Ecossistema e quando usar React
React sozinho é enxuto, então na prática ele anda acompanhado. Para começar um projeto hoje, o Vite é o caminho: um comando e você tem um ambiente rodando em segundos.
Aquele useState que apareceu é um hook — funções especiais que dão superpoderes aos componentes, como guardar state ou reagir a eventos. Tem vários (useEffect, useContext e por aí vai), mas isso é papo para depois; por enquanto, saber que eles existem já basta.
E quando React faz sentido? Quando a interface tem bastante interação e estado mudando: dashboards, apps, telas que reagem ao usuário o tempo todo. Para uma página estática simples, pode ser canhão para matar mosca. Use quando a complexidade da tela justifica.
No fim, React é isso: componentes que se encaixam, dados que fluem e uma tela que se atualiza sozinha. Comece montando componentes pequenos, brinque com props e state, e o resto vem no caminho.
