Criar Componente no React js

REACT JS · TUTORIAL PARA INICIANTES

Como Criar Componentes no React JS: Guia Passo a Passo com Exemplos

Você já percebeu que vários sites possuem botões, cartões, menus e formulários parecidos? O React permite criar essas partes separadamente e reutilizá-las em diferentes lugares. Neste tutorial, você vai aprender o que são componentes no React, como criá-los, como enviar informações para eles e como organizar seu código.

1. O que é um componente no React?

Um componente é uma pequena parte da interface de um site. Ele pode representar um botão, um cartão de produto, um menu de navegação ou até uma página inteira.

Imagine que você está construindo uma casa com blocos de montar. Em vez de fabricar cada parede do zero, você cria blocos e os utiliza várias vezes. No React, os componentes funcionam de maneira parecida.

Exemplo do cotidiano: imagine uma loja virtual com 20 produtos. Todos precisam mostrar uma imagem, um nome e um preço. Você pode criar um componente chamado Produto e utilizá-lo nos 20 produtos.

Veja dois exemplos simples de componentes:

• BotaoComprar: mostra um botão para comprar um produto.
• CartaoProduto: mostra o nome, o preço e a descrição de um produto.

A grande vantagem é que você pode escrever a estrutura uma vez e reutilizá-la quantas vezes precisar.

2. O que você precisa conhecer antes?

Para criar componentes, é útil conhecer três conceitos básicos: JavaScript, JSX e funções.

JavaScript

JavaScript é uma linguagem de programação que permite criar comportamentos e trabalhar com informações. O React utiliza JavaScript para construir interfaces.

Funções

Uma função é um bloco de código que pode ser executado quando necessário. No React, um componente normalmente é uma função que retorna o que deve aparecer na tela.

JSX

JSX é uma sintaxe que permite escrever estruturas parecidas com HTML dentro do JavaScript. Ele facilita a descrição da interface que queremos mostrar.

Veja um exemplo de JSX:

Exemplo 1 — Uma estrutura JSX

Este código descreve um título e um parágrafo que poderão aparecer na tela.

Exemplo.jsx

const mensagem = (
  <div>
    <h1>Olá, mundo!</h1>
    <p>Estou aprendendo React.</p>
  </div>
);

Entenda as partes:

• const cria uma variável cujo valor não pode ser reatribuído.
• mensagem é o nome da variável.
• Os parênteses agrupam a estrutura JSX.
• div, h1 e p representam elementos da interface.

Atenção: esse primeiro exemplo apenas guarda JSX em uma variável. Para exibi-lo em uma aplicação React, precisamos utilizá-lo dentro de um componente renderizado pela aplicação.

3. Como criar seu primeiro componente React

Vamos criar um componente chamado Saudacao. Ele mostrará uma mensagem na tela.

1

Crie um arquivo

Em um projeto React, crie um arquivo chamado Saudacao.jsx. Se o projeto utiliza TypeScript, o arquivo pode ser Saudacao.tsx.

2

Crie a função do componente

Escreva uma função com o nome Saudacao e faça com que ela retorne JSX.

Exemplo 2 — Arquivo Saudacao.jsx

Este componente apresenta uma mensagem simples.

Saudacao.jsx

function Saudacao() {
  return (
    <div>
      <h1>Olá, estudante!</h1>
      <p>Bem-vindo ao React.</p>
    </div>
  );
}

export default Saudacao;

Explicação de cada parte:

• function Saudacao() declara a função do componente.
• return indica o que o componente devolve para o React exibir.
• div agrupa o título e o parágrafo em um único elemento.
• export default Saudacao permite importar esse componente em outro arquivo.

Resultado esperado:
Olá, estudante!
Bem-vindo ao React.

3

Utilize o componente

Agora, abra o arquivo principal da sua aplicação, geralmente App.jsx, e importe o componente.

Exemplo 3 — Utilizando Saudacao em App.jsx

App.jsx

import Saudacao from "./Saudacao";

function App() {
  return (
    <main>
      <Saudacao />
    </main>
  );
}

export default App;

O comando import traz o componente para o arquivo atual. Já <Saudacao /> utiliza o componente como se fosse uma etiqueta personalizada.

Em um projeto React já configurado, o ponto de entrada da aplicação renderiza o componente principal, normalmente App. Assim, o React consegue exibir também o componente Saudacao, que está dentro dele.

Regra importante: os nomes dos componentes React devem começar com letra maiúscula. Use Saudacao, e não saudacao, quando estiver criando um componente personalizado.

4. Como funcionam os componentes por trás dos panos?

Quando você escreve <Saudacao />, o React reconhece que precisa utilizar o componente chamado Saudacao.

O processo pode ser entendido em quatro etapas:

1

O React encontra o componente

