Software Development

React Router 6 – Full Course



This course will educate you to construct real-world apps with React Router 6. Click on right here to get to the interactive model 👉

Thank you for reading this post, don't forget to subscribe!

All through the course, you’ll be constructing an app known as “VanLife” – an Airbnb-style net app devoted to renting out journey vans on your subsequent huge highway journey!

As you construct “VanLife”, you’ll be taught all of the necessary elements of React Router, similar to format and index routes, nested routes, filtering outcomes with search parameters, defending routes for authenticated customers, and extra. Additionally, you will be taught in regards to the new Remix-inspired knowledge router APIs, together with Loaders and Actions.

This course was created by Bob Ziroll, Scrimba’s Head of Schooling.
🔗 Bob on Twitter right here:
🔗 Scrimba on YouTube:

⭐️ Get the code ⭐️
🔗 Scrimba course:
🔗 GitHub repo:

💫 Hyperlinks talked about in course:
🔗 Scrimba’s Study React Course –
🔗 VanLife Figma Design –
🔗 Firebase –
🔗 Firestore Docs, get all docs in assortment –
🔗 Netlify –
🔗 GitHub Desktop –
🔗 Mirage JS –

0:00 1: Introduction to React Router 6
4:56 2: Multi-page vs single-page apps
10:12 Additional: Native Growth & GitHub Repo
12:25 3: React Router Setup & BrowserRouter
15:40 4: Routes
18:23 5: BrowserRouter & Routes Problem
19:32 6: Route, Path, & Factor
23:48 7: Fast Re-org
24:53 8: Hyperlink
28:55 9: VanLife venture bootstrapping
37:01 10: Preliminary Deploy to Netlify
48:47 11: Mirage JS Server
50:41 12: Problem: Vans Web page – Half 1
1:02:09 14: Route Params
1:25:09 19: Nested Routes Intro
1:34:04 20: Fixing the Navbar with a Structure Route
1:46:45 22: Bootstrap the Host pages
1:50:45 23: Nesting the /host routes
1:54:34 24: Creating the Host Structure
2:01:04 25: Relative Paths
2:05:32 26: Index Routes
2:09:24 27: To nest or to not nest?
2:14:34 28: Nested Routes Quiz
2:19:26 29: Add Footer
2:22:47 30: NavLink
2:30:03 31: Lively Hyperlink Styling with NavLink
2:39:14 33: Including Host Vans Routes
2:44:28 34: Optimum Aspect Quest
2:47:49 35: Constructing the Host Van Element web page
2:56:47 36: Relative Hyperlinks
3:03:51 37: Again to all vans
3:09:08 38: Add /host/vans/:id Nested Routes
3:17:17 39: Add the Remaining Navbar
3:23:53 40: Outlet Context
3:29:27 41: Replace deployed model 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: Utilizing Hyperlinks so as to add search params
4:01:57 49: Utilizing the search params setter perform
4:08:05 51: Caveats to setting params
4:09:38 52: Merging search params
4:21:13 54: Problem: Conditional rendering observe
4:25:56 55: Repair remaining absolute paths
4:27:50 56: Again to all vans
4:30:05 57: Hyperlink state
4:36:37 58: useLocation
4:47:31 60: 404 Web page
4:53:22 61: Completely satisfied Path vs Unhappy Path
4:56:01 62: Replace to our fetching code
4:59:02 63: Coding the Unhappy Path
5:07:37 65: Loaders intro
5:12:03 66: createBrowserRouter
5:18:13 67: Establishing the info router
5:21:00 68: Loader perform
5:25:17 70: useLoaderData
5:29:52 72: Use the loader knowledge as a substitute of the useEffect
5:33:51 73: Loaders Quiz
5:37:06 74: Dealing with errors
5:39:49 75: Add errorElement to vans route
5:42:40 76: useRouteError
5:49:06 77: Preliminary Login Kind
5:51:31 78: Importing picture belongings in Vite
5:54:22 79: Protected Routes
6:18:28 85: Parallel Loaders Demo
6:22:02 86: Problem – Protected Routes
6:43:51 91: Ship login message immediate to login web page
6:46:56 92: Eat message
6:54:37 93: Go message to Login web page
6:58:26 94: Scorching Take: Types in React are unhealthy
7:00:58 95: Establishing for auth
7:13:57 97: useNavigate()
7:17:44 98: React Router Kind Element
7:20:41 99: Establishing the motion perform
7:25:13 100: Add kind and motion to VanLife
7:27:31 101: Motion perform
7:32:39 103: Get kind knowledge in VanLife
7:34:22 104: Use knowledge in motion to log in
7:36:57 105: Higher (however nonetheless pretend) auth
7:44:08 107: Kind change
7:49:23 108: useActionData
7:53:50 109: Motion error dealing with
8:00:00 111: useNavigation()
8:08:07 113: Get earlier route pathname
8:15:05 114: redirectTo
8:30:37 117: Deferring knowledge
8:33:35 118: Guarantees and defer()
8:39:19 119: defer getVans()
8:41:04 120: Await part
8:55:28 123: React Suspense
9:00:27 124: Suspense in VanLife
9:03:51 125: Placing all of it collectively – 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: Assortment reference and getVans() perform
9:30:54 131: Create getVan() perform
9:35:42 132: Refactor getHostVans perform
9:39:29 133: Remaining free ends

source

Comments are closed.