[#Script #Coding] React Router 6 – Full Course

React Router 6 – Full Course

By freeCodeCamp.org
Published: Apr 24, 2023

freeCodeCamp.org 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.
🔗 Follow Bob on Twitter here: https://twitter.com/bobziroll
🔗 Follow Scrimba on YouTube: https://www.youtube.com/c/Scrimba

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

⭐️ Prerequisites ⭐️
Before taking this course, you should already be well versed in HTML, CSS, JavaScript, and React.

💫 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/
🔗 Bob Ziroll’s GitHub – https://twitter.com/bobziroll

Introduction to React Router 6
Multi-page vs single-page apps
React Router Setup & BrowserRouter
Extra: Local Development
BrowserRouter & Routes challenge
Route, path, & element
Quick Re-org
VanLife project bootstrapping
Initial Deploy to Netlify
Mirage JS Server
Challenge: Vans Page
Route Params
Nested Routes Intro
Fixing the Navbar with a Layout Route
Bootstrap the Host pages
Nesting the /host routes
Creating the Host Layout
Relative Paths
Index Routes
To nest or not to nest?
Add Footer
Active Link Styling with NavLink
Adding Host Vans Routes
🔀 Optional Side Quest – Building out the Host Vans List and Detail Pages
Building out the Host Van Detail page
Relative Links
Back to all vans
Add /host/vans/:id Nested Routes
Add the Final Navbar!
Outlet Context
Update deployed version on Netlify!
Search Params Intro
Challenge: Set up search params in VanLife
Filter the array w/ the search param
Challenge: Filter the vans in VanLife
Using Links to add search params
Challenge: Filter the vans with Links
Using the search params setter function
Challenge: Filter the vans with a setter function
Caveats to setting params
Merging search params with Links
Merging search params with the setSearchParams function
Challenge: Conditional rendering practice
Fix remaining absolute paths
Back to all vans
Link state
Challenge: conditionally render the back button text
404 Page
“Happy Path” “Sad Path”
Quick update to our fetching code
Coding the Sad Path – Loading state
Coding the Sad Path – Error handling
Loaders intro
Setting up the data router
Loader function
Challenge: Vans List Loader
Challenge: useLoaderData in Vans List page
Use the loader data instead of the useEffect
Loaders Quiz
Handling errors
Add errorElement to vans route
Initial Login Form
Note from the future: importing image assets in Vite
Protected Routes
Parallel Loaders demo
Challenge: Protected Routes w/ loaders
Challenge: Protected Routes – pt 1
Aside challenge: move remaining fetching to loaders
Challenge: Protected Routes – pt 2
Send login message prompt to login page
Consume message from search param on login page
Pass message to Login page
🌶️ Take: Forms in React are bad
Setting up for authentication – happy path
Setting up for authentication – sad path
React Router Form Component
Setting up the Action function
Add form and action to VanLife
Action function – params
Action function – request
Get form data in VanLife
Use data in action to log in
Better (but still fake) auth
Challenge: send user to /host route after log in
Form replace
Action error handling
Action error handling in VanLife
useNavigation in VanLife
get previous route pathname
redirectTo – pt 1
redirectTo – pt 2
redirectTo in VanLife
Deferring data
Promises and defer()
defer getVans()
Await component
Await in Vans route
Await vans refactor
React Suspense
Suspense in VanLife
Putting it all together – defer, Await, Suspense in HostVans
errorElements in remaining van loading pages
Placeholders are gone! 🎉
Cloud Firestore Setup 🔥
Cloud Firestore Code Setup
Collection reference and getVans() function
Create getVan() function
Refactor getHostVans function
Final loose ends

Proudly powered by WordPress
Creative Commons License
EricBrooks.Com® is licensed under a Creative Commons License.

Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.