A aplicação contém uma referência ao componente Saudacao.

2

O componente retorna JSX

A função descreve os elementos que devem fazer parte da interface.

3

O React processa a descrição

O JSX é transformado em chamadas JavaScript que descrevem a interface. O React usa essa descrição para determinar as alterações necessárias.

4

O navegador mostra o resultado

O React DOM cuida de atualizar os elementos da página no navegador.

Uma comparação simples: o componente é como a receita de um bolo. O JSX descreve os ingredientes e a estrutura. O React utiliza essa descrição para organizar o que deve aparecer na tela.

É importante entender que um componente não é necessariamente um arquivo separado. Criar um arquivo para cada componente é uma forma comum de organizar projetos, mas componentes também podem ser declarados no mesmo arquivo quando isso faz sentido.

5. Como passar informações para um componente com props

Até agora, nosso componente sempre mostrou a mesma mensagem. Mas e se quisermos mostrar o nome de diferentes pessoas sem criar uma função nova para cada uma?

Para isso, usamos props. Props são informações que um componente recebe de quem o utiliza.

Imagine um formulário de inscrição. O mesmo modelo pode receber o nome de várias pessoas. As props funcionam como os campos preenchidos desse formulário.

Exemplo 4 — Componente que recebe um nome

O componente recebe a informação pela propriedade nome e utiliza seu valor na mensagem.

Saudacao.jsx

function Saudacao({ nome }) {
  return (
    <h1>
      Olá, {nome}!
    </h1>
  );
}

export default Saudacao;

O que significa { nome }?

A função recebe um objeto chamado props. A escrita { nome } utiliza a desestruturação do JavaScript para retirar a propriedade nome desse objeto.

Dentro do JSX, as chaves permitem inserir uma expressão JavaScript. Assim, {nome} mostra o valor recebido, em vez de exibir a palavra literalmente.

Exemplo 5 — Enviando duas informações diferentes

App.jsx

import Saudacao from "./Saudacao";

function App() {
  return (
    <main>
      <Saudacao nome="Ana" />
      <Saudacao nome="Pedro" />
    </main>
  );
}

export default App;

Resultado esperado:
Olá, Ana!
Olá, Pedro!

Observe a economia de trabalho: criamos o componente uma vez e o utilizamos duas vezes, enviando valores diferentes.

Boa prática: trate as props como informações somente para leitura. Se precisar mudar uma informação durante a interação com o usuário, normalmente você utilizará o estado do React, conhecido como state.

6. Como criar um componente de cartão de produto

Agora vamos utilizar o que aprendemos em um exemplo parecido com uma loja virtual. Nosso cartão mostrará o nome e o preço de um produto.

Primeiro, criaremos um componente chamado CartaoProduto. Ele receberá duas props: nome e preco.

Exemplo 6 — Criando CartaoProduto.jsx

CartaoProduto.jsx

function CartaoProduto({ nome, preco }) {
  return (
    <article>
      <h2>{nome}</h2>
      <p>
        Preço: R$ {preco.toFixed(2)}
      </p>
    </article>
  );
}

export default CartaoProduto;

Entendendo o código:

• nome guarda o nome do produto recebido.
• preco guarda o preço recebido como número.
• article representa um conteúdo independente na página.
• toFixed(2) transforma o número em uma representação com duas casas decimais.

Atenção: toFixed(2) não transforma o valor em uma moeda completa. Ele apenas formata o número com duas casas decimais. Para exibir preços brasileiros de maneira mais adequada, também podemos utilizar Intl.NumberFormat.

Exemplo 7 — Utilizando o cartão com produtos diferentes

App.jsx

import CartaoProduto from "./CartaoProduto";

function App() {
  return (
    <main>
      <CartaoProduto
        nome="Teclado"
        preco={129.90}
      />

      <CartaoProduto
        nome="Mouse"
        preco={79.90}
      />
    </main>
  );
}

export default App;

Como os preços são valores numéricos, usamos chaves para enviá-los como expressões JavaScript. Se escrevêssemos preco="129.90", estaríamos enviando uma string, ou seja, um texto.

Por que esse modelo é útil? Se quisermos mudar o formato visual de todos os cartões, podemos alterar o componente CartaoProduto sem reescrever cada produto.

7. Como estilizar componentes com CSS

Criar o componente define sua estrutura. Para mudar cores, espaçamentos, bordas e fontes, podemos utilizar CSS.

No React, um arquivo CSS pode ser importado para que suas regras sejam incluídas na aplicação. Isso não significa que todas as regras ficam automaticamente isoladas: os seletores CSS continuam podendo afetar outros elementos que correspondam a eles.

Exemplo 8 — Estilizando um cartão de produto

CartaoProduto.css

