Componentes e JSX: sua primeira interface React com Vite

Imagine a tela de uma loja virtual com 30 produtos. Cada cartão tem foto, nome, preço e botão de compra. Agora o texto do botão precisa mudar em todos eles. Se cada cartão foi escrito separadamente, alguém terá de procurar e corrigir o mesmo trecho 30 vezes — e basta esquecer um para a loja ficar inconsistente.

É esse tipo de repetição que começa pequeno e vira uma dor real em carrinhos, cadastros, painéis de pedidos e áreas de cliente. Nesta aula, você vai montar uma primeira interface sem precisar tratar cada pedaço da tela como um caso isolado. Você não precisa conhecer React, terminal ou Vite antes de começar.

O que é React e que problema ele resolve?

React é uma biblioteca JavaScript para construir e atualizar interfaces. Biblioteca é um conjunto de ferramentas prontas que seu código pode usar, e interface é a parte do produto com a qual a pessoa vê e interage. JavaScript é a linguagem de programação que dá lógica e comportamento a essa interface.

Em vez de mandar você procurar manualmente qual texto ou botão mudou, React recebe uma descrição de como a tela deve estar naquele momento. Quando os dados mudam, ele calcula a nova descrição e sincroniza no navegador somente o que for necessário. Essa ideia é útil em produtos com telas que mudam bastante, como carrinhos, chats, formulários, catálogos e painéis de atendimento.

Isso não é apenas um cenário de aula. Ao reconstruir o Facebook.com, a própria equipe de engenharia da Meta relatou usar React para sustentar uma experiência rápida e muito interativa. Para quem está começando, a escala é diferente, mas a dor é a mesma: manter a tela coerente enquanto muitas partes mudam.

A principal peça dessa organização é o componente: uma função JavaScript que descreve uma parte da interface. Função é um bloco de instruções ao qual damos um nome para poder usá-lo quando necessário. Um cabeçalho pode ser um componente; um cartão de produto pode ser outro; o botão de compra pode ser mais um. Equipes de produto usam essa divisão para reaproveitar partes da tela e localizar mudanças sem vasculhar a aplicação inteira.

Pense no componente como o molde de uma etiqueta de preço em um mercado. O molde define onde entram nome, valor e aviso de promoção; os dados mudam de uma etiqueta para outra. Da mesma forma, um componente mantém uma estrutura e pode produzir conteúdos diferentes. A comparação continua útil quando a tela muda: React usa o mesmo molde para gerar uma nova descrição. O limite da analogia é que a etiqueta de papel é estática, enquanto o componente executa JavaScript.

Se as palavras main, h1 ou “estilo” ainda forem novas, você pode consultar o curso de HTML e o curso de CSS sem sair da trilha para iniciantes. A página do curso completo de React mostra onde esta aula se encaixa.

Até aqui, você já sabe: React resolve a dificuldade de manter muitas partes da interface sincronizadas, e componentes dividem essa interface em peças que podem ser entendidas e reaproveitadas.

Por que precisamos do Vite para começar?

Vite é uma ferramenta que cria e prepara o ambiente do projeto durante o desenvolvimento. Ele resolve tarefas de configuração para que você possa abrir, testar e atualizar sua interface sem montar toda essa estrutura à mão.

O navegador não entende sozinho toda ferramenta usada em um projeto moderno. Além disso, juntar arquivos, acompanhar alterações e preparar uma versão para publicação exigiria várias configurações manuais. Vite entrega um ponto de partida pronto e um servidor de desenvolvimento: um programa que disponibiliza seus arquivos em um endereço local enquanto você trabalha.

Ao final de um projeto, Vite também executa o build, que é a preparação dos arquivos para publicação. React continua responsável pela interface; Vite organiza o ambiente que permite desenvolver e preparar essa interface. Você pode conferir a ferramenta no guia oficial do Vite.

Como criar um projeto React com Vite?

Você vai pedir ao Vite um projeto pronto, entrar na pasta criada, instalar as ferramentas e ligar o servidor local. Esses quatro passos acontecem no terminal, uma janela em que damos instruções ao computador escrevendo texto.

Procure por “Terminal” no seu sistema e abra o aplicativo. Cada linha abaixo é um comando; digite uma, pressione Enter, espere terminar e só então siga para a próxima. Escolha o modelo React com JavaScript:

npm create vite@latest painel-react -- --template react
cd painel-react
npm install
npm run dev

• npm create vite@latest painel-react -- --template react usa o npm, o gerenciador que acompanha o Node.js — programa que permite executar JavaScript fora do navegador —, para executar a versão atual do criador do Vite. painel-react será o nome da nova pasta. O trecho --template react escolhe um projeto React em JavaScript; os dois sinais -- apenas separam as opções do npm das opções entregues ao Vite.
• cd painel-react entra nessa pasta. cd é a abreviação de “mudar diretório”; diretório é outro nome para pasta.
• npm install lê a lista de ferramentas de que o projeto precisa e instala essas dependências, isto é, pacotes usados pelo seu projeto.
• npm run dev inicia o servidor de desenvolvimento. dev é o nome da tarefa de desenvolvimento que já veio configurada pelo Vite.

