Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Advanced React

via Scrimba

Go to class Write review

Overview

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!

Syllabus

  • 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

Reviews

Start your review of Advanced React

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.