How I Recreated TanStack Router From Scratch
Web Dev Simplified
@webdevsimplifiedAbout
Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers. I started Web Dev Simplified in order to share my passion for web development, and do what I truly love. Teach and inspire new web developers. I have been in love with full stack web development since 2015 when I did my first internship as a web developer. Ever since then I have pursued my passion, learning everything there is to know about web development. Over the years I have taught many colleagues and friends the joys of web development, and cannot wait to teach you. Thank you for watching!
Latest Posts
Video Description
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
You May Also Like
Essential Web Dev Tools
AI-recommended products based on this video
Magnetic Nasal Strips Starter Kit: Comfortable Nasal Breathing Support for Sleep, Helps Reduce Snoring Noise, Includes 60 Tabs (30 Uses) with 4 Sizes
Environet Hydroponic Growing Kit, Self-Watering Mason Jar Herb Garden Starter Kit Indoor, Windowsill Herb Garden, Grow Your Own Herbs from Organic Seeds (Basil)
Herb Garden Planter Indoor Kit 21Pcs Kitchen Herb Garden Starter Kit Growing Kit Including Wooden Box Burlap Pots Soil Discs Gardening Tools Unique Easter Birthday Christmas Gift Ideas for Women Mom
