Menu
Coddy logo textTech
INIZIA A IMPARARE
flag It iconItalianodown icon

Passaggio 2: Scheda con Props

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 40 di 42.

challenge icon

Sfida

Facile

Rendi riutilizzabile la scheda.

  1. Definisci ProfileCard che riceve le props name e bio e renderizza la stessa struttura del passaggio 1 (div della scheda, id="profile-name", id="profile-bio") con i valori delle props.
  2. In App, renderizza un ProfileCard con name Grace Hopper e bio Invented 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 React

4Props

Cosa sono le props?Passare le propsDue propsStesso componente, nuovi datiLa prop childrenRiepilogo: props

7Condizioni e liste

Rendering ternarioMostrare con &&Renderizzare una listaLe key sono importantiFiltra, poi mappaRiepilogo: condizioni e liste

2Espressioni JSX

Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX

5Stato ed eventi

Che cos'è lo stato?Contatore di clicContare a incrementiAttiva/disattiva con lo statoStato indipendenteRiepilogo: stato ed eventi

8Progetto: Scheda profilo

Passaggio 1: Struttura della schedaPassaggio 2: Scheda con PropsPassaggio 3: Pulsante Mi piacePassaggio 4: Interruttore Segui

3Componenti

Mattoni di baseIl tuo secondo componenteRiutilizzare i componentiComporre una paginaRiepilogo: componenti

6Moduli e input

Input controllatiVisualizzare l’inputContatore di caratteriPulsante CancellaRipasso: moduli e input