Advanced React

The best learning experience paired with a world-class instructor. This massive course aims to turn you into hireable React developer as fast as possible.

• React Children
• Props spreading
• Compound components
• React.Children
• Context
• Implicit state
• Headless components
• Component composition
• Render props
• Refs
• Custom hooks
• React Router 6
• Route Params
• Nested routes, Outlet, Outlet context
• Layout routes
• Link, NavLink, link state
• Search Params
• Firebase integration
• Netlify deployment
• React’s rendering phases
• Using Chrome and React dev tools
• StrictMode
• useMemo()
• memo()
• useCallback()
• And a lot more!

• Reusability
• 1. Advanced React Intro
• 2. Button - props review challenge
• 3. Aside - children in HTML
• 4. Aside - React Children
• 5. Challenge - Button w/ Children
• 6. Button - More Complex React Children
• 7. Challenge - add onClick event listener
• 8. Aside - props spreading
• 9. Aside - Destructuring props
• 10. Button - size prop
• 11. Button - fix className issue
• 12. Challenge - Button w/ Variants
• 13. Mega Challenge - Overloaded Avatar Component
• 14. Menu Component Intro
• 15. Prop Drilling
• 16. Aside: Compound Components Intro
• 17. Compound Components in React - Part 1
• 18. Compound Components Quiz
• 19. Compound Components in React - Part 2
• 20. Compound Components in React - Part 3
• 21. Summarize Challenge - Compound Components in React
• 22. Prop Drilling Problem #2 - Implicit State
• 23. The React.Children API
• 24. React.Children shortcomings
• 25. Context Intro
• 26. createContext() & Context Provider
• 27. useContext()
• 28. Add context to the Menu component
• 29. State + Context
• 30. Theme switcher final touches
• 31. Menu component final touches
• 32. A11y in menu component
• 33. Aside - Compound components w/ dot syntax
• 34. Headless Toggle component
• 35. Toggle - setup
• 36. Toggle - Planning
• 37. Toggle Context
• 38. Toggle.Button
• 39. Toggle.On & Toggle.Off
• 40. Remove Star component
• 41. Use Toggle with Menu component
• 42. Composing new components with Toggle
• 43. onToggle event listener
• 44. Menu onClose event
• 45. Intro to Refs
• 46. Refs and DOM manipulation
• 47. Fix onToggle bug using refs
• 48. Fix missing onToggle bug using a noop function
• 49. Render Props Part 1
• 50. Render Props Part 2
• 51. Render Props Part 3
• 52. Render Props Part 4 - children as render props
• 53. Toggle.Display intro
• 54. Toggle.Display
• 55. Custom Hooks Intro
• 56. Custom Hooks - useEffectOnUpdate
• 57. Custom Hooks - useToggle
• 58. Custom Hooks - useToggle part 2
• 59. Custom Hooks - useToggle part 3
• 60. Custom Hooks - useToggle part 4
• 61. Custom Hooks - useToggle part 5
• 62. Custom Hooks - useToggle part 6
• 63. Custom Hooks - useToggle part 7
• 64. Custom Hooks - useToggle part 8
• 65. Custom Hooks - useToggle part 9
• 66. Reusability section recap
• 67. Solo Project - Component Library++
• Routing
• 1. Introduction to React Router 6
• 2. Multi-page vs single-page apps
• 3. React Router Setup & BrowserRouter
• 4. Routes
• 5. BrowserRouter & Routes challenge
• 6. Route, path, & element
• 7. Quick Re-org
• 8. Link
• 9. VanLife project bootstrapping
• 10. Initial Deploy to Netlify
• 11. Mirage JS Server
• 12. Challenge: Vans Page - Part 1
• 13. Challenge: Vans Page - Part 2
• 14. Route Params - part 1
• 15. Route Params - part 2
• 16. Route Params part 3.1 - useParams() & challenge
• 17. Route Params part 3.2 - useParams() challenge
• 18. Route Params Quiz
• 19. Nested Routes Intro
• 20. Fixing the Navbar with a Layout Route
• 21. Fixing the Navbar with a Layout Route part 2
• 22. Bootstrap the Host pages
• 23. Nesting the /host routes
• 24. Creating the Host Layout
• 25. Relative Paths
• 26. Index Routes
• 27. To nest or not to nest?
• 28. Nested Routes Quiz
• 29. Add Footer
• 30. NavLink
• 31. Active Link Styling with NavLink
• 32. Active Link Styling with NavLink - part 2
• 33. Adding Host Vans Routes
• 34. 🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages
• 35. Building out the Host Van Detail page
• 36. Relative Links
• 37. Back to all vans
• 38. Add /host/vans/:id Nested Routes
• 39. Add the Final Navbar!
• 40. Outlet Context
• 41. Search Params Intro
• 42. useSearchParams
• 43. Challenge: Set up search params in VanLife
• 44. Filter the array w/ the search param
• 45. Challenge: Filter the vans in VanLife
• 46. Using Links to add search params
• 47. Challenge: Filter the vans with Links
• 48. Using the search params setter function
• 49. Challenge: Filter the vans with a setter function
• 50. Caveats to setting params
• 51. Merging search params with Links
• 52. Merging search params with the setSearchParams function
• 53. Challenge: Conditional rendering practice
• 54. Fix remaining absolute paths
• 55. Back to all vans
• 56. Link state
• 57. useLocation
• 58. Challenge: conditionally render the back button text
• 59. 404 Page
• 60. "Happy Path" vs. "Sad Path" (new)
• 61. Quick update to our fetching code
• 62. Coding the Sad Path - Loading state (new)
• 63. Coding the Sad Path - Error handling
• 64. Update: Accessibility Addition
• 65. Initial Login Form
• 66. Note from the future: importing image assets in Vite
• 67. Protected Routes Intro (FDCP)
• 68. Protected Routes - AuthRequired Layout Route (FDCP)
• 69. Protected Routes - Implementing "auth" (FDCP)
• 70. Protected Routes - Navigate (FDCP)
• 71. VanLife Protected Routes (FDCP)
• 72. Protected Routes Quiz
• 73. Navigation State (FDCP)
• 74. Setup for authentication - happy path (FDCP)
• 75. Authentication setup - sad path (FDCP)
• 76. Navigate to /host route after login (FDCP)
• 77. History Stack and Replace (FDCP)
• 78. Challenge - send user to original page
• 79. Placeholders are gone! 🎉
• 80. Cloud Firestore Setup 🔥
• 81. Cloud Firestore Code Setup
• 82. Collection ref and getVans() function
• 83. Create getVan function
• 84. Refactor getHostVans function
• 85. Final loose ends
• 86. Outro
• Performance
• 1. Performance Intro
• 2. Recursive rendering
• 3. Three phases of "rendering"
• 4. Rendering Phases Quiz
• 5. Using Dev Tools to Measure Performance
• 6. StrictMode - double renders components
• 7. StrictMode - rerunning side effects
• 8. Code Splitting, lazy, Suspense - Part 1
• 9. Code Splitting, lazy, Suspense - Part 2
• 10. useMemo()
• 11. useMemo() practice
• 12. React.memo() - reducing rerenders
• 13. React.memo() practice
• 14. Value vs. Reference Types & referential equality
• 15. useMemo(), React.memo(), and referential equality
• 16. useMemo() practice
• 17. useCallback()
• 18. useCallback() practice
• 19. Course Outro