Componentes funcionais e props
Crie componentes como funções, aceite e desestruture props e use PropTypes ou tipos do TypeScript para documentar as formas de dados esperadas.
Componentes funcionais e props é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é um componente React?
Um componente React é uma função JavaScript que retorna JSX. Os componentes são os blocos de construção das aplicações React — partes de interface do usuário reutilizáveis e combináveis.
function Welcome() {
return <h1>Welcome to CoddyKit!</h1>;
}
// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;Props — passando dados para baixo
Props (propriedades) são a forma de passar dados do componente pai para o filho. O componente as recebe como seu primeiro argumento, em um objeto simples.
function Greeting({ name, role }: { name: string; role: string }) {
return <p>Hello, {name}! Your role is {role}.</p>;
}
// Usage:
<Greeting name="Alice" role="admin" />Interface TypeScript para props
Defina uma interface nomeada para as props a fim de obter preenchimento automático, verificação de tipos e documentação.
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
variant?: 'primary' | 'secondary' | 'ghost';
}
function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
>
{label}
</button>
);
}Prop children
A prop children contém o conteúdo entre as etiquetas de abertura e fechamento do componente. Defina seu tipo como React.ReactNode para aceitar qualquer conteúdo renderizável.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</div>
);
}
// Usage:
<Card title="Hello">
<p>Card content goes here.</p>
</Card>Props padrão com desestruturação
Defina os valores padrão diretamente no padrão de desestruturação. Essa é a abordagem moderna — a API defaultProps, obsoleta, não é mais recomendada.
function Alert({ type = 'info', message, onClose }: AlertProps) {
return (
<div className={`alert alert-${type}`}>
<span>{message}</span>
<button onClick={onClose}>×</button>
</div>
);
}Composição de componentes
Os componentes são compostos: uma página utiliza um layout, que utiliza uma barra de navegação e uma barra lateral, cada qual utilizando átomos menores, como um botão e um ícone. Essa árvore de componentes é a árvore de componentes React.
Convenções de nomenclatura
Os nomes dos componentes devem começar com uma letra maiúscula. Nomes em minúsculas são tratados como elementos HTML. <div> é uma div HTML; <Div> é um componente React chamado Div.
Componentes puros
Um componente é puro quando as mesmas props sempre produzem a mesma saída e nenhum efeito colateral ocorre durante a renderização. Componentes puros são mais fáceis de compreender e otimizar.
// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;
// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
return <p>{id}</p>;
};Passando funções como props
Funções (retornos de chamada) são passadas como props para permitir que os filhos se comuniquem com os pais. O pai define a função; o filho a chama.
function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
return (
<li>
{text}
<button onClick={onDelete}>Delete</button>
</li>
);
}Expandindo props
O operador de expansão passa todas as props de um objeto para um componente. Isso é útil para componentes de encapsulamento ou repasse, mas utilize com cuidado — props inesperadas podem ser repassadas.
function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
return <input {...props} className={`input-base ${props.className || ''}`} />;
}Fragmentos e chaves no contexto das props
Ao renderizar uma lista de componentes como filhos, cada um deve ter uma prop key exclusiva. As chaves ajudam React a identificar quais itens foram alterados, adicionados ou removidos.
Verificação rápida
Como fornecer um valor padrão para uma prop em um componente de função React moderno?
Recapitulação: componentes e props
Componentes funcionais são funções JavaScript que retornam JSX. Props passam dados do pai para o filho. Utilize interfaces TypeScript para os tipos das props. children: React.ReactNode para conteúdo de espaço reservado. Valores padrão na desestruturação. Passe retornos de chamada como props para a comunicação do filho com o pai. Os nomes começam com letras maiúsculas.
Perguntas Frequentes
A aula “Componentes funcionais e props” é grátis?
Sim — o texto completo de “Componentes funcionais e props” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Componentes funcionais e props”?
Crie componentes como funções, aceite e desestruture props e use PropTypes ou tipos do TypeScript para documentar as formas de dados esperadas. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Componentes funcionais e props”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- JSX: sintaxe e transpilação
- Componentes funcionais e props
- Hook useState: estado e novas renderizações
- Listas, chaves e renderização condicional