Advanced React

0 (0)

Duration

0m

Students

0

Level

Advanced

Last Updated

November 22, 2024

Overview
Curriculum
Reviews

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.

3 Sections
168 Lessons
0m Duration

Expand All

Reusability

65 Lessons

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
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
Solo Project – Component Library++

Routing

84 Lessons

Introduction to React Router 6
Multi-Page vs Single-Page Apps
React Router Setup & BrowserRouter
Routes
BrowserRouter & Routes Challenge
Quick Re-Org
Route, Path, & Element
Link
VanLife Project Bootstrapping
Initial Deploy to Netlify
Mirage JS Server
Challenge: Vans Page – Part 1
Challenge: Vans Page – Part 2
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

Performance

19 Lessons

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

0

0 Ratings

5 Star 0%

4 Star 0%

3 Star 0%

2 Star 0%

1 Star 0%

Reviews

Free

Course Includes

React Children
Props spreading
Compound components
ReactChildren
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!