Passaggio 2: Scheda con Props
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 40 di 42.
Sfida
FacileRendi riutilizzabile la scheda.
- Definisci
ProfileCardche riceve le propsnameebioe renderizza la stessa struttura del passaggio 1 (div della scheda,id="profile-name",id="profile-bio") con i valori delle props. - In App, renderizza un ProfileCard con name
Grace Hoppere bioInvented the compiler.
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 React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX5Stato ed eventi
Che cos'è lo stato?Contatore di clicContare a incrementiAttiva/disattiva con lo statoStato indipendenteRiepilogo: stato ed eventi8Progetto: Scheda profilo
Passaggio 1: Struttura della schedaPassaggio 2: Scheda con PropsPassaggio 3: Pulsante Mi piacePassaggio 4: Interruttore Segui