Skip to main content

React Router 6 – Full Course


Curriculum for the course React Router 6 – Full Course

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 Routes BrowserRouter & Routes challenge Route, path, & element Quick Re-org Link 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 NavLink 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 useSearchParams 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 useLocation 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 createBrowserRouter Setting up the data router Loader function Challenge: Vans List Loader useLoaderData Challenge: useLoaderData in Vans List page Use the loader data instead of the useEffect Loaders Quiz Handling errors Add errorElement to vans route useRouteError 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 useNavigate() 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 useActionData Action error handling Action error handling in VanLife useNavigation() 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 Outro

Watch Online Full Course: React Router 6 – Full Course


Click Here to watch on Youtube: React Router 6 – Full Course


This video is first published on youtube via freecodecamp. If Video does not appear here, you can watch this on Youtube always.


Udemy React Router 6 – Full Course courses free download, Plurasight React Router 6 – Full Course courses free download, Linda React Router 6 – Full Course courses free download, Coursera React Router 6 – Full Course course download free, Brad Hussey udemy course free, free programming full course download, full course with project files, Download full project free, College major project download, CS major project idea, EC major project idea, clone projects download free

Labels:

Comments

Post a Comment

Popular posts from this blog

Fake CVR Generator Denmark

What Is Danish CVR The Central Business Register (CVR) is the central register of the state with information on all Danish companies. Since 1999, the Central Business Register has been the authoritative register for current and historical basic data on all registered companies in Denmark. Data comes from the companies' own registrations on Virk Report. There is also information on associations and public authorities in the CVR. As of 2018, CVR also contains information on Greenlandic companies, associations and authorities. In CVR at Virk you can do single lookups, filtered searches, create extracts and subscriptions, and retrieve a wide range of company documents and transcripts. Generate Danish CVR For Test (Fake) Click the button below to generate the valid CVR number for Denmark. You can click multiple times to generate several numbers. These numbers can be used to Test your sofware application that uses CVR, or Testing CVR APIs that Danish Govt provide. Generate
Post a Comment
Read more

How To Iterate Dictionary Object

Dictionary is a object that can store values in Key-Value pair. its just like a list, the only difference is: List can be iterate using index(0-n) but not the Dictionary . Generally when we try to iterate the dictionary we get below error: " Collection was modified; enumeration operation may not execute. " So How to parse a dictionary and modify its values?? To iterate dictionary we must loop through it's keys or key - value pair. Using keys
Post a Comment
Read more

How To Append Data to HTML5 localStorage or sessionStorage?

The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time untill unless user deletes his cache, data stored in sessionStorage gets cleared when the originating window or tab get closed. These are new HTML5 objects and provide these methods to deal with it: The following snippet accesses the current domain's local Storage object and adds a data item to it using Storage.setItem() . localStorage.setItem('myFav', 'Taylor Swift'); or you can use the keyname directly as : localStorage.myFav = 'Taylor Swift'; To grab the value set in localStorage or sessionStorage, we can use localStorage.getItem("myFav"); or localStorage.myFav There's no append function for localStorage or sessionStorage objects. It's not hard to write one though.The simplest solution goes here: But we can kee
Post a Comment
Read more