Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Advanced React

Enroll for freeGet started!

Join 18198 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

This bootcamp includes

12 hours - 169 lectures
Tons of interactive challenges
Certificate of completion
The course creator Bob Ziroll

with Bob Ziroll

Course level: Advanced

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.

What's inside

This course contains 172 interactive scrims spread across 3 modules.

two girls
Reusability

67 lessons4 hours 59 min

1. Advanced React Intro
4:38
2. Button - props review challenge
4:13
3. Aside - children in HTML
2:12
4. Aside - React Children
1:53
5. Challenge - Button w/ Children
1:38
6. Button - More Complex React Children
5:37
7. Challenge - add onClick event listener
2:52
8. Aside - props spreading
3:24
9. Aside - Destructuring props
3:32
10. Button - size prop
5:16
11. Button - fix className issue
6:55
12. Challenge - Button w/ Variants
4:17
13. Mega Challenge - Overloaded Avatar Component
10:05
14. Menu Component Intro
5:24
15. Prop Drilling
4:53
16. Aside: Compound Components Intro
4:52
17. Compound Components in React - Part 1
3:38
18. Compound Components Quiz
3:48
19. Compound Components in React - Part 2
2:24
20. Compound Components in React - Part 3
5:59
21. Summarize Challenge - Compound Components in React
0:42
22. Prop Drilling Problem #2 - Implicit State
3:46
23. The React.Children API
8:55
24. React.Children shortcomings
6:58
25. Context Intro
2:44
26. createContext() & Context Provider
5:42
27. useContext()
6:32
28. Add context to the Menu component
4:28
29. State + Context
6:30
30. Theme switcher final touches
2:04
31. Menu component final touches
4:11
32. A11y in menu component
6:30
33. Aside - Compound components w/ dot syntax
2:46
34. Headless Toggle component
3:54
35. Toggle - setup
5:14
36. Toggle - Planning
2:28
37. Toggle Context
3:41
38. Toggle.Button
6:39
39. Toggle.On & Toggle.Off
4:39
40. Remove Star component
5:07
41. Use Toggle with Menu component
7:44
42. Composing new components with Toggle
8:17
43. onToggle event listener
6:57
44. Menu onClose event
1:59
45. Intro to Refs
6:34
46. Refs and DOM manipulation
5:12
47. Fix onToggle bug using refs
3:21
48. Fix missing onToggle bug using a noop function
2:12
49. Render Props Part 1
5:05
50. Render Props Part 2
7:51
51. Render Props Part 3
5:36
52. Render Props Part 4 - children as render props
2:11
53. Toggle.Display intro
2:05
54. Toggle.Display
6:01
55. Custom Hooks Intro
1:55
56. Custom Hooks - useEffectOnUpdate
7:57
57. Custom Hooks - useToggle
4:45
58. Custom Hooks - useToggle part 2
3:13
59. Custom Hooks - useToggle part 3
2:57
60. Custom Hooks - useToggle part 4
3:04
61. Custom Hooks - useToggle part 5
3:05
62. Custom Hooks - useToggle part 6
4:56
63. Custom Hooks - useToggle part 7
1:42
64. Custom Hooks - useToggle part 8
3:41
65. Custom Hooks - useToggle part 9
2:22
66. Reusability section recap
1:39
67. Solo Project - Component Library++
5:59
Routing

86 lessons6 hours 24 min

