Advanced React by Scrimba
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.
Skills you will learn!
Curriculum
67 Topics
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
A11y in menu component
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
Solo Project - Component Library++
86 Topics
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
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"
Quick update to our fetching code
Coding the Sad Path - Loading state
Coding the Sad Path - Error handling
Update: Accessibility Addition
Initial Login Form
Note from the future: importing image assets in Vite
Protected Routes Intro
Protected Routes - AuthRequired Layout Route
Protected Routes - Implementing "auth"
Protected Routes - Navigate
VanLife Protected Routes
Protected Routes Quiz
Navigation State
Setup for authentication - happy path
Authentication setup - sad path
Navigate to /host route after login
History Stack and Replace
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
20 Topics
Performance Intro
Recursive rendering
Three phases of "rendering"
Rendering Phases Quiz
Using Dev Tools to Measure Performance
StrictMode - double renders components
StrictMode - rerunning side effects
Code Splitting lazy Suspense - Part 1
Code Splitting lazy Suspense - Part 2
useMemo()
useMemo() practice
React.memo() - reducing rerenders
React.memo() practice
Value vs. Reference Types & referential equality
useMemo() React.memo() and referential equality
useMemo() practice
useCallback()
useCallback() practice
Course Outro
Certificate of Completion
Advanced React
Related React JS Courses
Thank You!
Your review has been submitted successfully.