Complete React Training
All React elements: introduction, complete training on basic concepts, as well as all the libraries I use daily, best practices, etc.
Chapter Lessons
React: Essential Basics
Discover the fundamental basics of React. Learn the 3 essential concepts: components, state (`useState`), and props, and create your first application with Vite.
React with Vite: Setup and First Steps
Learn how to start a modern React project in a flash with Vite. I'll show you why it's the essential tool today and how to launch your first application in minutes.
React Components in Detail
Dive into the heart of React components. Discover functional components in detail, the difference with 'class components', and the different syntaxes for writing modern code.
Rendering and Virtual DOM in React
Discover the inner workings of React. We explore the 3-step rendering process (Trigger, Render, Commit) and the magic of the Virtual DOM that makes React so performant.
React: Complete Index of Hooks
An introduction and a complete index of React Hooks. Discover what Hooks are, the rules to follow, and explore the categories: Basic, Performance, State, Advanced, and Custom Hooks.
The useState Hook
Learn how to manage the local state of your components with the `useState` hook. Discover its syntax, its advantages over older classes, and practical examples for each data type.
The useEffect Hook
Manage side effects in your components with the `useEffect` hook. Learn how to make API calls, manage timers, and interact with the component lifecycle.
The useRef Hook
Discover the `useRef` hook to manipulate the DOM directly and store mutable values without triggering a re-render. An essential tool for stepping outside the React flow.
The useMemo Hook
Optimize your React components with the `useMemo` hook. Learn how to memorize the results of expensive calculations and avoid unnecessary re-renders of your child components.
The useCallback Hook
Optimize your components with the `useCallback` hook. Learn how to memorize your functions to avoid unnecessary re-renders of child components and improve performance.
The useReducer Hook
Simplify complex state management with the `useReducer` hook. Discover how to centralize your logic, manage multiple actions, and organize your code in the style of Redux.
The useContext Hook
Avoid 'prop drilling' and easily share data in your application with `useContext`. Learn how to create a `Provider` and consume global data.
React Advanced Hooks
Explore advanced React hooks. Discover `useLayoutEffect`, `useId`, `useTransition`, `useDeferredValue`, and `useImperativeHandle` for specific use cases of performance and DOM manipulation.
Custom Hooks
Learn how to create your own hooks to extract and reuse logic from your components. Discover practical examples like `useToggle` and `useLocalStorage`.
React Router: Navigation
Learn how to manage navigation and URLs in your React application with React Router. We'll cover route configuration and the `Link` and `NavLink` components.
React: State Management
Explore the different state management strategies in React. We compare the Context API, Zustand, Redux Toolkit, Jotai, and TanStack Query to choose the right solution for your application.
The React Libraries Ecosystem
Explore the vast ecosystem of React. An organized list of the best libraries for UI, state management, forms, animations, and much more.
React: API and Data Management
Discover best practices for fetching and managing data from APIs in your React applications. We'll explore `useState`/`useEffect` and the power of **TanStack Query** for synchronization and caching.
React: Next.js and Meta-Frameworks
Discover meta-frameworks like Next.js that are revolutionizing React development. We'll explore Server Components, routing, SSG, Server Actions, and much more.
React: Forms and Validation
Simplify your form management in React! Discover React Hook Form for performant forms and its winning combination with Zod for robust and type-safe validation.
React: Types and Validation with Zod & TypeScript
Discover how Zod enhances data validation in JavaScript and TypeScript. Learn to create schemas, validate APIs and forms, and leverage type inference for safer code.
React: Animations
Bring your React applications to life with animations. Discover the best libraries: Framer Motion for its simplicity, React Spring for physics-based animations, and the power of GSAP.
React: Advanced Concepts and Optimizations
Push your React skills even further. This section explores technical topics like synchronizing URL state with nuqs, optimizing immutability with Immer, and the challenges of `setLoading()` with React Server Components.
React: Links and Resources Appendix
An organized collection of essential links and resources for the React ecosystem, covering hooks, tools, UI libraries, state management, and my personal stack.