Riepilogo: condizioni e liste
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 38 di 42.
Sfida
MedioRiepilogo del capitolo: crea una bacheca delle attività a partire dai dati, usando tutto ciò che hai imparato in questo capitolo.
- Il componente definisce un array
tasks. All'interno di<ul id="done-list">, visualizza un elemento<li>per ogni attività completata: primafilter, poimap. - Ogni
<li>mostra iltextdell'attività e usa il suoidcomekey. - Sopra l'elenco, usa
&&per visualizzare uno<span>conid="badge"che mostra2 done(ricava il numero dallengthdell'array filtrato!), ma solo quando almeno un'attività è completata.
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>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 React4Props
Cosa sono le props?Passare le propsDue propsStesso componente, nuovi datiLa prop childrenRiepilogo: props7Condizioni e liste
Rendering ternarioMostrare con &&Renderizzare una listaLe key sono importantiFiltra, poi mappaRiepilogo: condizioni e liste2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX