TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
Advanced
React Courses

Advanced React

Overview
Curriculum
  • 3 Sections
  • 168 Lessons
  • 13h Duration
Collapse All
Reusability
65 Lessons
  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. React.Children Shortcomings
  24. Context Intro
  25. createContext() & Context Provider
  26. useContext()
  27. Add Context to the Menu Component
  28. State + Context
  29. Theme Switcher Final Touches
  30. Menu Component Final Touches
  31. Aside – Compound Components W/ Dot Syntax
  32. Headless Toggle Component
  33. Toggle – Setup
  34. Toggle – Planning
  35. Toggle Context
  36. Toggle.Button
  37. Toggle.On & Toggle.Off
  38. Remove Star Component
  39. Use Toggle with Menu Component
  40. Composing New Components with Toggle
  41. onToggle Event Listener
  42. Menu onClose Event
  43. Intro to Refs
  44. Refs and DOM Manipulation
  45. Fix onToggle Bug Using Refs
  46. Fix Missing onToggle Bug Using a Noop Function
  47. Render Props Part 1
  48. Render Props Part 2
  49. Render Props Part 3
  50. Render Props Part 4 – Children as Render Props
  51. Toggle.Display Intro
  52. Toggle.Display
  53. Custom Hooks Intro
  54. Custom Hooks – useEffectOnUpdate
  55. Custom Hooks – useToggle
  56. Custom Hooks – useToggle Part 2
  57. Custom Hooks – useToggle Part 3
  58. Custom Hooks – useToggle Part 4
  59. Custom Hooks – useToggle Part 5
  60. Custom Hooks – useToggle Part 6
  61. Custom Hooks – useToggle Part 7
  62. Custom Hooks – useToggle Part 8
  63. Custom Hooks – useToggle Part 9
  64. Reusability Section Recap
  65. Solo Project – Component Library++
Routing
84 Lessons
  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. Quick Re-Org
  7. Route, Path, & Element
  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 2
  15. Route Params Part 3.1 – useParams() & Challenge
  16. Route Params Part 3.2 – useParams() Challenge
  17. Route Params Quiz
  18. Nested Routes Intro
  19. Fixing the Navbar with a Layout Route
  20. Fixing the Navbar with a Layout Route Part 2
  21. Bootstrap the Host Pages
  22. Nesting the /Host Routes
  23. Creating the Host Layout
  24. Relative Paths
  25. Index Routes
  26. To Nest or Not to Nest?
  27. Nested Routes Quiz
  28. Add Footer
  29. NavLink
  30. Active Link Styling with NavLink
  31. Active Link Styling with NavLink – Part 2
  32. Adding Host Vans Routes
  33. 🔀 Optional Side Quest – Building Out the Host Vans List and Detail Pages
  34. Building Out the Host Van Detail Page
  35. Relative Links
  36. Back to All Vans
  37. Add /Host/Vans/:Id Nested Routes
  38. Add the Final Navbar!
  39. Outlet Context
  40. Search Params Intro
  41. useSearchParams
  42. Challenge: Set Up Search Params in VanLife
  43. Filter the Array W/ the Search Param
  44. Challenge: Filter the Vans in VanLife
  45. Using Links to Add Search Params
  46. Challenge: Filter the Vans with Links
  47. Using the Search Params Setter Function
  48. Challenge: Filter the Vans with a Setter Function
  49. Caveats to Setting Params
  50. Merging Search Params with Links
  51. Merging Search Params with the setSearchParams Function
  52. Challenge: Conditional Rendering Practice
  53. Fix Remaining Absolute Paths
  54. Back to All Vans
  55. Link State
  56. useLocation
  57. Challenge: Conditionally Render the Back Button Text
  58. 404 Page
  59. “Happy Path” vs. “Sad Path” (New)
  60. Quick Update to Our Fetching Code
  61. Coding the Sad Path – Loading State (New)
  62. Coding the Sad Path – Error Handling (New)
  63. Initial Login Form
  64. Note from the Future: Importing Image Assets in Vite
  65. Protected Routes Intro (FDCP)
  66. Protected Routes – AuthRequired Layout Route (FDCP)
  67. Protected Routes – Implementing “Auth” (FDCP)
  68. Protected Routes – Navigate (FDCP)
  69. VanLife Protected Routes (FDCP)
  70. Protected Routes Quiz
  71. Navigation State (FDCP)
  72. Setup for Authentication – Happy Path (FDCP)
  73. Authentication Setup – Sad Path (FDCP)
  74. Navigate to /Host Route After Login (FDCP)
  75. History Stack and Replace (FDCP)
  76. Challenge – Send User to Original Page
  77. Placeholders Are Gone! 🎉
  78. Cloud Firestore Setup 🔥
  79. Cloud Firestore Code Setup
  80. Collection Ref and getVans() Function
  81. Create getVan Function
  82. Refactor getHostVans Function
  83. Final Loose Ends
  84. Outro
Performance
19 Lessons
  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

 

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.

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below: