Riutilizzare i componenti
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 13 di 42.
È qui che i componenti danno i loro frutti: usane uno tutte le volte che vuoi. Ogni <Star /> qui sotto è una nuova copia:
function Star() {
return <span>★</span>;
}
export default function App() {
return (
<div>
<Star />
<Star />
<Star />
</div>
);
}Tre stelle sullo schermo, una definizione nel codice. Modifica la definizione una sola volta. Ogni copia si aggiorna. Questo è il superpotere del riutilizzo che HTML non ha mai avuto.
Sfida
FacileCrea una valutazione a tre stelle.
- Definisci un componente
Starche restituisce<span>★</span>. - All'interno del
<div id="stars">esistente, visualizza tre stelle utilizzando il componente tre volte.
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