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