Complete React Training

All React elements: introduction, complete training on basic concepts, as well as all the libraries I use daily, best practices, etc.

lessons
24
Level
Beginner

Chapter Lessons

1

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.

2

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.

3

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.

4

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.

5

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.

6

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.

7

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.

8

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.

9

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.

10

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.

11

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.

12

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.

13

React Advanced Hooks

Explore advanced React hooks. Discover `useLayoutEffect`, `useId`, `useTransition`, `useDeferredValue`, and `useImperativeHandle` for specific use cases of performance and DOM manipulation.

14

Custom Hooks

Learn how to create your own hooks to extract and reuse logic from your components. Discover practical examples like `useToggle` and `useLocalStorage`.

15

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.

16

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.

17

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.

18

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.

19

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.

20

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.

21

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.

22

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.

23

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.

24

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.