O terminal mostrará um endereço parecido com http://localhost:5173. localhost significa “este computador”: a página ainda não foi publicada na internet. Abra o endereço no navegador e mantenha o terminal aberto. Quando você salva um arquivo, Vite prepara a mudança e atualiza a página rapidamente.

Até aqui, você já sabe: Vite e React não são concorrentes. Vite prepara a bancada de trabalho; React é a ferramenta usada para construir a interface.

Como escrever seu primeiro componente React?

Um componente React pode ser uma função que devolve JSX, a descrição visual da tela. No primeiro exemplo, App vai representar um pequeno painel de estudos com título e mensagem.

No editor de código, aplicativo usado para abrir e alterar os arquivos do projeto, abra a pasta painel-react, localize src/App.jsx e substitua o conteúdo desse arquivo pelo código abaixo:

function App() {
  return (
    <main>
      <h1>Painel de estudos</h1>
      <p>Primeiro componente em funcionamento.</p>
    </main>
  );
}

export default App;

A primeira linha, function App() {, cria uma função chamada App. O nome começa com letra maiúscula para React diferenciar componentes criados por você de elementos nativos do HTML. A chave { abre o corpo da função.

return ( inicia o valor que a função devolve. Aqui, esse valor é a descrição da interface. Os parênteses permitem distribuir a descrição em várias linhas, o que facilita a leitura.

<main> abre o conteúdo principal da página. Dentro dele, <h1> cria o título “Painel de estudos”, e <p> cria o parágrafo “Primeiro componente em funcionamento.”. </main> fecha exatamente o elemento aberto antes. Essa estrutura também ajuda leitores de tela a entenderem o conteúdo.

); encerra o retorno, e } fecha a função. Por fim, export default App; torna App disponível para o arquivo que inicia o projeto. No modelo do Vite, esse outro arquivo usa o componente para colocá-lo na página. export quer dizer “permitir que outro arquivo use”, e default marca a exportação principal.

Esse é o exemplo mínimo funcionando. Ao trocar o título por “Pedidos de hoje” e o parágrafo por “12 pedidos aguardando preparo”, a mesma estrutura vira o começo de um painel de produto real. O conceito não mudou: a função continua descrevendo aquela parte da tela.

Experimente você mesmo: o que muda antes de salvar?

Antes de tocar no código, tente prever: se você trocar apenas “Painel de estudos” por “Meus pedidos”, qual parte da tela vai mudar? Faça a troca, salve src/App.jsx e observe o navegador. O parágrafo deve continuar igual, pois você alterou somente o conteúdo do h1.

Agora atualize a página manualmente. A mesma interface deverá continuar ali, porque ela vem do componente salvo no arquivo. Esse teste simples conecta uma linha de código a uma mudança visível e prepara você para interfaces maiores.

O que é JSX e por que ele parece HTML dentro do JavaScript?

JSX é uma extensão de sintaxe que permite descrever elementos da interface dentro do JavaScript. Ele se parece com HTML, mas pode inserir valores e cálculos JavaScript usando chaves. Cada cálculo que produz um valor é chamado de expressão.

Vite transforma JSX em instruções que o navegador consegue executar. JSX não é uma string e não é HTML copiado literalmente: é uma forma mais visual de dizer ao React o que o componente deve apresentar. Veja um componente mínimo com dados inseridos na marcação:

function Saudacao() {
  const nome = 'Bia';
  const aulasConcluidas = 1;

  return <p>{nome} concluiu {aulasConcluidas} aula.</p>;
}

function Saudacao() { cria o componente chamado Saudacao e abre a função. Na linha seguinte, const nome = 'Bia'; cria uma constante chamada nome e guarda o texto Bia. Constante é um nome para um valor que não será reatribuído naquele trecho.

const aulasConcluidas = 1; guarda o número de aulas concluídas. A linha vazia apenas separa os dados do retorno para melhorar a leitura.

Em return <p>{nome} concluiu {aulasConcluidas} aula.</p>;, return devolve a descrição, e <p> abre um parágrafo. {nome} pede ao JSX o valor guardado na constante nome; o texto “concluiu” é exibido como foi escrito; {aulasConcluidas} insere o número 1; e </p> fecha o parágrafo. O ponto e vírgula encerra a instrução. A última } fecha a função.

As chaves do JSX funcionam como espaços variáveis no molde da etiqueta: a frase mantém sua estrutura, mas nome e quantidade podem mudar. Em uma plataforma de estudos real, esses valores poderiam vir do cadastro e do progresso de cada aluno. Aqui eles ficam escritos no componente para que você enxergue a ideia com o menor número de peças possível.

JSX exige que cada retorno tenha um elemento raiz, a camada externa que envolve as demais, e que as tags sejam fechadas. Os atributos, configurações escritas na abertura da tag, seguem o formato esperado pelo JavaScript. Para aplicar uma classe CSS, use className; para um elemento sem conteúdo interno, feche a tag, como em <img />. Se esses detalhes parecerem novos, tudo bem: você vai praticá-los aos poucos, e pode rever a base no curso de HTML.

Experimente você mesmo: qual frase os dados vão formar?

Antes de editar, tente prever a frase completa se nome passar de Bia para Rafa e aulasConcluidas passar de 1 para 3. Depois faça as duas trocas e salve. Confira se somente os valores entre chaves mudaram e se o restante da frase continuou no mesmo lugar.

Você também vai notar que a palavra “aula” continua no singular. Isso não é um erro do React: foi exatamente o texto que o componente descreveu. Em um produto real, o componente precisaria decidir entre singular e plural, mas essa decisão fica para uma etapa posterior. Primeiro, domine a ligação entre valor e tela.

Até aqui, você já sabe: JSX descreve a interface e aceita expressões entre chaves. Um componente junta essa descrição aos dados necessários para mostrar uma parte compreensível do produto.

Qual erro de JSX aparece quando o nome não existe?

Se o JSX tenta usar um nome que não foi criado, o componente não consegue terminar a renderização, o processo de transformar sua descrição em tela. O navegador ou a tela de erro do Vite mostra ReferenceError: nome is not defined, indicando que nome não foi definido.

Para observar o problema, troque somente const nome = 'Bia'; por const pessoa = 'Bia';, mas deixe {nome} no retorno. O componente passa a procurar uma constante que não existe. O conserto é fazer os dois nomes coincidirem: volte a declaração para nome ou use {pessoa} no JSX.

Leia a mensagem como uma pista, não como uma bronca. ReferenceError fala de uma referência inválida, e is not defined diz que o nome procurado não foi criado naquele alcance. Depois do teste, desfaça a alteração para continuar com o componente funcionando.

Outro cuidado é usar <Saudacao /> ao colocar esse componente dentro de outro JSX. Essa escrita informa ao React que Saudacao é um componente. Chamar Saudacao() diretamente pula parte do controle que React mantém sobre aquela parte da interface.

Como o laboratório muda a tela quando você clica?

O laboratório oferece uma prévia de estado, a memória temporária de um componente. Você ainda estudará esse assunto com calma; nesta aula, basta observar que um clique muda um valor e React redesenha a descrição sem recarregar a página inteira.

No código já preparado, React.useState(false) começa com o painel fechado. useState é uma ferramenta do React que devolve duas peças: aberto, o valor atual, e setAberto, a função que solicita um novo valor. O false inicial significa “não mostrar o objetivo”.

O button é o botão visível. Seu type="button" informa que ele é um botão comum, e onClick liga o clique à ação setAberto(!aberto). Esse clique é um evento, uma ação que a interface percebe. O sinal ! inverte o valor: fechado vira aberto, e aberto vira fechado. A expressão entre chaves escolhe o texto do botão; a condição aberto && mostra o parágrafo somente quando o valor atual é verdadeiro.

Experimente você mesmo: o que muda a cada clique?

Antes de executar, preveja o estado inicial: o parágrafo com o objetivo estará visível ou escondido? Em seguida, clique em “Executar” e confira. Clique uma vez no botão e observe o texto e o parágrafo; clique novamente e verifique se ambos voltam à condição inicial sem recarregar a página.

Depois, edite o nome “Bia” e os dois textos do botão. Faça uma nova previsão e execute outra vez. Se a troca ocorrer a cada clique, você comprovou na prática que o componente pode devolver uma descrição diferente conforme sua memória. Na aula de eventos e estado, você vai entender essa mecânica sem atalhos.

Na missão da aula, o contador usa essa mesma prévia de estado. Clique três vezes e confirme o número 3; depois atualize a página e observe que o valor volta ao início. O estado local permanece entre renderizações do componente, mas não foi configurado para sobreviver a uma atualização completa do navegador.

React, JSX e Vite são a mesma coisa?

Não. React organiza e atualiza a interface, JSX é a sintaxe usada para descrevê-la e Vite prepara o ambiente em que você desenvolve e publica o projeto. Eles trabalham juntos nesta aula, mas cada um resolve um problema diferente.

Você também não precisa decorar todos os comandos agora. Guarde a sequência: criar o projeto, entrar na pasta, instalar dependências e ligar o servidor. A prática repetida transforma essa sequência em familiaridade.

React também não elimina a necessidade de HTML e CSS. Os elementos continuam organizando o conteúdo, e o CSS continua cuidando da aparência. Se quiser ver todas as trilhas disponíveis antes de seguir, visite o catálogo de cursos.

Qual é o próximo passo depois de componentes e JSX?

Agora você consegue explicar por que React existe, separar React de Vite, criar um projeto, ler um componente e inserir valores no JSX. O próximo passo é fazer componentes conversarem sem copiar dados em vários lugares.

Até aqui, você já sabe: a dor vem da repetição e da dificuldade de manter a tela consistente; componentes criam peças reconhecíveis; JSX descreve o que aparece; Vite prepara o projeto; e uma mudança de dados pode produzir uma nova interface.

Essas informações passadas entre componentes recebem o nome de props. Siga para Props e composição: conecte componentes React. Você vai aprender a enviar dados do componente pai para os filhos e transformar o pequeno molde desta aula em cartões realmente reutilizáveis.