React Router v7 Data Mode CRUD + Vitest Unit Testing Tutorial

Chapters:
00:00 - Introduction to React Router v7 Data mode
00:15 - React Router v7 data fetching without useEffect
04:23 - React Router v7 useLoaderData hook and Await for loading data
05:37 - Intro to tutorial project
08:13 - Scaffolding application in Typescript
09:08 - Why I'm using createMemoryRouter instead of createBrowserRouter
13:09 - Creating a loader function to fetch and load data from an API only with React Router
14:30 - Create Products component
19:07 - Create ProductsError component
19:15 - Setting up the routes configuration for our app
21:33 - Creating the App component
25:22 - Testing data fetching and loading in the browser
26:00 - How to fix the "No HydrateFallback element provided to render during initial hydration
27:42 - How to post data to an API endpoint using only React Router version 7
29:29 - Create PostProduct function
31:42 - Create postProductAction function
32:28 - Integrating POST route with the app's routes configuration
33:05 - Testing POST request in the browser
33:30 - Unit testing app with Vitest
43:12 - Closing statement

How to implement CRUD functionality using only React Router v7. No need for useEffect hook nor Tanstack Query to fetch data. I will also teach you how to implement Vitest unit testing for React Router v7.

Please consider subscribing to my channel, it doesn’t cost you anything.

Documentation:
https://api.reactrouter.com/v7/functi...
https://reactrouter.com/start/data/in...