Learn Advanced React

Learn Advanced React

This course is part of multiple programs.

Instructor: Bob Ziroll

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

1 assignment

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Build your subject-matter expertise

This course is available as part of

When you enroll in this course, you'll also be asked to select a specific program.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

There are 3 modules in this course

Elevate your expertise with our Advanced React course. Building upon your foundational knowledge, this course delves into advanced React patterns, internal workings, and the implementation of complex applications using React Router.

Taught by industry veteran Bob Ziroll, who has successfully guided thousands of students towards rewarding careers in front-end development, this course equips you with in-depth React proficiency that stands out in the competitive job market. Why React? As the most sought-after front-end library globally, React not only offers abundant job opportunities but also enhances your overall JavaScript proficiency. Unlike other libraries, React fosters core JavaScript skills, empowering you to master the art of web development. Take your front-end development career to the next level with our Advanced React Development course.

Learn essential concepts such as React children, props manipulation through spreading, destructuring and drilling, compound components, and using React context, refs, and hooks.

What's included

65 plugins

65 pluginsTotal 290 minutes

Advanced React Intro5 minutes
Button - props review challenge4 minutes
Aside - children in HTML2 minutes
Aside - React Children2 minutes
Challenge - Button w/ Children2 minutes
Button - More Complex React Children6 minutes
Challenge - add onClick event listener3 minutes
Aside - props spreading3 minutes
Aside - Destructuring props4 minutes
Button - size prop5 minutes
Button - fix className issue7 minutes
Challenge - Button w/ Variants4 minutes
Mega Challenge - Overloaded Avatar Component10 minutes
Menu Component Intro5 minutes
Prop Drilling5 minutes
Aside: Compound Components Intro5 minutes
Compound Components in React - Part 14 minutes
Compound Components Quiz4 minutes
Compound Components in React - Part 22 minutes
Compound Components in React - Part 36 minutes
Summarize Challenge - Compound Components in React1 minute
Prop Drilling Problem #2 - Implicit State4 minutes
The React.Children API9 minutes
React.Children shortcomings7 minutes
Context Intro3 minutes
createContext() & Context Provider6 minutes
useContext()7 minutes
Add context to the Menu component4 minutes
State + Context7 minutes
Theme switcher final touches2 minutes
Menu component final touches4 minutes
Aside - Compound components w/ dot syntax3 minutes
Headless Toggle component4 minutes
Toggle - setup5 minutes
Toggle - Planning2 minutes
Toggle Context4 minutes
Toggle.Button7 minutes
Toggle.On & Toggle.Off5 minutes
Remove Star component5 minutes
Use Toggle with Menu component8 minutes
Composing new components with Toggle8 minutes
onToggle event listener7 minutes
Menu onClose event2 minutes
Intro to Refs7 minutes
Refs and DOM manipulation5 minutes
Fix onToggle bug using refs3 minutes
Fix missing onToggle bug using a noop function2 minutes
Render Props Part 15 minutes
Render Props Part 28 minutes
Render Props Part 36 minutes
Render Props Part 4 - children as render props2 minutes
Toggle.Display intro2 minutes
Toggle.Display6 minutes
Custom Hooks Intro2 minutes
Custom Hooks - useEffectOnUpdate8 minutes
Custom Hooks - useToggle5 minutes
Custom Hooks - useToggle part 23 minutes
Custom Hooks - useToggle part 33 minutes
Custom Hooks - useToggle part 43 minutes
Custom Hooks - useToggle part 53 minutes
Custom Hooks - useToggle part 65 minutes
Custom Hooks - useToggle part 72 minutes
Custom Hooks - useToggle part 84 minutes
Custom Hooks - useToggle part 92 minutes
Reusability section recap2 minutes

Learn how to seamlessly integrate routing into your React applications, enabling efficient navigation and dynamic content rendering. Explore route configuration, route parameters, nested routes, and more to build responsive web apps with ease.

What's included

85 plugins

85 pluginsTotal 383 minutes

Introduction to React Router 63 minutes
Multi-page vs single-page apps5 minutes
React Router Setup & BrowserRouter3 minutes
Routes3 minutes
BrowserRouter & Routes challenge1 minute
Route, path, & element4 minutes
Quick Re-org1 minute
Link Component3 minutes
VanLife project bootstrapping8 minutes
Initial Deploy to Netlify12 minutes
Mirage JS Server2 minutes
Challenge: Vans Page - Part 12 minutes
Challenge: Vans Page - Part 29 minutes
Route Params - part 14 minutes
Route Params - part 22 minutes
Route Params part 3.1 - useParams() & challenge5 minutes
Route Params part 3.2 - useParams() challenge7 minutes
Route Params Quiz4 minutes
Nested Routes Intro9 minutes
Fixing the Navbar with a Layout Route5 minutes
Fixing the Navbar with a Layout Route part 28 minutes
Bootstrap the Host pages4 minutes
Nesting the /host routes4 minutes
Creating the Host Layout6 minutes
Relative Paths4 minutes
Index Routes4 minutes
To nest or not to nest?5 minutes
Nested Routes Quiz5 minutes
Add Footer3 minutes
NavLink7 minutes
Active Link Styling with NavLink4 minutes
Active Link Styling with NavLink - part 25 minutes
Adding Host Vans Routes5 minutes
🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages3 minutes
Building out the Host Van Detail page9 minutes
Relative Links7 minutes
Back to all vans5 minutes
Add /host/vans/:id Nested Routes8 minutes
Add the Final Navbar!7 minutes
Outlet Context6 minutes
Search Params Intro7 minutes
useSearchParams4 minutes
Challenge: Set up search params in VanLife5 minutes
Filter the array w/ the search param5 minutes
Challenge: Filter the vans in VanLife2 minutes
Using Links to add search params3 minutes
Challenge: Filter the vans with Links3 minutes
Using the search params setter function4 minutes
Challenge: Filter the vans with a setter function3 minutes
Caveats to setting params2 minutes
Merging search params with Links6 minutes
Merging search params with the setSearchParams function5 minutes
Challenge: Conditional rendering practice5 minutes
Fix remaining absolute paths2 minutes
Back to all vans2 minutes
Link state6 minutes
useLocation8 minutes
Challenge: conditionally render the back button text3 minutes
404 Page6 minutes
"Happy Path" vs. "Sad Path" (new)3 minutes
Quick update to our fetching code3 minutes
Coding the Sad Path - Loading state (new)3 minutes
Coding the Sad Path - Error handling (new)6 minutes
Initial Login Form2 minutes
Note from the future: importing image assets in Vite3 minutes
Protected Routes Intro (FDCP)2 minutes
Protected Routes - AuthRequired Layout Route (FDCP)3 minutes
Protected Routes - Implementing "auth" (FDCP)2 minutes
Protected Routes - Navigate (FDCP)6 minutes
VanLife Protected Routes (FDCP)3 minutes
Protected Routes Quiz2 minutes
Navigation State (FDCP)5 minutes
Setup for authentication - happy path (FDCP)4 minutes
Authentication setup - sad path (FDCP)7 minutes
Navigate to /host route after login (FDCP)2 minutes
History Stack and Replace (FDCP)6 minutes
Challenge - send user to original page8 minutes
Placeholders are gone! 🎉2 minutes
Cloud Firestore Setup 🔥6 minutes
Cloud Firestore Code Setup4 minutes
Collection ref and getVans() function7 minutes
Create getVan function4 minutes
Refactor getHostVans function3 minutes
Final loose ends2 minutes
Outro3 minutes

Learn to optimize rendering, implement code splitting, and harness the power of useMemo and useCallback to create lightning-fast, efficient, and responsive web applications.