/* Aparência do cartão de produto */
.cartao-produto {
  background: #161b22;
  color: #ffffff;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.cartao-produto h2 {
  color: #58a6ff;
  margin-top: 0;
}

Para usar esse CSS, importe o arquivo no componente e aplique a classe ao elemento:

CartaoProduto.jsx

import "./CartaoProduto.css";

function CartaoProduto({ nome, preco }) {
  return (
    <article className="cartao-produto">
      <h2>{nome}</h2>
      <p>Preço: R$ {preco.toFixed(2)}</p>
    </article>
  );
}

export default CartaoProduto;

Perceba que utilizamos className, e não class. Em JSX, a propriedade padrão para definir a classe CSS de um elemento é className.

8. Como criar componentes com conteúdo interno

Além de receber informações por props, um componente pode receber outros elementos dentro dele. Para isso, o React disponibiliza a propriedade especial children.

Imagine uma caixa. O componente cria a caixa, enquanto o conteúdo interno pode ser diferente a cada utilização.

Exemplo 9 — Componente Caixa

Caixa.jsx

function Caixa({ children }) {
  return (
    <section className="caixa">
      {children}
    </section>
  );
}

export default Caixa;

Agora podemos colocar diferentes conteúdos dentro do mesmo componente:

App.jsx

import Caixa from "./Caixa";

function App() {
  return (
    <main>
      <Caixa>
        <h2>Meu perfil</h2>
        <p>Aprendendo React.</p>
      </Caixa>

      <Caixa>
        <h2>Meus estudos</h2>
        <p>Praticando componentes.</p>
      </Caixa>
    </main>
  );
}

export default App;

O React passa o conteúdo que está entre as etiquetas de abertura e fechamento para a propriedade children. Dessa maneira, o componente Caixa controla a estrutura externa, enquanto cada utilização define seu próprio conteúdo.

9. Diferença entre componente, props e state

Esses três conceitos trabalham juntos, mas cada um tem uma função diferente.

Conceito	O que faz	Exemplo
Componente	Define uma parte da interface.	Botão, menu ou cartão.
Props	Passam informações para o componente.	Nome e preço do produto.
State	Guarda informações que podem mudar durante o uso.	Quantidade de itens no carrinho.

Por exemplo, um componente Contador pode começar com o número zero e aumentar quando o usuário clica em um botão. Como o número muda durante a interação, podemos utilizar o hook useState.

Exemplo 10 — Um componente interativo com useState

Contador.jsx

import { useState } from "react";

function Contador() {
  const [quantidade, setQuantidade] =
    useState(0);

  return (
    <section>
      <p>Quantidade: {quantidade}</p>

      <button
        onClick={() =>
          setQuantidade(q => q + 1)
        }
      >
        Adicionar
      </button>
    </section>
  );
}

export default Contador;

Como funciona:

• useState(0) cria um estado inicial com o valor zero.
• quantidade contém o valor atual.
• setQuantidade é a função utilizada para solicitar a mudança do estado.
• onClick define o que acontece quando o usuário clica no botão.
• q => q + 1 calcula o próximo valor a partir do valor anterior.

Quando o estado muda, o React agenda uma nova renderização do componente. Isso permite atualizar o número mostrado na tela.

Importante: não altere diretamente o estado, por exemplo, usando quantidade++. Utilize a função de atualização, como setQuantidade, para que o React consiga acompanhar a mudança.

10. Como evitar erros comuns ao criar componentes

Erro 1 — Começar o nome do componente com letra minúscula

Errado:

Código incorreto

function saudacao() {
  return <h1>Olá!</h1>;
}

Correto:

Código correto

function Saudacao() {
  return <h1>Olá!</h1>;
}

O React interpreta elementos com nomes iniciados por letra minúscula como elementos HTML conhecidos ou personalizados. Para identificar um componente React, utilize a inicial maiúscula.

Erro 2 — Esquecer de retornar o JSX

Errado:

Código incorreto

function Mensagem() {
  <h1>Olá!</h1>;
}

Correto:

Código correto

function Mensagem() {
  return <h1>Olá!</h1>;
}

Sem um retorno, a função não entrega a estrutura JSX esperada para exibição. Em componentes que utilizam chaves no corpo da função, lembre-se de escrever return.

Erro 3 — Esquecer de importar o componente

Se você criou Saudacao.jsx em um arquivo separado, precisa importá-lo corretamente no arquivo que o utiliza. Confira o caminho, a extensão quando necessária e o tipo de exportação.

Erro 4 — Escrever HTML incorretamente no JSX

Em JSX, elementos que não possuem conteúdo interno precisam ser fechados. Por exemplo, use <img /> e <input />. Além disso, normalmente utilizamos className para definir classes CSS.

