← 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