Advanced React

Enroll for free Get started!

Join 17021 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

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 170 interactive scrims spread across 3 modules.

Reusability

66 lessons4 hours 53 min

1. Advanced React Intro

2. Button - props review challenge

3. Aside - children in HTML

4. Aside - React Children

5. Challenge - Button w/ Children

6. Button - More Complex React Children

7. Challenge - add onClick event listener

8. Aside - props spreading

9. Aside - Destructuring props

10. Button - size prop

11. Button - fix className issue

12. Challenge - Button w/ Variants

13. Mega Challenge - Overloaded Avatar Component

14. Menu Component Intro

15. Prop Drilling

16. Aside: Compound Components Intro

17. Compound Components in React - Part 1

18. Compound Components Quiz

19. Compound Components in React - Part 2

20. Compound Components in React - Part 3

21. Summarize Challenge - Compound Components in React

22. Prop Drilling Problem #2 - Implicit State

23. The React.Children API

24. React.Children shortcomings

25. Context Intro

26. createContext() & Context Provider

27. useContext()

28. Add context to the Menu component

29. State + Context

30. Theme switcher final touches

31. Menu component final touches

32. Aside - Compound components w/ dot syntax

33. Headless Toggle component

34. Toggle - setup

35. Toggle - Planning

36. Toggle Context

37. Toggle.Button

38. Toggle.On & Toggle.Off

39. Remove Star component

40. Use Toggle with Menu component

41. Composing new components with Toggle

42. onToggle event listener

43. Menu onClose event

44. Intro to Refs

45. Refs and DOM manipulation

46. Fix onToggle bug using refs

47. Fix missing onToggle bug using a noop function

48. Render Props Part 1

49. Render Props Part 2

50. Render Props Part 3

51. Render Props Part 4 - children as render props

52. Toggle.Display intro

53. Toggle.Display

54. Custom Hooks Intro

55. Custom Hooks - useEffectOnUpdate

56. Custom Hooks - useToggle

57. Custom Hooks - useToggle part 2

58. Custom Hooks - useToggle part 3

59. Custom Hooks - useToggle part 4

60. Custom Hooks - useToggle part 5

61. Custom Hooks - useToggle part 6

62. Custom Hooks - useToggle part 7

63. Custom Hooks - useToggle part 8

64. Custom Hooks - useToggle part 9

65. Reusability section recap

66. Solo Project - Component Library++

Routing

85 lessons6 hours 22 min

1. Introduction to React Router 6

2. Multi-page vs single-page apps

3. React Router Setup & BrowserRouter

5. BrowserRouter & Routes challenge

6. Route, path, & element

7. Quick Re-org

9. VanLife project bootstrapping

10. Initial Deploy to Netlify

11. Mirage JS Server

12. Challenge: Vans Page - Part 1

13. Challenge: Vans Page - Part 2

14. Route Params - part 1

15. Route Params - part 2

16. Route Params part 3.1 - useParams() & challenge

17. Route Params part 3.2 - useParams() challenge

18. Route Params Quiz

19. Nested Routes Intro

20. Fixing the Navbar with a Layout Route

21. Fixing the Navbar with a Layout Route part 2

22. Bootstrap the Host pages

23. Nesting the /host routes

24. Creating the Host Layout

25. Relative Paths

26. Index Routes

27. To nest or not to nest?

28. Nested Routes Quiz

31. Active Link Styling with NavLink

32. Active Link Styling with NavLink - part 2

33. Adding Host Vans Routes

34. 🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages

35. Building out the Host Van Detail page

36. Relative Links

37. Back to all vans

38. Add /host/vans/:id Nested Routes

39. Add the Final Navbar!

40. Outlet Context

41. Search Params Intro

42. useSearchParams

43. Challenge: Set up search params in VanLife

44. Filter the array w/ the search param

45. Challenge: Filter the vans in VanLife

46. Using Links to add search params

47. Challenge: Filter the vans with Links

48. Using the search params setter function

49. Challenge: Filter the vans with a setter function

50. Caveats to setting params

51. Merging search params with Links

52. Merging search params with the setSearchParams function

53. Challenge: Conditional rendering practice

54. Fix remaining absolute paths

55. Back to all vans

57. useLocation

58. Challenge: conditionally render the back button text

60. "Happy Path" vs. "Sad Path" (new)

61. Quick update to our fetching code

62. Coding the Sad Path - Loading state (new)

63. Coding the Sad Path - Error handling (new)

64. Initial Login Form

65. Note from the future: importing image assets in Vite

66. Protected Routes Intro (FDCP)

67. Protected Routes - AuthRequired Layout Route (FDCP)

68. Protected Routes - Implementing "auth" (FDCP)

69. Protected Routes - Navigate (FDCP)

70. VanLife Protected Routes (FDCP)

71. Protected Routes Quiz

72. Navigation State (FDCP)

73. Setup for authentication - happy path (FDCP)

74. Authentication setup - sad path (FDCP)

75. Navigate to /host route after login (FDCP)

76. History Stack and Replace (FDCP)

77. Challenge - send user to original page

78. Placeholders are gone! 🎉

79. Cloud Firestore Setup 🔥

80. Cloud Firestore Code Setup

81. Collection ref and getVans() function

82. Create getVan function

83. Refactor getHostVans function

84. Final loose ends

Performance

19 lessons1 hour 49 min

1. Performance Intro

2. Recursive rendering

3. Three phases of "rendering"

4. Rendering Phases Quiz

5. Using Dev Tools to Measure Performance

6. StrictMode - double renders components

7. StrictMode - rerunning side effects

8. Code Splitting, lazy, Suspense - Part 1

9. Code Splitting, lazy, Suspense - Part 2

11. useMemo() practice

12. React.memo() - reducing rerenders

13. React.memo() practice

14. Value vs. Reference Types & referential equality

15. useMemo(), React.memo(), and referential equality

16. useMemo() practice

17. useCallback()

18. useCallback() practice

19. Course Outro

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! 🚐

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