Menu
Coddy logo textTech
INIZIA A IMPARARE
flag It iconItalianodown icon

Riepilogo: componenti

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

challenge icon

Sfida

Facile

Riepilogo del capitolo: crea una pagina con due componenti, usando tutto ciò che hai imparato in questo capitolo.

  1. Definisci un componente Header: un <h1> con id="title" e il testo Coddy Shop. Eseguilo per primo all'interno del <div> esterno di App.
  2. Definisci un componente Badge che restituisce <span>★</span>.
  3. All'interno del <div id="badges"> esistente, esegui Badge due volte: una definizione, due utilizzi.

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