react.gg

The interactive way to master modern React

by ui.dev
The course is now open! Join Now
Course Section 01: The Big PictureChapters: Why?, Thinking in React, Imperative vs. Declarative, Pure Functions

What you’ll learn

Optimized for aha!

We’re obsessed with helping you reach your aha! moments.

Our text sections help you master the “why” behind React concepts and include fun, interactive visuals you can play with.

Give it a try.

Interactive diagram that toggles between a traditional approach of separation of concerns (HTML, CSS, and JS) and the React approach (all three combined in a component)COMPONENTSHTMLCSSJS
interactive
Course Section 02: Describing UIChapters: Components, JSX, Elements vs. Components, Props

Leetcode for React

Have you ever wished you could “grind Leetcode” for a bunch of React practice problems?

No? Oh, well we built it anyway. You’ll know you’ve mastered React if you can get through all 60.

Test yourself (it’s an easy one) 👉

challenge
Course Section 03: Bringing React to LifeChapters: Handling Events, Preserving Values with useState, Using useState, When React Renders

Videos you’ll actually enjoy

These aren’t lazy screencasts filmed in someone’s guest bedroom.

We spent an uncomfortable amount of time making sure each video is worth your attention.

Here’s a sneak preview.

video
Course Sections 04 and 05: Escaping React and Optimizing ReactChapters: Reality Check, Managing Effects, Preserving Values with useRef, Teleportation vs. Context, Complex State with useReducer, Referential Equality, Optimizing Renders with useMemo and useCallback, Advanced Effects with useLayoutEffect and useSyncExternalStore, Abstracting Reactive Values with useEffectEvent
useDebounceusePrevioususeLocalStorageuseMediaQueryuseIntersectionObserveruseWindowSize

50 custom hooks

We built useHooks — a popular OSS library of 50 reusable custom React hooks.

You’ll solidify your skills by rebuilding it. Yes, all 50.

Course Sections 06 and 07: Custom Hooks and Rebuilding useHooksA selection of custom hooks including: useScript, useEventListener, useBattery, useFetch, useIdle, useThrottle, useMouse, and more useToggleuseClickAway

Prepping for interviews?

Want to know the secret to feeling confident in a React interview?

Know more about React than the person interviewing you. This course, along with its 50+ interview question deep dives will get you there.

  • Quiz yourself

    In which of the following scenarios would you reach for useEffectEvent?
  • Quiz yourself

    The purpose of useSyncExternalStore is to _.
  • Quiz yourself

    True or false: React guarantees the code inside useLayoutEffect and any state updates scheduled inside it will be processed before the browser repaints the screen?
quiz
Course Section 08 and 09: Interview Questions and Server ComponentsChapters: Suspense, Rethinking React, Why Server Components?, React the Architecture, Leveraging RSC

Future proof React

React has evolved a lot in the last few years, and it shows no signs of slowing down.

We’ll walk you through all the latest features like server components, suspense, and concurrent rendering, while keeping you updated as new stuff comes out.

  • Suspense
  • Server Components
Course Section 10: BonusChapters: Compound Components, How Hooks Work, Why React Sucks, Why Next.js?, and more

Ready to master React?

This is the course we wish existed when we were learning React, and we’re excited for you to experience it.

Expansion Pack

$495/yr

Level Up All Year
  • 32 lessons
  • Over 700 minutes of video
  • 30 quizzes and 100 challenges
  • 50 Interview Questions
  • Server Components
  • Access to our full course library

Sections included:

  1. The Big Picture
  2. Describing UI
  3. Bringing React to Life
  4. Escaping React
  5. Optimizing React
  6. Custom Hooks
  7. Rebuilding useHooks
  8. Interview Questions
  9. Server Components
  10. Bonus

PLUS access to all our courses:

  • JS Advanced JavaScript
  • JS Modern JavaScript
  • JS React Router
  • JS Classic React
  • JS Query.gg
  • JS Typescript
  • JS React w/ Typescript

Expand your knowledge of the JavaScript ecosystem with a yearly subscription to ui.dev.

Full Course

$375

Get the Full Course
  • 32 lessons
  • Over 700 minutes of video
  • 30 quizzes and 100 challenges
  • 50 Interview Questions
  • Server Components
  • Lifetime access to course

Sections included:

  1. The Big Picture
  2. Describing UI
  3. Bringing React to Life
  4. Escaping React
  5. Optimizing React
  6. Custom Hooks
  7. Rebuilding useHooks
  8. Interview Questions
  9. Server Components
  10. Bonus

Deepen your React knowledge with interview prep, additional challenges and more advanced content.

Starter Pack

$245

Get the Starter Pack
  • 22 lessons
  • Over 200 minutes of video
  • 20 quizzes and 48 challenges
  • Lifetime access to course

