Seu Segundo Componente
Parte da seção Fundamentos do Journey de React da Coddy — lição 12 de 42.
Vamos extrair um componente. Você pode definir quantos componentes quiser em um único arquivo: os menores acima, o App na parte inferior:
function Welcome() {
return <p>Glad you're here!</p>;
}
export default function App() {
return (
<div>
<Welcome />
</div>
);
}Apenas App possui export default: ele é o componente de entrada que o main.jsx renderiza. Os outros são auxiliares internos.
Desafio
InicianteCrie seu primeiro componente independente.
- Defina um componente chamado
Header(com H maiúsculo!) acima deApp. Ele retorna um<h1>comid="page-title"e o textoMy Blog. - Renderize-o dentro da
<div>do App com<Header />.
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