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

10 assignments

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 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 assignment33 plugins

1 assignmentTotal 20 minutes

Reusability: Part 1 - Practice Quiz20 minutes

33 pluginsTotal 152 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
A11y in menu component7 minutes
Aside - Compound components w/ dot syntax3 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 assignmentTotal 15 minutes

Reusability: Part 2 - Practice Quiz15 minutes

32 pluginsTotal 143 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

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 assignmentTotal 15 minutes

Routing: Part 1 - Practice Quiz15 minutes

18 pluginsTotal 78 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

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 assignmentTotal 15 minutes

Routing: Part 2 - Practice Quiz15 minutes

34 pluginsTotal 172 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

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 assignmentTotal 15 minutes

Routing: Part 3 - Practice Quiz15 minutes

33 pluginsTotal 132 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"3 minutes
Quick update to our fetching code3 minutes
Coding the Sad Path - Loading state3 minutes
Coding the Sad Path - Error handling6 minutes
Update: Accessibility Addition2 minutes
Initial Login Form2 minutes
Note from the future: importing image assets in Vite3 minutes
Protected Routes Intro2 minutes
Protected Routes - AuthRequired Layout Route3 minutes
Protected Routes - Implementing "auth" 2 minutes
Protected Routes - Navigate6 minutes
VanLife Protected Routes3 minutes
Protected Routes Quiz2 minutes
Navigation State 5 minutes
Setup for authentication - happy path4 minutes
Authentication setup - sad path7 minutes
Navigate to /host route after login2 minutes
History Stack and Replace6 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

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.