Project: React Router - React In Depth

Let's work through creating a React library that supports client-side routing in React together.

We start off with the project definition and scope as well as several tips for getting started.

We then move to taking some notes on a potential solution architecture we can work towards.

Then, we implement the components top-down starting with the BrowserRouter Context, then the Route Component and finally the Link component which we will use in place of anchor tags in our Application.

During this process we look at various issues that pop up, debug them together and even handle new types of events and APIs such as the History Web API and the URL Web API.

We wrap up the video with an overview of what we've build and possible next steps as well as some stretch goals to work on.

Chapters:
00:00 Introduction
02:38 What We Are Building
04:56 Syntax and Visual for the Router
07:42 3 Components to Build
09:47 Details of 3 Components
13:15 General Starting Tips
19:18 Technical Tips
21:28 Stretch Goals
24:25 Project Start - Notes
30:18 Project Start - Code Setup
35:58 BrowserRouter Context
48:47 Route Component
1:01:56 Testing Multiple Routes
1:06:25 Handling Back and Forward Buttons
1:15:40 Some Browser Debugging Tips
1:22:00 Syncing popstate with Context
1:25:05 Link Component
1:32:14 Testing Links
1:37:40 Fixing Link History and State
1:42:46 Recap of Our Solution
1:47:43 Recap and Next Steps

? Github Repository with the notes and exercise code+solutions: https://github.com/Nooder/react-in-depth

? Come join us on Discord to chat with a like-minded community about tech and learning: https://discord.gg/K4nkugP7Gd

?Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: https://www.patreon.com/TechWithNader