Erro 5 — Enviar uma prop com tipo inadequado

Se um componente espera um número para realizar cálculos, evite enviar esse valor como texto sem fazer a conversão necessária. Tipos diferentes podem provocar resultados inesperados.

11. Boas práticas para organizar seus componentes

• Escolha nomes claros: prefira CartaoProduto a nomes genéricos como Coisa.
• Reutilize estruturas: se vários elementos possuem a mesma estrutura, avalie se vale a pena criar um componente.
• Separe responsabilidades: componentes pequenos e bem definidos costumam ser mais fáceis de entender e manter.
• Utilize props: passe os dados que mudam de uma utilização para outra.
• Utilize state quando necessário: informações que mudam durante a interação podem ser guardadas no estado do React.
• Organize os arquivos: separe componentes em arquivos quando isso facilitar a leitura do projeto.
• Evite duplicação desnecessária: não copie e cole grandes blocos de JSX quando uma estrutura reutilizável resolver o problema.
• Teste os componentes: verifique se eles funcionam com diferentes valores e situações.

Uma dica de profissional: não transforme cada linha de JSX em um componente separado sem necessidade. Crie componentes quando houver uma estrutura reutilizável, uma responsabilidade clara ou uma parte da interface que mereça ser organizada individualmente.

12. Exercício prático: crie um cartão de estudante

Agora é sua vez. Você vai criar um componente chamado CartaoEstudante, capaz de mostrar o nome e a linguagem de programação que uma pessoa está aprendendo.

Objetivo do exercício:

• Criar um arquivo chamado CartaoEstudante.jsx.
• Criar uma função chamada CartaoEstudante.
• Receber duas props: nome e linguagem.
• Mostrar essas informações em um título e em um parágrafo.
• Utilizar o componente duas vezes com dados diferentes.

Solução do exercício — CartaoEstudante.jsx

CartaoEstudante.jsx

function CartaoEstudante({ nome, linguagem }) {
  return (
    <article>
      <h2>{nome}</h2>
      <p>
        Está aprendendo {linguagem}.
      </p>
    </article>
  );
}

export default CartaoEstudante;

Utilizando o componente — App.jsx

App.jsx

import CartaoEstudante from "./CartaoEstudante";

function App() {
  return (
    <main>
      <CartaoEstudante
        nome="Ana"
        linguagem="JavaScript"
      />

      <CartaoEstudante
        nome="Pedro"
        linguagem="Python"
      />
    </main>
  );
}

export default App;

Resultado esperado:
Ana
Está aprendendo JavaScript.

Pedro
Está aprendendo Python.

Observe como o mesmo componente consegue representar estudantes diferentes. Essa é uma das ideias mais importantes do React: construir partes reutilizáveis da interface e alimentá-las com informações diferentes.

13. Resumo: o que você aprendeu?

• Componentes: partes reutilizáveis de uma interface.
• Funções: uma maneira comum de declarar componentes React.
• JSX: sintaxe que permite descrever interfaces dentro do JavaScript.
• Export e import: recursos para compartilhar componentes entre arquivos.
• Props: informações recebidas de quem utiliza o componente.
• Children: conteúdo colocado entre as etiquetas de abertura e fechamento de um componente.
• CSS: recurso para personalizar a aparência dos elementos.
• State: dados que podem mudar durante a utilização da aplicação.

Para continuar aprendendo, pratique criando componentes para botões, cartões, perfis, menus e formulários. Depois, experimente combinar esses componentes para montar uma página completa.

14. Conclusão

Criar componentes no React JS é uma habilidade fundamental para desenvolver interfaces organizadas, reutilizáveis e fáceis de manter. O segredo é começar com estruturas simples, entender como as funções retornam JSX e aprender a passar informações utilizando props.

Primeiro, crie um componente que mostre uma mensagem. Depois, transforme-o em um componente que recebe informações. Por fim, combine diferentes componentes para construir uma aplicação maior.

Você não precisa aprender tudo de uma vez. Cada componente que você cria é uma oportunidade de entender melhor como o React funciona.

---

RECURSO RECOMENDADO

Quer ampliar seus conhecimentos em programação?

Se você deseja continuar estudando desenvolvimento de software, conheça o curso Torne-se um Programador Fullstack e domine o mercado digital! e confira se o conteúdo combina com seus objetivos de aprendizado.

Antes de se inscrever, consulte a página do curso para verificar o programa, as tecnologias ensinadas, os requisitos e as condições disponíveis.

Conhecer o curso →

Transparência: este artigo contém um link de afiliado. Podemos receber uma comissão se você realizar uma compra por meio desse link, sem custo adicional para você. A recomendação não representa uma garantia de resultados.

Artigo educativo sobre React JS, componentes funcionais, JSX, props, children e organização de interfaces.