Tutti i percorsi
ReactPrincipiante

React — Basi

Costruisci veri componenti React e vedili in anteprima live, direttamente nel browser.

20 capitoli81 lezioni173 sfide

Programma del corso

Capitolo 1: Componenti e JSX

  • Componenti e JSX
  • Le props
  • Liste e key
  • Stato ed eventi

Capitolo 2: Props e composizione

  • Passare le props
  • Destructuring delle props
  • children
  • Valori di default
  • Le props sono di sola lettura

Capitolo 3: Rendering condizionale

  • L'operatore ternario
  • L'operatore && (e il trabocchetto dello 0)
  • Calcolare prima del return
  • Condizioni multiple

Capitolo 4: Liste e key

  • map per generare elementi
  • La prop key
  • Filtrare e trasformare
  • Aggregare i dati

Capitolo 5: Stato con useState

  • Cos'è lo stato (useState)
  • Leggere e mostrare lo stato
  • Aggiornare lo stato
  • Stato derivato

Capitolo 6: Eventi e interazione

  • Gestire gli eventi
  • Aggiornare lo stato negli eventi
  • Aggiornamenti basati sul precedente
  • Comunicare verso il genitore

Capitolo 7: useEffect

  • Cos'è un effetto (useEffect)
  • L'array delle dipendenze
  • La pulizia (cleanup)
  • Errori comuni con useEffect

Capitolo 8: Form e input controllati

  • Input controllati
  • Gestire più campi
  • onSubmit e preventDefault
  • Validazione

Capitolo 9: Comunicazione tra componenti

  • Il problema dello stato condiviso
  • Sollevare lo stato (lifting)
  • Dati giu, eventi su
  • Single source of truth

Capitolo 10: useRef e il DOM

  • Cos'è useRef
  • Accedere al DOM
  • Valori mutabili senza re-render
  • useRef vs useState

Capitolo 11: useContext

  • Il problema del prop drilling
  • Creare un Context
  • Consumare con useContext
  • Quando usare il Context

Capitolo 12: useReducer

  • Cos'è useReducer
  • Reducer e action
  • dispatch
  • useReducer vs useState

Capitolo 13: Custom hooks

  • Cosa sono i custom hook
  • Le regole degli hook
  • Un custom hook utile
  • Buone pratiche

Capitolo 14: Performance e memoizzazione

  • Quando avviene il re-render
  • React.memo
  • useMemo
  • useCallback

Capitolo 15: Pattern dei componenti

  • Composizione
  • Controllati vs non controllati
  • Render props
  • Higher-Order Components (HOC)

Capitolo 16: Data fetching

  • Caricare dati con useEffect
  • Stati: caricamento, errore, dati
  • Cleanup e race condition
  • Astrarre il fetch

Capitolo 17: Routing

  • Il routing client-side
  • Routes, Route e Link
  • Parametri e navigazione
  • Layout e rotte annidate

Capitolo 18: Testing dei componenti

  • Perché testare i componenti
  • React Testing Library
  • Query e interazioni
  • Testare il comportamento

Capitolo 19: TypeScript e React

  • Perché TypeScript in React
  • Tipizzare le props
  • Tipizzare stato e hook
  • Eventi e children tipizzati

Capitolo 20: Best practice e pitfall senior

  • Organizzare i componenti
  • Dove mettere lo stato
  • Pitfall comuni
  • Qualità e accessibilità

Pronto a salire di livello?

Crea un account gratuito e inizia subito: guadagni XP a ogni sfida e scali la classifica.

React — Basi — LevelUpCode