Learn Advanced React

Learn Advanced React

This course is part of multiple programs.

Instructor: Bob Ziroll

Access provided by Believe

2,573 already enrolled

10 modules

Gain insight into a topic and learn the fundamentals.

34 reviews

Advanced level

Designed for those already in the industry

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

10 modules

Gain insight into a topic and learn the fundamentals.

34 reviews

Advanced level

Designed for those already in the industry

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

10 assignments

Taught in English

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

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

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

There are 10 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 and destructuring, prop drilling, compound components, context implementation, and accessibility in React components.

What's included

1 assignment34 plugins

1 assignment Total 20 minutes

Reusability: Part 1 - Practice Quiz 20 minutes

34 plugins Total 153 minutes

Advanced React Intro 5 minutes
Welcome to interactive lessons! 1 minute
Button - props review challenge 4 minutes
Aside - children in HTML 2 minutes
Aside - React Children 2 minutes
Challenge - Button w/ Children 2 minutes
Button - More Complex React Children 6 minutes
Challenge - add onClick event listener 3 minutes
Aside - props spreading 3 minutes
Aside - Destructuring props 4 minutes
Button - size prop 5 minutes
Button - fix className issue 7 minutes
Challenge - Button w/ Variants 4 minutes
Mega Challenge - Overloaded Avatar Component 10 minutes
Menu Component Intro 5 minutes
Prop Drilling 5 minutes
Aside: Compound Components Intro 5 minutes
Compound Components in React - Part 1 4 minutes
Compound Components Quiz 4 minutes
Compound Components in React - Part 2 2 minutes
Compound Components in React - Part 3 6 minutes
Summarize Challenge - Compound Components in React 1 minute
Prop Drilling Problem #2 - Implicit State 4 minutes
The React.Children API 9 minutes
React.Children shortcomings 7 minutes
Context Intro 3 minutes
createContext() & Context Provider 6 minutes
useContext() 7 minutes
Add context to the Menu component 4 minutes
State + Context 7 minutes
Theme switcher final touches 2 minutes
Menu component final touches 4 minutes
A11y in menu component 7 minutes
Aside - Compound components w/ dot syntax 3 minutes

Explore advanced React techniques, including building toggle components, utilizing refs for DOM manipulation, applying the Render Props pattern, and creating custom hooks for state management.

What's included

1 assignment32 plugins

1 assignment Total 15 minutes

Reusability: Part 2 - Practice Quiz 15 minutes

32 plugins Total 143 minutes

Headless Toggle component 4 minutes
Toggle - setup 5 minutes
Toggle - Planning 2 minutes
Toggle Context 4 minutes
Toggle.Button 7 minutes
Toggle.On & Toggle.Off 5 minutes
Remove Star component 5 minutes
Use Toggle with Menu component 8 minutes
Composing new components with Toggle 8 minutes
onToggle event listener 7 minutes
Menu onClose event 2 minutes
Intro to Refs 7 minutes
Refs and DOM manipulation 5 minutes
Fix onToggle bug using refs 3 minutes
Fix missing onToggle bug using a noop function 2 minutes
Render Props Part 1 5 minutes
Render Props Part 2 8 minutes
Render Props Part 3 6 minutes
Render Props Part 4 - children as render props 2 minutes
Toggle.Display intro 2 minutes
Toggle.Display 6 minutes
Custom Hooks Intro 2 minutes
Custom Hooks - useEffectOnUpdate 8 minutes
Custom Hooks - useToggle 5 minutes
Custom Hooks - useToggle part 2 3 minutes
Custom Hooks - useToggle part 3 3 minutes
Custom Hooks - useToggle part 4 3 minutes
Custom Hooks - useToggle part 5 3 minutes
Custom Hooks - useToggle part 6 5 minutes
Custom Hooks - useToggle part 7 2 minutes
Custom Hooks - useToggle part 8 4 minutes
Custom Hooks - useToggle part 9 2 minutes

Reinforce your knowledge with a comprehensive recap. Apply your skills in a solo project and demonstrate your understanding through a graded assignment.

What's included

1 assignment2 plugins

Learn the foundational concepts of React Router, including setting up routes, navigation, and deploying a basic single-page application.

What's included

1 assignment18 plugins

1 assignment Total 15 minutes

Routing: Part 1 - Practice Quiz 15 minutes

18 plugins Total 78 minutes

Introduction to React Router 6 3 minutes
Multi-page vs single-page apps 5 minutes
React Router Setup & BrowserRouter 3 minutes
Routes 3 minutes
BrowserRouter & Routes challenge 1 minute
Route, path, & element 4 minutes
Quick Re-org 1 minute
Link Component 3 minutes
VanLife project bootstrapping 8 minutes
Initial Deploy to Netlify 12 minutes
Mirage JS Server 2 minutes
Challenge: Vans Page - Part 1 2 minutes
Challenge: Vans Page - Part 2 9 minutes
Route Params - part 1 4 minutes
Route Params - part 2 2 minutes
Route Params part 3.1 - useParams() & challenge 5 minutes
Route Params part 3.2 - useParams() challenge 7 minutes
Route Params Quiz 4 minutes

