React, Redux, and Next.js course

Professional training course on React, Redux, and Next.js for frontend developers. The course, which to date I have taught at dozens of companies throughout Italy, comes in two versions: the short version, lasting 3 working days, and the long version, lasting 5 working days. The base version covers topics related to the fundamentals of React, while the longer version also covers topics related to Redux, React Router, and Testing.

Additional modules on Next.js are also available, covering both the Pages Router (up to v12) and the App Router (v13 onward). These modules are usually covered as an alternative to Redux and React Router, but they can also be covered in addition to them, which extends the overall length of the course.

The course can be taught using either TypeScript or JavaScript, and two optional half-day modules are available for reviewing the basic concepts of both languages, with particular attention to their most modern features.

The course can be delivered in either Italian or English, and can be held either in person or remotely.

Taking part in the course requires a good knowledge of HTML, CSS, and JavaScript (or TypeScript); the course is designed for developers with previous programming experience.

The planned modules, each lasting half a day (4 hours), are as follows:

• JavaScript refresher (optional)
  • Transpiling and bundling;
  • var, let, and const;
  • Module System;
  • Arrow Functions;
  • Classes;
  • Spread and Rest operators;
  • Destructuring;
  • Object Literals;
  • Template Literals;
  • for in and for of loops;
  • Nullish Coalescing Operator;
  • Optional Chaining;
• TypeScript refresher (optional)
  • Introduction to TypeScript;
  • Primitive types;
  • Defining types;
  • Type inference and type casting;
  • Generics;
  • Interfaces and Enums;
• Introduction to React
  • What React is;
  • Imperative paradigm and declarative paradigm;
  • JSX;
  • React components (function components and class components);
  • Setting up a project with Vite;
  • Virtual DOM;
• Class Components (optional, on request)
  • Props;
  • Event handling;
  • State management;
  • Component lifecycle;
• Function Components
  • Props;
  • Event handling;
  • Introduction to hooks;
  • State management (useState);
  • Side effects and synchronization (useEffect);
• Forms and Lists
  • Interactive UIs and advanced events;
  • Controlled forms;
  • Uncontrolled forms;
  • useRef and DOM access;
  • Handling lists and unique keys;
  • Form actions, useActionState, and useOptimistic (React 19);
• Data Fetching and Custom Hooks
  • The fetch function in JavaScript;
  • Axios;
  • Introduction to data fetching in React;
  • Custom Hooks;
  • Caching and deduplication with TanStack Query;
• Composition and Context
  • Component composition (children);
  • Context API;
  • Component styling (CSS, SCSS, inline styles);
  • Lifting state up;
• Redux (part one)
  • State Management;
  • The Flux paradigm;
  • Introduction to Redux;
  • Core principles: state, actions, reducers;
  • Creating the store;
  • Accessing and interacting with the store;
• Redux (part two)
  • Working with middleware;
  • Asynchronous operations and thunks;
  • Redux DevTools;
  • Redux Toolkit;
  • React Redux;
• React Router
  • Installation and configuration;
  • Routers and routes;
  • Links and navigation;
  • Parameterized routes;
  • Nested routes;
• Testing
  • Testing fundamentals with Vitest and React Testing Library;
  • Introduction to Vitest;
  • Writing a test and defining assertions;
  • Testing asynchronous operations;
  • Testing React components with React Testing Library;
  • Testing hooks with React Testing Library;
• Next.js Pages Router (optional, on request)
  • Introduction and creating a Next.js project;
  • Pages and routing;
  • Dynamic routing;
  • Data fetching;
  • Image handling;
  • Internationalization;
• Next.js App Router, part I
  • Introduction to React Server Components;
  • Creating and structuring a Next.js project with the App Router;
  • Routing, Links, and Navigation;
  • Layouts and Templates;
  • Route groups;
  • Dynamic routes and query strings;
• Next.js App Router, part II
  • Data Fetching;
  • Loading State and Error State;
  • Parallel routes;
  • Route handlers and Middleware;
  • Image handling;
  • Metadata management;

During the modules, preparatory exercises will be provided for learning the topics covered.