1. Introduction to React Router 6
2:54
2. Multi-page vs single-page apps
5:13
3. React Router Setup & BrowserRouter
3:12
4. Routes
2:40
5. BrowserRouter & Routes challenge
1:06
6. Route, path, & element
4:12
7. Quick Re-org
1:01
8. Link
3:59
9. VanLife project bootstrapping
8:03
10. Initial Deploy to Netlify
11:41
11. Mirage JS Server
1:50
12. Challenge: Vans Page - Part 1
2:14
13. Challenge: Vans Page - Part 2
9:06
14. Route Params - part 1
4:12
15. Route Params - part 2
1:46
16. Route Params part 3.1 - useParams() & challenge
4:53
17. Route Params part 3.2 - useParams() challenge
7:10
18. Route Params Quiz
4:15
19. Nested Routes Intro
8:52
20. Fixing the Navbar with a Layout Route
4:52
21. Fixing the Navbar with a Layout Route part 2
7:42
22. Bootstrap the Host pages
3:57
23. Nesting the /host routes
3:45
24. Creating the Host Layout
6:27
25. Relative Paths
4:25
26. Index Routes
3:48
27. To nest or not to nest?
5:06
28. Nested Routes Quiz
4:48
29. Add Footer
3:18
30. NavLink
7:12
31. Active Link Styling with NavLink
3:52
32. Active Link Styling with NavLink - part 2
5:12
33. Adding Host Vans Routes
5:11
34. πŸ”€ Optional Side Quest - Building out the Host Vans List and Detail Pages
3:18
35. Building out the Host Van Detail page
8:54
36. Relative Links
7:01
37. Back to all vans
5:13
38. Add /host/vans/:id Nested Routes
8:06
39. Add the Final Navbar!
6:33
40. Outlet Context
5:30
41. Search Params Intro
7:16
42. useSearchParams
4:03
43. Challenge: Set up search params in VanLife
4:41
44. Filter the array w/ the search param
5:04
45. Challenge: Filter the vans in VanLife
1:41
46. Using Links to add search params
2:51
47. Challenge: Filter the vans with Links
3:12
48. Using the search params setter function
3:31
49. Challenge: Filter the vans with a setter function
2:30
50. Caveats to setting params
1:30
51. Merging search params with Links
6:09
52. Merging search params with the setSearchParams function
5:19
53. Challenge: Conditional rendering practice
4:39
54. Fix remaining absolute paths
1:50
55. Back to all vans
2:12
56. Link state
6:29
57. useLocation
7:59
58. Challenge: conditionally render the back button text
2:47
59. 404 Page
5:48
60. "Happy Path" vs. "Sad Path" (new)
2:32
61. Quick update to our fetching code
2:57
62. Coding the Sad Path - Loading state (new)
3:22
63. Coding the Sad Path - Error handling
5:59
64. Update: Accessibility Addition
1:29
65. Initial Login Form
1:50
66. Note from the future: importing image assets in Vite
2:47
67. Protected Routes Intro (FDCP)
1:48
68. Protected Routes - AuthRequired Layout Route (FDCP)
3:10
69. Protected Routes - Implementing "auth" (FDCP)
2:25
70. Protected Routes - Navigate (FDCP)
5:34
71. VanLife Protected Routes (FDCP)
3:25
72. Protected Routes Quiz
1:39
73. Navigation State (FDCP)
5:22
74. Setup for authentication - happy path (FDCP)
3:31
75. Authentication setup - sad path (FDCP)
7:28
76. Navigate to /host route after login (FDCP)
2:14
77. History Stack and Replace (FDCP)
5:30
78. Challenge - send user to original page
7:33
79. Placeholders are gone! πŸŽ‰
2:10
80. Cloud Firestore Setup πŸ”₯
6:04
81. Cloud Firestore Code Setup
4:03
82. Collection ref and getVans() function
6:50
83. Create getVan function
3:53
84. Refactor getHostVans function
3:22
85. Final loose ends
1:34
86. Outro
3:09

You'll learn

React Children

Props spreading

Compound components

React.Children

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!

You'll build

screenshot
Component Library

A cool component library to make your coding projects shine.

screenshot
VanLife

An awesome app for renting decked-out travel vans for your next road trip adventure! 🚐

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML, CSS, JavaScript, and React. You should be familiar with JavaScript data types, functions, and classes, and some ES6. As for React, you should also be comfortable with JSX, event handlers, and how to use state and props in your components.

Meet your teacher

The course creator

Bob Ziroll

Head of Education at Scrimba. Passionate about learning πŸ“š, helping others achieve their career goals πŸ‘©β€πŸ’», tennis 🎾, woodworking πŸͺ‘, and my family πŸ‘¨β€πŸ‘©β€πŸ‘¦β€πŸ‘¦.

Follow me on twitter

Why this course rocks

This Advanced React course is designed to "level up" your React skills. You've already learned the basics from the introductory course, and now it's time to dive deeper by learning some of the most common patterns used in React, understanding how React works internally, and building more complex apps with multiple views using React Router.

The skills you'll learn from this course will give you a deeper understanding of React than most of the other React content being taught online or in coding bootcamps. If you're looking for a job as a front-end web developer, you're in the right place!

How do we determine the level of hireability?

The course instructor, Bob Ziroll, has helped thousands of students jump-start their careers as front-end developers. He spent 7 years teaching at a top-tier bootcamp in the US and has been creating React (and other) content for Scrimba since then.

Why React?

React is by far the most in-demand front-end library in the world right now. Not only are there more jobs in React, but learning React also has a tendency to make students better overall JavaScript developers. React relies on core JavaScript skills instead of handling view logic in a "magic" way like some other libraries or frameworks do.

This course is also a part of our hugely popular Front-End Developer Career Path, which aims to teach you everything you need to know to land a role as a Junior Frontend Developer. Why not check that out, too?

F to the A oracle to the Q
What are the prerequisites?

You should be comfortable with HTML, CSS, and JavaScript. You should also know basic React, like components, props, state & JSX. If you've taken Bob's intro React course here on Scrimba, you're good to go.

Do I have to pay with credit card?

We also support PayPal. Click the buy button and you'll get the opportunity to choose between credit card (via Stripe) or PayPal.

Will I get a receipt?

Yes, you'll get a receipt with the name of the product sent via email. It might take a few minutes before you get it, so please be patient.

Help! I purchased the course, but the course is still locked.

First, try refreshing the page. If that doesn't work, make sure you're logged in with the same account you bought the course with (we support both GitHub and email authentication). If that doesn't solve it, send an email to help@scrimba.com and we'll fix it asap.

I have another question!

Sure! Just shoot us an email at help@scrimba.com