Course: Learn Advanced React
Modules:
Advanced React Intro, Button - props review challenge, Aside - children in HTML, Aside - React Children, Challenge - Button w/ Children, Button - More Complex React Children, Challenge - add onClick event listener, Aside - props spreading, Aside - Destructuring props, Button - size prop, Button - fix className issue, Challenge - Button w/ Variants, Mega Challenge - Overloaded Avatar Component, Menu Component Intro, Prop Drilling, Aside: Compound Components Intro, Compound Components in React - Part 1, Compound Components Quiz, Compound Components in React - Part 2, Compound Components in React - Part 3, Summarize Challenge - Compound Components in React, Prop Drilling Problem #2 - Implicit State, The React.Children API, React.Children shortcomings, Context Intro, createContext() & Context Provider, useContext(), Add context to the Menu component, State + Context, Theme switcher final touches, Menu component final touches, Aside - Compound components w/ dot syntax, Headless Toggle component, Toggle - setup, Toggle - Planning, Toggle Context, Toggle.Button, Toggle.On & Toggle.Off, Remove Star component, Use Toggle with Menu component, Composing new components with Toggle, onToggle event listener, Menu onClose event, Intro to Refs, Refs and DOM manipulation, Fix onToggle bug using refs, Fix missing onToggle bug using a noop function, Render Props Part 1, Render Props Part 2, Render Props Part 3, Render Props Part 4 - children as render props, Toggle.Display intro, Toggle.Display, Custom Hooks Intro, Custom Hooks - useEffectOnUpdate, Custom Hooks - useToggle, Custom Hooks - useToggle part 2, Custom Hooks - useToggle part 3, Custom Hooks - useToggle part 4, Custom Hooks - useToggle part 5, Custom Hooks - useToggle part 6, Custom Hooks - useToggle part 7, Custom Hooks - useToggle part 8, Custom Hooks - useToggle part 9, Reusability section recap
Introduction to React Router 6, Multi-page vs single-page apps, React Router Setup & BrowserRouter, Routes, BrowserRouter & Routes challenge, Route, path, & element, Quick Re-org, Link Component, VanLife project bootstrapping, Initial Deploy to Netlify, Mirage JS Server, Challenge: Vans Page - Part 1, Challenge: Vans Page - Part 2, Route Params - part 1, Route Params - part 2, Route Params part 3.1 - useParams() & challenge, Route Params part 3.2 - useParams() challenge, Route Params Quiz, Nested Routes Intro, Fixing the Navbar with a Layout Route, Fixing the Navbar with a Layout Route part 2, Bootstrap the Host pages, Nesting the /host routes, Creating the Host Layout, Relative Paths, Index Routes, To nest or not to nest?, Nested Routes Quiz, Add Footer, NavLink, Active Link Styling with NavLink, Active Link Styling with NavLink - part 2, 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, 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" vs. "Sad Path" (new), Quick update to our fetching code, Coding the Sad Path - Loading state (new), Coding the Sad Path - Error handling (new), Initial Login Form, Note from the future: importing image assets in Vite, Protected Routes Intro (FDCP), Protected Routes - AuthRequired Layout Route (FDCP), Protected Routes - Implementing "auth" (FDCP), Protected Routes - Navigate (FDCP), VanLife Protected Routes (FDCP), Protected Routes Quiz, Navigation State (FDCP), Setup for authentication - happy path (FDCP), Authentication setup - sad path (FDCP), Navigate to /host route after login (FDCP), History Stack and Replace (FDCP), Challenge - send user to original page, Placeholders are gone! 🎉, Cloud Firestore Setup 🔥, Cloud Firestore Code Setup, Collection ref and getVans() function, Create getVan function, Refactor getHostVans function, Final loose ends, Outro
Advanced React Quiz