Corso React, Redux e Next.js

Corso di formazione professionale su React, Redux, Next.js per sviluppatori frontend. Il corso, che ho ad oggi tenuto presso decine di aziende in tutta Italia, è diviso in due varianti: la versione corta, della durata di 3 giornate lavorative, e la versione lunga, della durata di 5 giornate lavorative. La versione base copre argomenti legati alle fondamenta di React, mentre la versione più lunga copre anche argomenti legati a Redux, React Router e Testing.

Sono disponibili anche dei moduli aggiuntivi legati a Next.js, sia relativi al Pages Router (fino alla v12) che all'App Router (dalla v13 in poi). Questi moduli vengono solitamente trattati in alternativa a Redux e React Router, ma possono essere trattati anche in aggiunta ad essi allungando la durata complessiva del corso.

Il corso può essere svolto utilizzando sia TypeScript che JavaScript, e sono disponibili due moduli opzionali da mezza giornata ciascuno per il ripasso dei concetti di base di entrambi i linguaggi, con particolare attenzione alle feature più moderne.

Il corso è erogabile sia in lingua italiana che in lingua inglese, e può essere tenuto sia in presenza che da remoto.

Per la partecipazione al corso è richiesta una buona conoscenza di HTML, CSS e JavaScript (o TypeScript); il corso è pensato per sviluppatori con precedenti esperienze di programmazione.

I moduli previsti, ciascuno della durata di mezza giornata (4 ore), sono i seguenti:

• Refresh su JavaScript (opzionale)
  • Transpiling e bundling;
  • var, let e const;
  • Module System;
  • Arrow Functions;
  • Classi;
  • Operatori Spread e Rest;
  • Destructuring;
  • Object Literals;
  • Template Literals;
  • Cicli for in e for of;
  • Nullish Coalescing Operator;
  • Optional Chaining;
• Refresh su TypeScript (opzionale)
  • Introduzione a TypeScript;
  • Tipi primitivi;
  • Definizione di tipi;
  • Type inference e type casting;
  • Generics;
  • Interfacce ed Enums;
• Introduzione a React
  • Cos'è React;
  • Paradigma imperativo e Paradigma dichiarativo;
  • JSX;
  • Componenti React (function components e class components);
  • Setup di un progetto con Vite;
  • Virtual DOM;
• Class Components (opzionale, su richiesta)
  • Props;
  • Gestione degli eventi;
  • Gestione dello stato;
  • Lifecycle di un componente;
• Function Components
  • Props;
  • Gestione degli eventi;
  • Introduzione agli hooks;
  • Gestione dello stato (useState);
  • Effetti collaterali e sincronizzazione (useEffect);
• Forms e Liste
  • UI interattive ed eventi avanzati;
  • Form controllati;
  • Form non controllati;
  • useRef ed accesso al DOM;
  • Gestione delle liste e chiavi univoche;
• Data Fetching e Custom Hooks
  • La funzione fetch in JavaScript;
  • Axios;
  • Introduzione al data fetching in React;
  • Custom Hooks;
  • Caching e deduplication con SWR;
• Composition e Context
  • Composizione di componenti (children);
  • Context API;
  • Styling dei componenti (CSS, SCSS, inline styles);
  • Lifting state up;
• Redux (prima parte)
  • State Management;
  • Il paradigma Flux;
  • Introduzione a Redux;
  • Principi fondamentali: stato, azioni, reducer;
  • Creazione dello store;
  • Accesso ed interazione con lo store;
• Redux (seconda parte)
  • Gestione dei middleware;
  • Operazioni asincrone e thunk;
  • Redux DevTools;
  • Redux Toolkit;
  • React Redux;
• React Router
  • Installazione e configurazione;
  • Router e routes;
  • Link e navigazione;
  • Rotte parametriche;
  • Rotte annidate;
• Testing
  • Fondamenta di Testing con Vitest e React Testing Library;
  • Introduzione a Vitest;
  • Scrivere un test e definire asserzioni;
  • Test di operazioni asincrone;
  • Testare componenti React con React Testing Library;
  • Testare hooks con React Testing Library;
• Next.js Pages Router (opzionale, su richiesta)
  • Introduzione e creazione di un progetto Next.js;
  • Pagine e routing;
  • Routing dinamico;
  • Data fetching;
  • Gestione delle immagini;
  • Internazionalizzazione;
• Next.js App Router, parte I
  • Introduzione ai React Server Components;
  • Creazione e struttura di un progetto Next.js con App Router;
  • Routing, Links e Navigazione;
  • Layouts e Templates;
  • Gruppi di rotte;
  • Rotte dinamiche e query string;
• Next.js App Router, parte II
  • Data Fetching;
  • Loading State e Error State;
  • Rotte parallele;
  • Route handler e Middleware;
  • Gestione delle immagini;
  • Gestione dei metadati;

Durante lo svolgimento dei moduli saranno proposti esercizi propedeutici all'apprendimento degli argomenti trattati. Per ulteriori informazioni o per chiedere un preventivo puoi inviarmi una email.