VOOZH about

URL: https://www.coursera.org/learn/learn-advanced-react

⇱ Learn Advanced React | Coursera

Learn Advanced React

Learn Advanced React

This course is part of multiple programs.

2,744 already enrolled

Included with

Gain insight into a topic and learn the fundamentals.
4.8

35 reviews

Advanced level
Designed for those already in the industry
2 weeks to complete
at 10 hours a week
Gain insight into a topic and learn the fundamentals.
4.8

35 reviews

Advanced level
Designed for those already in the industry
2 weeks to complete
at 10 hours a week

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

10 assignments

Taught in English
Flexible schedule
Learn at your own pace

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

1 assignment•Total 30 minutes
  • Reusability Graded Quiz•30 minutes
2 plugins•Total 62 minutes
  • Reusability section recap•2 minutes
  • Solo Project - Component Library++•60 minutes

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

1 assignment•Total 30 minutes
  • Routing Graded Quiz•30 minutes
1 plugin•Total 3 minutes
  • Outro•3 minutes

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

1 assignment•Total 15 minutes
  • Performance: Part 1 - Practice Quiz•15 minutes
7 plugins•Total 35 minutes
  • Performance Intro•4 minutes
  • Recursive rendering•4 minutes
  • Three phases of "rendering"•6 minutes
  • Rendering Phases Quiz•2 minutes
  • Using Dev Tools to Measure Performance•5 minutes
  • StrictMode - double renders components•8 minutes
  • StrictMode - rerunning side effects•6 minutes

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

1 assignment•Total 30 minutes
  • Performance Graded Quiz•30 minutes
1 plugin•Total 4 minutes
  • Course Outro•4 minutes

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
4.8 (18 ratings)
Scrimba
14 Courses•56,736 learners

Explore more from Software Development

Why people choose Coursera for their career

👁 Image

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."
👁 Image

Jennifer J.

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

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."
👁 Image

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

    80%

  • 4 stars

    17.14%

  • 3 stars

    2.85%

  • 2 stars

    0%

  • 1 star

    0%

Showing 3 of 35

AT
·

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

DR
·

Reviewed on Mar 31, 2025

well done bob i could listen u 247 and wouldve never get tired and would still understand everything.

AK
·

Reviewed on Oct 6, 2025

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

Frequently asked questions

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,