React Router V7 FullStack CRUD Tutorial | Learn Routing, Loaders, Actions...

In this video I will be teaching you all the basics of using React Router V7 as a framework. To do this, we are building a simple crud app that will teach you everything from Routing, Data Loading, Form Actions, and So On...

🩵 Want to learn ReactJS?

📖 Video Resources:

🚀 Courses & Tutorials:

Timestamps:
00:00 Intro to Full Stack CRUD
02:07 Integrating Supabase for Data
03:06 Creating a Supabase Project
04:07 Installing Supabase Client
05:22 Understanding React Router Structure
06:14 Defining Routes for CRUD Operations
09:06 Creating the Items Page
10:35 Adding New Item Route
12:07 Building the Navbar Component
13:39 Styling the Application
15:06 Submitting Form Data with Actions
17:04 Handling Form Submissions
22:00 Adding Metadata for SEO
27:03 Displaying Items from Database
31:09 Creating Item Details Page
38:11 Implementing Edit and Delete Features
50:36 Final Touches and CSS
55:34 Conclusion and Next Steps

[PythonAbyss]

These short videos go directly to the point and are much easier to ingest, thank you

[smokingbuddha]

Got curious about rrv7 and found your different videos. They are life savers. Thanks for taking the time to do this.

[joeyspizz]

Love the video. Perhaps, you may want to make a part 2 where you actually put this on the web using different hosts

[itsronen]

Great tut, looking forward for the big project with this amazing framework

[robwheatley]

I agree, the docs for v7 are super confusing. Having 3 different modes of use don't help either. In the age of AI assisted coding, those modes just get AI in a muddle and they end up suggesting code that is a mixture of modes and doesn't work.

This video cleared up a lot of things for me. I would be great if you could make a follow-up to this for things like:

- Auth based routing (protected routes)
- Error boundaries
- How the layout can differ by route or nested route (for example, some routes should not have the nav bar for instance).

These are all things I solved in the past with older versions of react router, but I'm really too lazy to re-learn how to do them 'the new way' (or should I say 'ways' given the 3 modes!!).

[jonathanpark]

Thank you. Very easy to understand. I like your granular explanations, with react router 7, project can be huge but to see and learn at somewhat simple level gives me insight to make better project after this.

[thomasblack]

Great tutorial overall! One small critique: No need to import `ActionFunctionArgs` separately. It's available alongside `ComponentProps` and `LoaderArgs` in the `Route` type via `Route.ActionArgs`.

[ThiagoLucioBittencourt]

Bacana o vídeo jovem. Bom sotaque em Inglês.

[abdullahs]

Great tutorial, bro. I was recently working on a small project and thought I should take the opportunity to learn v7, but then I got confused by the docs and stuck with v6, but now it actually looks cool and interesting. I'm interested in learning how protected routes would work and how to integrate react query to this -or if it's even necessary -. Thank you, Pedro!

[blanco]

Great explanation, thank you. Please make a real project similar to the Nextjs you have done. There are not many videos about RRV7.

[edwinseptiana]

Great tutorial, bro. Next tutorial RR7 with RBAC 🙏

[padyakcode]

Could you share how you’ve configured your VS Code setup? Specifically, what extensions and settings you’re using for example, to enable auto imports.

[bangunny]

Hey great video bro, but i wonder if there are any benefits in using fs-route based library

[hhhhhhhhhhhhhhhhhhhhhhhhhh]

Hi Pedro, do you think It would be possible to have a views count system in a blog using Markdown and localstorage? Or do you need a database?

[dhamivibez]

Thanks for this video. I'm having an issue with the React SSR setup in Vite (using the extra starters), specifically with React Router. How can I resolve it?

[watson]

Thank you a lot for this. There is one thing I'm still confused about. How can we use the supabase client in an action or loader, which only runs on the server? I mean it works, but I don't understand why.

And if we wanted to add supabase authentication, would we also use server loaders and actions for that?

[FredyCiang]

RR7 with full cloudflare stack tutorial please sensei

[sumitkashyap]

can you tell me the name of your VS Code theme ?

[Gitago]

after watching this video im conflicted..
---
I've used vite-react on a few projects in the past and struggled with meta data on a static build and also even trying dynamic meta data server side was a chore if I recall..

I made a jump to NextJS recently and was shocked how simple and easy it was to handle meta data...
So question... I'm wondering if anyone can give me some thoughts behind why I should move back now React Router 7 has these new features?

One thing I can think of is performance maybe better with nextJS?.. I wonder what a comparison is of having the same two identical websites build on different

[wylakers]

Is it possible to fetch data from a component, that is not defined as a route, with loader or clientLoader?