Il tuo secondo componente
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 12 di 42.
Estraiamo un componente. Puoi definire tutti i componenti che vuoi in un unico file: quelli più piccoli sopra, App in fondo:
function Welcome() {
return <p>Glad you're here!</p>;
}
export default function App() {
return (
<div>
<Welcome />
</div>
);
}Solo App contiene export default: è il componente di ingresso che main.jsx renderizza. Gli altri sono helper interni.
Sfida
PrincipianteCrea il tuo primo componente autonomo.
- Definisci un componente chiamato
Header(H maiuscola!) sopraApp. Restituisce un<h1>conid="page-title"e il testoMy Blog. - Esegui il rendering al suo interno nel
<div>di App con<Header />.
Provalo tu
<!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>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX3Componenti
Mattoni di baseIl tuo secondo componenteRiutilizzare i componentiComporre una paginaRiepilogo: componenti