English 中文 العربية 日本語 Português

Component Noções de componente

Última atualização: 2026-11-03

Component Noções de componente

Um componente é a menor unidade reutilizável de um aplicativo React: uma função que recebe props e devolve JSX. Depois que você divide a interface em componentes, cada parte pode ser desenvolvida, testada e reutilizada por conta própria, e uma página completa é montada a partir dessas peças como blocos de construção. Como todo componente é uma função comum, não há sintaxe de classe para aprender antes de começar.

GrupoConceitos Básicos
TipoPadrão
DesdePrimeiras versões do React

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function Welcome({ name }) {   // Um componente = uma função que devolve JSX; o nome precisa começar com maiúscula
  return <h1>Hello, {name}</h1>
}

<Welcome name="Alice" />        // Usado exatamente como uma tag HTML

⚙️ Parâmetros

propsO objeto com todos os atributos passados pelo componente pai; normalmente você desestrutura o que precisa e deve tratá-lo como somente leitura.

Retorna：Uma função de componente devolve um trecho de JSX (ou null) descrevendo o que aquele componente deve renderizar.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Sob o título "Component reuse demo" aparecem três saudações — Hello, Alice!, Hello, Bob! e Hello, React Learner! — o mesmo componente renderizado três vezes com props diferentes.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso O nome de um componente precisa começar com letra maiúscula: uma tag minúscula é tratada pelo React como um elemento HTML comum.
💡 Dica Não defina um componente dentro de outro componente — cada render cria um novo tipo de componente e reconstrói a subárvore inteira; mova-o para o escopo externo.
ℹ️ Informação O React moderno usa apenas componentes de função; componentes de classe sobrevivem em código antigo e os dois estilos podem coexistir.
props component-tree jsx composition
Mais casos em breve.

📚 Tutoriais Relacionados

Componentes de função e props
Lição 3: definindo componentes, dividindo-os e passando props.

❓ Perguntas Frequentes

P Por que os nomes de componentes do React precisam começar com maiúscula?
R O compilador de JSX decide pela primeira letra: <div> é compilado como uma tag de texto, enquanto <Welcome> é compilado como uma referência a componente; por isso um nome minúsculo é tratado como um elemento HTML nativo.
P Um arquivo pode ter vários componentes?
R Pode — manter alguns componentes pequenos e relacionados no mesmo arquivo é comum. A convenção é um componente principal por arquivo, com os auxiliares pequenos ao lado.
P Qual a diferença entre componentes de função e de classe?
R Componentes de classe usam sintaxe de classe e métodos de ciclo de vida, enquanto componentes de função usam Hooks para estado e efeitos. Componentes de função são a escolha recomendada para novos projetos.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%