React - How I Recreated TanStack Router From Scratch

Discover React Mastery: From Essential Concepts to Advanced Hooks, Master React Development with Real-World Projects and Boost Your Skills in Record Time!

4.0 (0)

12 learners

What you'll learn

Understand the fundamental concepts of React, including components and hooks.
Differentiate between React state and props and their respective uses.
Build and enhance web applications using React, including implementing features like infinite scrolling and currency conversion.
Apply React best practices to optimize application performance and debugging processes.

This course includes

43.3 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

webdevsimplified react router tanstack router tanstack router tutorial how to make a react router how to create your own router how to code a router in react how to code a router how to program a router in react how to program a router

Full Transcript

One thing every React application needs is routing, which is why libraries like React Router and TanStack Router are so popular. It may seem intimidating trying to understand how these libraries work (especially when it comes to type safety) which is why in this video I will show you how I built my own fully type safe router from scratch. 📚 Materials/References: GitHub Code: https://github.com/WebDevSimplified/my-own-react-router Will AI Replace You Video: https://youtu.be/oObg8rRXZVM 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 01:47 - How to use the router 06:20 - Route matching 12:45 - Router context 15:40 - Type safety explained 20:55 - Route definition 25:28 - Outlet and layout components 30:39 - Link component 32:30 - Creating a new route example 34:38 - Can AI write this code? #ReactJS #WDS #ReactRouter

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Welcome