React Router 6 – Full Course

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on April 24, 2023 4:45:15 PM ● Video Link: https://www.youtube.com/watch?v=nDGA3km5He4

Duration: 9:44:43

140,255 views

4,146

This course will teach you to build real-world apps with React Router 6. Click here to get to the interactive version 👉 https://scrimba.com/links/react-router-6-course

Throughout the course, you’ll be building an app called “VanLife” – an Airbnb-style web app dedicated to renting out travel vans for your next big road trip!

As you build “VanLife”, you will learn all the important parts of React Router, such as layout and index routes, nested routes, filtering results with search parameters, protecting routes for authenticated users, and more. You will also learn about the new Remix-inspired data router APIs, including Loaders and Actions.

This course was created by Bob Ziroll, Scrimba’s Head of Education.
🔗 Bob on Twitter here: https://twitter.com/bobziroll
🔗 Scrimba on YouTube: https://www.youtube.com/c/Scrimba

⭐️ Get the code ⭐️
🔗 Scrimba course: https://scrimba.com/links/react-router-6-course
🔗 GitHub repo: https://scrimba.com/links/react-router-course-github-repo

💫 Links mentioned in course:
🔗 Scrimba’s Learn React Course - https://scrimba.com/learn/learnreact
🔗 VanLife Figma Design - https://scrimba.com/links/figma-vanlife
🔗 Firebase - https://scrimba.com/links/firebase-homepage
🔗 Firestore Docs, get all docs in collection - https://scrimba.com/links/firestore-docs-get-all-docs-in-collectionfirestore-docs-get-all-docs-in-collection)
🔗 Netlify - https://scrimba.com/links/netlify-home-page
🔗 GitHub Desktop - https://desktop.github.com/
🔗 Mirage JS - https://miragejs.com/

0:00 1: Introduction to React Router 6
4:56 2: Multi-page vs single-page apps
10:12 Extra: Local Development & GitHub Repo
12:25 3: React Router Setup & BrowserRouter
15:40 4: Routes
18:23 5: BrowserRouter & Routes Challenge
19:32 6: Route, Path, & Element
23:48 7: Quick Re-org
24:53 8: Link
28:55 9: VanLife project bootstrapping
37:01 10: Initial Deploy to Netlify
48:47 11: Mirage JS Server
50:41 12: Challenge: Vans Page - Part 1
1:02:09 14: Route Params
1:25:09 19: Nested Routes Intro
1:34:04 20: Fixing the Navbar with a Layout Route
1:46:45 22: Bootstrap the Host pages
1:50:45 23: Nesting the /host routes
1:54:34 24: Creating the Host Layout
2:01:04 25: Relative Paths
2:05:32 26: Index Routes
2:09:24 27: To nest or not to nest?
2:14:34 28: Nested Routes Quiz
2:19:26 29: Add Footer
2:22:47 30: NavLink
2:30:03 31: Active Link Styling with NavLink
2:39:14 33: Adding Host Vans Routes
2:44:28 34: Optimal Side Quest
2:47:49 35: Building the Host Van Detail page
2:56:47 36: Relative Links
3:03:51 37: Back to all vans
3:09:08 38: Add /host/vans/:id Nested Routes
3:17:17 39: Add the Final Navbar
3:23:53 40: Outlet Context
3:29:27 41: Update deployed version on Netlify
3:32:45 42: Search Params Intro
3:40:04 43: useSearchParams
3:48:55 45: Filter the array w/ the search param
3:55:47 47: Using Links to add search params
4:01:57 49: Using the search params setter function
4:08:05 51: Caveats to setting params
4:09:38 52: Merging search params
4:21:13 54: Challenge: Conditional rendering practice
4:25:56 55: Fix remaining absolute paths
4:27:50 56: Back to all vans
4:30:05 57: Link state
4:36:37 58: useLocation
4:47:31 60: 404 Page
4:53:22 61: Happy Path vs Sad Path
4:56:01 62: Update to our fetching code
4:59:02 63: Coding the Sad Path
5:07:37 65: Loaders intro
5:12:03 66: createBrowserRouter
5:18:13 67: Setting up the data router
5:21:00 68: Loader function
5:25:17 70: useLoaderData
5:29:52 72: Use the loader data instead of the useEffect
5:33:51 73: Loaders Quiz
5:37:06 74: Handling errors
5:39:49 75: Add errorElement to vans route
5:42:40 76: useRouteError
5:49:06 77: Initial Login Form
5:51:31 78: Importing image assets in Vite
5:54:22 79: Protected Routes
6:18:28 85: Parallel Loaders Demo
6:22:02 86: Challenge - Protected Routes
6:43:51 91: Send login message prompt to login page
6:46:56 92: Consume message
6:54:37 93: Pass message to Login page
6:58:26 94: Hot Take: Forms in React are bad
7:00:58 95: Setting up for auth
7:13:57 97: useNavigate()
7:17:44 98: React Router Form Component
7:20:41 99: Setting up the action function
7:25:13 100: Add form and action to VanLife
7:27:31 101: Action function
7:32:39 103: Get form data in VanLife
7:34:22 104: Use data in action to log in
7:36:57 105: Better (but still fake) auth
7:44:08 107: Form replace
7:49:23 108: useActionData
7:53:50 109: Action error handling
8:00:00 111: useNavigation()
8:08:07 113: Get previous route pathname
8:15:05 114: redirectTo
8:30:37 117: Deferring data
8:33:35 118: Promises and defer()
8:39:19 119: defer getVans()
8:41:04 120: Await component
8:55:28 123: React Suspense
9:00:27 124: Suspense in VanLife
9:03:51 125: Putting it all together - Defer, Await, Suspense in HostVans
9:08:31 126: errorElements in remaining van loading pages
9:11:55 127: Placeholders are gone!
9:13:57 128: Cloud Firestore
9:23:25 130: Collection reference and getVans() function
9:30:54 131: Create getVan() function
9:35:42 132: Refactor getHostVans function
9:39:29 133: Final loose ends