Sections included:

  1. The Big Picture
  2. Describing UI
  3. Bringing React to Life
  4. Escaping React
  5. Optimizing React
  6. Custom Hooks
  7. Rebuilding useHooks
  8. Interview Questions
  9. Server Components
  10. Bonus

Build a foundational understanding of React.

Customized Team Training

We’ve spent the last decade training developers at the world’s most respected technology companies. We’ll work with you to create a custom plan that helps your team ship better software, faster.

Schedule a Call

What we offer...

  • Custom Learning Paths
  • Monthly Checkins
  • Progress Reports
  • Analytics
  • Certifications
  • Invoicing
  • Live Workshops
  • Access to Full Course Library

Our other courses:

  • JS Advanced JavaScript
  • JS Modern JavaScript
  • JS React Router
  • JS Classic React
  • JS Query.gg
  • JS Typescript
  • JS React w/ Typescript

Full Course

$356$375

Enjoy your 5% off bulk discount
(Add 5 more licenses to get 10% off)
Get the Full Course
  • 32 lessons
  • Over 700 minutes of video
  • 30 quizzes and 150 challenges
  • 50 Interview Questions
  • Server Components
  • Lifetime access to course

Sections included:

  1. The Big Picture
  2. Describing UI
  3. Bringing React to Life
  4. Escaping React
  5. Optimizing React
  6. Custom Hooks
  7. Rebuilding useHooks
  8. Interview Questions
  9. Server Components
  10. Bonus

Tanner Linsley

“react.gg is incredible. The way in which the team has been able to deconstruct even the most complex aspects of React into a fun, easily consumable package is inspiring. By far the best way to learn React.”

Tanner Linsley

Creator of React Query

Expansion Pack

$470/yr$495

Enjoy your 5% off bulk discount
(Add 5 more licenses to get 10% off)
Level Up All Year
  • 32 lessons
  • Over 700 minutes of video
  • 30 quizzes and 100 challenges
  • 50 Interview Questions
  • Server Components
  • Access to our full course library

Sections included:

  1. The Big Picture
  2. Describing UI
  3. Bringing React to Life
  4. Escaping React
  5. Optimizing React
  6. Custom Hooks
  7. Rebuilding useHooks
  8. Interview Questions
  9. Server Components
  10. Bonus

PLUS access to all our courses:

  • JS Advanced JavaScript
  • JS Modern JavaScript
  • JS React Router
  • JS Classic React
  • JS Query.gg
  • JS Typescript
  • JS React w/ Typescript

Reviews

Still not sure? Here’s what people have been saying about the course.

Read more reviews

Frequently Asked Questions

Is there a way to preview the course content before purchasing?

Yes. You can get a feel for what the course will be like as well as take a few of the lessons, quizzes, and challenges from the course dashboard.

Also, you can play around with React, Visualized, a collection of interactive visuals taken from the course. Or dive into useHooks, a library of modern, server-safe React hooks which you’ll rebuild throughout the course.

Are there any pre-requisites for this course?

Yes. You need a solid understanding of HTML, CSS, and JavaScript. If you don’t know what a callback is, react.gg might not be a great fit for your current skillset. However, you’re welcome to try.

Am I too senior for this course?

Probably not. If you can confidentally rebuild all 50 hooks from the useHooks library with the latest React APIs like useSyncExternalStore and useEffectEvent – then yes, you’re probably too senior.

Does this course have captions?

Yes.

Do you get a completion certificate?

Yes.

Does the course use TypeScript?

It doesn’t. We want the course to be as accessible as possible, so we chose to keep the number of pre-requisite technologies to a minimum. Regardless of whether you know TypeScript or not, you’ll still get a lot out of the course.

Can I get an invoice?

Yes. After purchase, you’ll have the ability to fully customize and download your invoice with all the information you and your employer need.

What do I do if I get stuck?

Each lesson has a public discussion thread embedded in the lesson where you can ask questions and get help. Course instructors are also notified and can help you out.

What discounts are available? Do you offer PPP?

Yes we offer PPP. If you use a PPP discount, you’ll only be able to access the course in the country where you purchased it.

How can I get this for my team?

You can change the number of course licenses you’d like to purchase on the checkout page. After completing your purchase, you can easily distribute your licenses to your team members.

Will I automatically get access to the rest of the course once it’s available?

Yes. We’ll notify you once that happens.

Does the “Expansion Pack” include lifetime access to react.gg?

It doesn’t. Think of the “Expansion Pack” as a subscription to ui.dev. You’ll get access to all of the content for as long as your subscription is active (like Netflix).

ui.dev is Tyler, Alex, Ben, & Lynn