Explore advanced React Router techniques, including nested routes, search parameters, dynamic data handling, and optimizing user navigation and experience.

What's included

1 assignment34 plugins

1 assignment Total 15 minutes

Routing: Part 2 - Practice Quiz 15 minutes

34 plugins Total 172 minutes

Nested Routes Intro 9 minutes
Fixing the Navbar with a Layout Route 5 minutes
Fixing the Navbar with a Layout Route part 2 8 minutes
Bootstrap the Host pages 4 minutes
Nesting the /host routes 4 minutes
Creating the Host Layout 6 minutes
Relative Paths 4 minutes
Index Routes 4 minutes
To nest or not to nest? 5 minutes
Nested Routes Quiz 5 minutes
Add Footer 3 minutes
NavLink 7 minutes
Active Link Styling with NavLink 4 minutes
Active Link Styling with NavLink - part 2 5 minutes
Adding Host Vans Routes 5 minutes
🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages 3 minutes
Building out the Host Van Detail page 9 minutes
Relative Links 7 minutes
Back to all vans 5 minutes
Add /host/vans/:id Nested Routes 8 minutes
Add the Final Navbar! 7 minutes
Outlet Context 6 minutes
Search Params Intro 7 minutes
useSearchParams 4 minutes
Challenge: Set up search params in VanLife 5 minutes
Filter the array w/ the search param 5 minutes
Challenge: Filter the vans in VanLife 2 minutes
Using Links to add search params 3 minutes
Challenge: Filter the vans with Links 3 minutes
Using the search params setter function 4 minutes
Challenge: Filter the vans with a setter function 3 minutes
Caveats to setting params 2 minutes
Merging search params with Links 6 minutes
Merging search params with the setSearchParams function 5 minutes

Master authentication and data integration in React Router, focusing on protected routes, user management, and utilizing Cloud Firestore for dynamic data handling.

What's included

1 assignment33 plugins

1 assignment Total 15 minutes

Routing: Part 3 - Practice Quiz 15 minutes

33 plugins Total 132 minutes

Challenge: Conditional rendering practice 5 minutes
Fix remaining absolute paths 2 minutes
Back to all vans 2 minutes
Link state 6 minutes
useLocation 8 minutes
Challenge: conditionally render the back button text 3 minutes
404 Page 6 minutes
"Happy Path" vs. "Sad Path" 3 minutes
Quick update to our fetching code 3 minutes
Coding the Sad Path - Loading state 3 minutes
Coding the Sad Path - Error handling 6 minutes
Update: Accessibility Addition 2 minutes
Initial Login Form 2 minutes
Note from the future: importing image assets in Vite 3 minutes
Protected Routes Intro 2 minutes
Protected Routes - AuthRequired Layout Route 3 minutes
Protected Routes - Implementing "auth" 2 minutes
Protected Routes - Navigate 6 minutes
VanLife Protected Routes 3 minutes
Protected Routes Quiz 2 minutes
Navigation State 5 minutes
Setup for authentication - happy path 4 minutes
Authentication setup - sad path 7 minutes
Navigate to /host route after login 2 minutes
History Stack and Replace 6 minutes
Challenge - send user to original page 8 minutes
Placeholders are gone! 🎉 2 minutes
Cloud Firestore Setup 🔥 6 minutes
Cloud Firestore Code Setup 4 minutes
Collection ref and getVans() function 7 minutes
Create getVan function 4 minutes
Refactor getHostVans function 3 minutes
Final loose ends 2 minutes

Test your new knowledge with the second Graded Quiz!

What's included

1 assignment1 plugin

Learn the foundational concepts of React rendering phases, performance measurement, and code optimization techniques using tools like StrictMode and lazy loading.

What's included

1 assignment7 plugins

Explore advanced memoization techniques and learn to optimize React components using useMemo, React.memo, and useCallback to improve performance and efficiency.

What's included

1 assignment11 plugins

1 assignment Total 15 minutes

Performance: Part 2 - Practice Quiz 15 minutes

11 plugins Total 67 minutes

Code Splitting, lazy, Suspense - Part 1 5 minutes
Code Splitting, lazy, Suspense - Part 2 10 minutes
useMemo() 7 minutes
useMemo() practice 6 minutes
React.memo() - reducing rerenders 9 minutes
React.memo() practice 3 minutes
Value vs. Reference Types & referential equality 5 minutes
useMemo(), React.memo(), and referential equality 6 minutes
useMemo() practice 2 minutes
useCallback() 5 minutes
useCallback() practice 9 minutes

Test your new knowledge with the final Graded Quiz of the course!

What's included

1 assignment1 plugin

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Instructor ratings

(18 ratings)

Bob Ziroll

Scrimba

14 Courses 51,898 learners

Offered by

Scrimba

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Learner reviews

5 stars
79.41%
4 stars
17.64%
3 stars
2.94%
2 stars
0%
1 star
0%

Showing 3 of 34

Reviewed on Oct 6, 2025

good i liked this but need some changes sometime providing correct answers then it shows errors

Reviewed on Mar 20, 2025

I found this course interesting and has helped me to gain a lot of skills that I am already using to create some apps. Thanks to Bob for really explaining in detail the different parts of the course

View more reviews