Reutilize Componentes
Parte da seção Fundamentos do Journey de React da Coddy — lição 13 de 42.
É aqui que os componentes mostram seu valor: use um quantas vezes quiser. Cada <Star /> abaixo é uma cópia nova:
function Star() {
return <span>★</span>;
}
export default function App() {
return (
<div>
<Star />
<Star />
<Star />
</div>
);
}Três estrelas na tela, uma definição no código. Altere a definição uma única vez. Cada cópia é atualizada. Esse é o superpoder de reuso que o HTML nunca teve.
Desafio
FácilCrie uma avaliação de três estrelas.
- Defina um componente
Starque retorne<span>★</span>. - Dentro da
<div id="stars">existente, renderize três estrelas usando o componente três vezes.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentos
1Conheça o React
O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React2Expressões JSX
ChavesMatemática nas ChavesChaves em AtributosChamando Funções no JSXRecapitulação: Expressões JSX3Componentes
Blocos de ConstruçãoSeu Segundo ComponenteReutilize ComponentesComponha uma PáginaRecapitulação: Componentes