Login

The Joy of React

The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React.

A very handsome fella with swoopy hair
Taught by Josh W Comeau
Friendly blob character, styled to look like the React logo

So, let’s be real. Learning React is hard.

Over the past few years, React has become a “must-have” skill for front-end developers. Just about every job posting lists it as a pre-requisite!

If you’ve tried to learn React, though, you know it can be confusing and overwhelming. There’s just so much to know, and most of the tutorials out there assume a ton of prior knowledge and context.

Maybe you’ve gotten stuck in tutorial hell, following tutorial after tutorial without ever making tangible progress, like a mouse on a running wheel. You’ve built so many dang “Todo list” apps now, and yet when you try to build your own project, you don’t know where to start.

You want to learn React, but you’ve struggled. 😬

I want to help.

Over the past year, I’ve been hard at work building the ultimate React course for beginners.

The Joy of React is an interactive course. You won’t just sit and watch me code. There are tons of exercises, real-world-inspired projects, and fun mini-games and activities. It’s not like any other course you’ve taken before (unless you’ve taken my CSS course, in which case, it’s quite a bit like that).

We learn React from the ground up, building a robust mental model we can use to understand React and solve hard problems. I’ll share the dozens of epiphanies I’ve had after more than 8 years of React experience.

We won’t just learn about React, either; we cover everything you need to know to succeed as a React developer, including modern JavaScript syntax, along with a ton of helpful community tools and packages.

The truth is, React is a joy to use.

Once you get the hang of it, React is a dream. I’ve tried most popular JS frameworks, and nothing else makes me feel as empowered as React.

I care a lot about the user experience, including things like performance, accessibility, polish. Getting this stuff right is not easy. But the React community has stepped up, and there are so many wonderful solutions we can leverage.

We first need to build a rock-solid foundation, to truly understand React conventions and best practices. Then, we’ll see how “secret weapon” community packages extend our reach.

This is a recipe for uninterrupted flow state. It’s pure joy, and I want you to experience it.

Let me tell you how The Joy of React will make it so.

The Joy of React feels like playing a video game. You have text, videos, coding challenges, mini-games, well timed jokes and a boss at the end of each section. You never get bored!

It does an exceptional job at explaining all deep decisions and trade-offs we've made when creating React in a way a beginner can understand.

Christopher “vjeux” ChedeauFront-end Engineer at Meta. Co-created React Native, Prettier

As someone who has experience using and teaching React, I can't emphasize enough: This is the knowledge you need to know React at a deep level.

Josh covers the fundamentals in this course in a way that is incredibly intuitive, and yet not overwhelming. It's so important to know why you are building applications in certain ways, not just how, and this course covers both.

Even if you've built with React before, this course will fill in gaps in your understanding. Bring out your notebooks and get ready to fill your brain!

CassidyCTO at Contenda. Formerly Netlify, React Training

TheCurriculum

Module 1 React Fundamentals

In this first module, we introduce React, and build a common understanding we'll use throughout the course.

We'll learn all about JSX, components, and props. We'll discover how to do iteration and conditional rendering in React. We'll also cover styling in React.

As someone who has taught React to hundreds of students in-person, I know what all of the common early stumbling blocks are, and we address them head-on in this module.

We go surprisingly deep in this module. By the end of Module 1, you'll understand how JSX differs from a templating language, what a React element is, why keys are necessary… you'll even build your own stateless mini-React from scratch, so you know exactly how it works under-the-hood!

Module 2 Working With State

The real magic starts with state. React state allows us to make dynamic applications that feel alive.

In this module, we learn how to use event handlers and React state to update the UI based on user actions. We'll learn how to wire up forms, how to work with complex state structures, and how to manage state across the application.

We'll also deepen our understanding of how React works. We'll learn why React sometimes feels so much more complicated than other frameworks. We'll discover the crucial role that React component instances play. And we'll learn how to leverage best practices like lifting state up.

There's lots of fun exercises in this module. We build a couple of mini-games, and see how to build a minimal version of my Gradient Generator project.

Module 3 React Hooks

In 2019, React was revolutionized with the addition of hooks. Hooks allow us to “hook into” React internals.

In this module, we really start to find our groove. Here are some of the things we cover in this module:

  • Managing side effects with the useEffect hook.
  • Capturing and persisting DOM references with the useRef hook.
  • Fetching data from the network with Fetch + the useSWR library.
  • Optimizing the performance of our applications with useMemo and useCallback.
  • Creating our own abstractions with custom hooks.

Stuff gets real in this module. We cover some of the hardest concepts in React, like avoiding stale values in our side effects. To help us make sense of the hard stuff, we double down on our efforts to understand how React ticks, learning why immutability is so important, what exactly a “render” is, and more.

Module 4 Component API Design

Alright, so we've covered most of the React API by this point… How do we assemble all of this knowledge to ensure we're building scalable, well-architected applications?

Since I started working with React in 2015, my thinking has evolved quite a bit in terms of how to structure things. I've learned so much along the way. My goal with this module is to let you skip a few years of experimentation, and jump straight to the patterns that work best.

I'll share the high-level mental models I use every day, like understanding the “spectrum of components”, or thinking in terms of producers and consumers.

At a more granular level, we'll learn a bunch of new tricks to help us build wonderful components. Polymorphism, context, ref-forwarding, prop delegation, and slots are all tools I use in my work to write the best components possible.

We'll also touch on important usability and accessibility principles. You'll get to build your own UI primitives from scratch (and see why it's probably a better idea to use a library).

Module 5 + 6 And so much more to come!And more to come!

The course today includes the first 4 modules we've seen, along with 2 real-world-inspired projects and some bonus reference modules.

There will be six modules in total, though. I'll be developing 2 more modules over the coming months.

What will they cover? Well, that's partially up to you! I have some ideas about what I'd like to cover, but I might tweak those plans based on your feedback. For example, if there's lots of confusion around a specific concept, I'll create more content to address that confusion!

Here's the current “rough draft” plan:

  • “Secret weapon” packages — how I use tools like Immer or Framer Motion to solve problems and build cool things.
  • Server-side rendering — understanding how rehydration works, writing SSR-safe code.
  • Routing — we'll likely use Next.js to explore how routing works in React.
  • “Advanced problems”, digging deeper into tricky concepts like race conditions, using refs to manage stale values, etc.
  • Debugging tips and tricks
  • Suspense and lazy loading

As I do throughout this course, we'll continue to focus on building our intuition of how React works, and how we can use it to build cool things. I'll continue to share the “happy practices” I've learned in my career as a React developer.

There's so much good stuff I'm excited to include here!

Level up the whole team ✨

Train multiple devs at your organization with Team Licenses. You'll get the same 50% launch discount, plus you'll be able to manage your team through our Team Administrator dashboard.

Learn More

This course is an absolute masterpiece! Josh keeps things exciting by switching between illustrated explanations, friendly videos, and targeted exercises. You'll build a mental model you can use throughout your journey.

What a wonderful way to learn React!

Amelia WattenbergerStaff Research Engineer at GitHub

I've known Josh for years, and he's built some incredible things with React. This course does a fantastic job explaining how React works and how to get the most out of it. If there's someone who can make you feel comfortable with React, it's Josh!

Ives van HoorneCreator of CodeSandbox

Let's hear from theTest Squad

This course has been developed with the help of ~70 developers in the “Test Squad”. These devs have gone through the content and provided feedback, helping me find my blind spots and ensure that the course is a smooth and fun learning experience.

This has been a varied group, from folks who have never tried to work with React, to folks who have used it for years.

Here's what they had to say about The Joy of React:

I can confidently say that The Joy of React is one of the most polished courses I've had the pleasure of going through. With the mix of text, screencasts, interactive exercises, games and practice projects, I feel like everything is finally starting to click for me!

Josh doesn't gloss over stuff like most tutorials, but instead makes sure you understand how React works on a fundamental level.

Mackenzie ChildDesigner at Webflow

What I really like about Josh's way of teaching is that he takes the time to explain concepts from the ground up. The exercises are fun and quirky, which makes it joyful to complete the course. I also love the accessibility perspective, a subject I feel needs a lot more focus among developers.

After finishing both of Josh's courses, I use them as a library for knowledge in my day to day work, and I look up something at least once a week.

Sara BlomFrontend developer

Before The Joy of React, my experience with react apps was incredibly painful and confusing. After going through this course, everything makes so much more sense. I can't imagine a better way to learn react and modern JS foundations.

Adam WaxmanProduct & Design at SeatGeek

The Joy of React course is comprehensive, well-thought out, and delightful to work through. ✨

This is not only for beginners! If you've used React for a while but are not sure how things work under the hood (like me), you will learn A LOT 🤩

Yuka MasudaFrontend engineer at StackBlitz

Before taking this course, I knew how to build apps with React, but not why any of it functioned. Based on Josh's previous work, I was confident that The Joy of React would help me understand the bigger picture. My expectations were met — hands-down!

Josh has a knack for distilling complex ideas into polished and crystal clear explanations. If you enjoy carefully crafted content and want to finally wrap your head around React, you're in for a treat.

Mikaël SévignyFront-end developer from Gatineau

This course is so much fun. Josh's ability to break down concepts in a structured and simple way using analogies, diagrams, mini-games, and exercises is second to none. My understanding of React has significantly improved after completing this course, and I know I'll be coming back to it for reference for many years to come.

Stephen WalterFullstack Developer & Educator

I started this course with zero knowledge of React. I now feel not only like I know what I'm doing with React, but also why I'm doing it. Josh has the wonderful skill, so rarely found in experts, of being able to clearly explain complicated things to someone totally new to a subject in a fun and engaging way. If you are new to React, I can whole-heartedly recommend this course.

Dave HensonAssistant Front End Developer

I am extremely satisfied with the knowledge I have gained. The course has covered all the necessary topics and the explanations have been excellent. Taking this course has been the best decision I made and I would highly recommend it to others.

Hari Sharan Bhuju

This course truly lives up to its name. I've used React for awhile now, but this is the first resource that has helped me build a proper intuition for what's going on under the hood with React.

The fantastic interactive resources you see on Josh's blog posts are here in abundance. I love the way different types of learning resources are used in the course. From Interactive code playgrounds, well-written explanation and video resources, there's something for everyone, regardless of the way you learn.

Mo JamaFrontend Developer from London, UK

Even though I have several years of experience in React, I could still deepen my understanding of modern web development. Josh precisely collected all the crux and pitfalls that an ordinary dev can experience. Give it a try, you won't regret it.

Károly TörökFull-stack Software developer

The Joy of React helped me land a job at Qualcomm Inc. The interviewer was impressed by my React knowledge, especially custom hooks, and my portfolio projects, built with React after I did the course

Prakhar KumarInterim Software Engineer Intern at Qualcomm

This is the most thought-through and fun learning experience I ever encountered. Projects, playgrounds, interactive diagrams — it has it all. The Joy of React stands by its name.

Pavel FomchenkovUX Engineer from Germany

After (re)discovering CSS and learning a new mental model, I was really eager to discover Josh's new course about React. Even though I was already confident with my skills, it transformed my vision of how React works on the inside.

I cannot recommend enough following Josh's teaching, and Joy of React is no exception!

Axel VAINDALIndiehacker & Founder at bepo

Josh's React course imparts both his love of coding and user experience. Every minute detail is handcrafted, including the (React-based!) course platform, pro-quality videos, and well-targeted exercises and projects. This is how online courses should be built!

Dan Wilhelm

What I love about Josh’s courses is that I know I’m going to walk away having really learned something. His courses aren’t simply a collection of videos—they're interspersed with written content, interactive examples, illustrations, exercises, and workshops that really challenge you. All with a touch of magic ✨

Ryan LeichtyDesigner and Developer

Josh’s courses are the best. Most courses just teach you how to do stuff, but Josh teaches you why things work the way they do, and more importantly, how to bring the pieces together to build an excellent application.

His knowledge depth and experience shine through this course. I highly recommend it. Even if you have experience building react applications, you might learn a thing or two.

NathanaelFrontend-developer, Ghana

I considered myself an advanced developer when it comes to Javascript and React. Well, this course proved me wrong. It actually helped me to get things clear, things that I already "knew"!

This is a constant on every module, and I can assure you that it is also one of the main qualities of Josh's teaching: he provides clarity even for things or concepts that you thought you already understood.

Having done his first CSS course I had high expectations for this course as well. It's exceeded them by far. I suggest it not only for newbies but for literally everyone!

Santiago GrecoFull Stack Developer from Italy

The devilishly-handsome author of this course, sitting and smiling.

Hi, I'm Josh!

In early 2015, my employer tasked me with investigating this newfangled “React” framework, to see if it was something we should consider using.

I remember thinking: “This is friggin’ cool, but I have no idea how this works.” 😅

Over the past 8 years, I've been building my understanding of React, one puzzle piece at a time. I've had so many epiphanies about how it works, how to use it effectively, and how to avoid all of the pits that developers tend to stumble into.

Here are some credentials:

  • I've been working as a software engineer since 2014, at organizations like Khan Academy, DigitalOcean, and Unsplash. I've worked in lots of production React codebases — Khan Academy is one of the oldest and largest React apps outside of Facebook!
  • I'm the creator of a popular React animation library, react-flip-move. The package is downloaded ~450,000 times a month from NPM. It was originally released in 2016.
  • I've spoken at several JavaScript/React conferences. Check out my 2018 React Europe talk, or my 2019 React Rally talk
  • I've built tons of complex React projects on the side, including a 3D map editor for Beat Saber, a GUI task manager for React applications, and the course platform we use in The Joy of React!
  • I teach front-end development skills to over a million developers per year on my blog, joshwcomeau.com.
  • For years, I taught React at Concordia University, in partnership with Journey Education. In 2019, I led development on their React curriculum, which (I believe) is still being used to this day!

React has been a big part of my professional life, and I'm so friggin’ excited to help you build confidence with React. Whether you're just starting out with React, or you've been using it for a while but you still don't quite get it, I'm here to help.

Josh W. Comeau
Instructor, The Joy of React

Frequently Asked Questions

What's the deal with “Early Access”?

“Early Access” means that you're essentially pre-ordering this course, but you don't have to wait for the course to be completed; you can start learning today!

For folks who purchase in Early Access, you'll have access to 2/3rds of the content immediately, and I'll be publishing new content in the coming months. You'll receive an email when new content is released!

Your feedback will also help shape the rest of the course! I have a pretty good idea about what I want to cover, but I'm open to potentially tweaking the plan, based on your suggestions.

Please note: you won't be able to purchase the course after the launch ends. You'll have to wait until the full release, later this year, and pay the full retail price.

Is this course right for me?

I built this course primarily for developers who have struggled to truly understand React.

Here's who I think this course is most suited for:

  • Bootcamp grads who rushed through React in their program, but who don't really feel confident in their understanding.
  • Self-taught developers who have gotten frustrated trying to learn React on their own.
  • Angular/Vue developers who just can't get the hang of React.
  • Front-end developers who have been using React for a while, but still don't really feel like they "get it" / aren't sure if they're doing it right.

It's a beginner-friendly course. No prior React knowledge is assumed. Several students in the Test Squad had zero React experience, and my course helped them learn enough to be productive with React.

That said, I do assume that you're comfortable with the basics of HTML, CSS, and JS. You don't need to be an expert, or be up-to-date on all the latest JavaScript developments, but you should be comfortable with variables, functions, conditional logic, etc.

This course goes much deeper than most beginner resources. I don't want you to think that it's a shallow introduction to React. Several developers in the Test Squad have been working with React for years and thought they understood it pretty well, but came away from the course with more clarity and confidence. Getting comfortable with modern hooks-based React is no small task, and it's the bedrock for everything else.

Ultimately, The Joy of React is all about building core skills with React. We won't branch out into things like user authentication, working with a CMS, testing, Redux, etc. Instead, I want to focus on building a rock-solid foundation that can support all of these and more, as you continue your journey with React beyond this course.

How much JavaScript experience do I need?

Let's say you're comfortable with HTML/CSS, but you don't have much JavaScript experience… Is the course right for you?

Unfortunately, the course does assume that you're somewhat comfortable with JavaScript. You don't need to be an expert, but you should be familiar with functions, working with objects/arrays, if/else statements, loops, callbacks, etc.

Here's the sort of challenge I expect you to be able to solve before starting The Joy of React:

Write a function that takes an array of numbers and returns the largest number.

If you're not at that level yet, there are plenty of free resources you can use to develop these foundational skills. I suggest googling "introductory JavaScript tutorial", and trying a few different instructors. When you find one you like, follow along until you can solve programming problems like the one I mentioned!

I should also say: my course has some supplementary materials that fill in some JavaScript gaps, and cover modern ES2015+ language features. So it's fine if you feel like your JS skills are outdated!

How is this course different from other React courses?

I'd say this course is different in two main ways: the platform and the philosophy.

The Joy of React is distributed exclusively through my custom-built course platform. This platform puts heavy emphasis on interaction and experimentation.

For example: early in the course, we look at how JSX is different from HTML. Instead of making you memorize a bunch of boring rules, we build our intuition with a “spot the differences” style game:

This is not a passive course where you sit and watch me code. This is an active learning experience, and there's nothing else out there quite like it!

In terms of philosophy, the main goal with The Joy of React is to help you understand how React works.

Most online courses out there are focused on the "what". They show you step-by-step what code to write in order to build a given UI or application. You memorize a bunch of stuff without really understanding why.

I want to help you build an intuition for React. When you understand how something works, you don't need to rely on tutorials to show you step-by-step. I want to empower you with the critical core knowledge you need to build your own projects in React.

Does this course use React classes? Hooks? Or both?

In this course, we focus exclusively on hooks. Aside from one lesson where we see how React has evolved over the years, we don't work with class components at all.

The Joy of React uses React 18, and while class components aren't deprecated, they're certainly more of an outdated approach. I want to make sure we're focusing on the latest stuff, so that your newfound skills stay fresh as long as possible!

I already feel pretty comfortable with React! Will I still learn a lot in this course?

I think so!

As I've been building this course, I've been testing the material with a diverse group of developers. Many of the testers in this group self-described their React skills as "intermediate" or "advanced".

When I followed up with them, they all said they still got quite a lot out of this course. And this will be even more true when the full course is released, with the final 2 modules covering even more advanced topics!

Here are some of the more advanced things we cover in this course:

  • A complete mental model of React's rendering system, including how components, elements, and component instances all work together.
  • How state can become stale when working with effects and other async code, and how to solve for it.
  • Optimizing our applications using React.memo and theuseMemo/useCallback hooks.
  • React's render + commit cycle, reconciliation, and rehydration.
  • How to build robust, accessible components for tricky UI elements like modals or toast notifications.

If you still get tripped up by things like useEffect dependency array, I think this course will still help quite a bit. On the other hand, if you're a React expert who has already figured out all the gotchas with hooks, you won't get as much from this course.

Does this course use TypeScript?

Nope, it uses plain JavaScript. This is by design.

TypeScript is a wonderful tool, and I use it myself in my course platform, but the learning curve is stiff. I've been using TS for years, and I still don't feel super confident with it!

Personally, I believe it makes more sense to learn React and TypeScript individually. If you try to learn both at the same time, you're more likely to get frustrated, discouraged, and demotivated. The hill is much steeper.

My recommendation is to spend some time focusing on React. Once you're comfortable, you can enhance that knowledge with TypeScript.

Do you support Purchasing Power Parity (PPP)?

Yes! If you reside in a country with significantly lower purchasing power (eg. India, Brazil, Pakistan, Ethiopia), you'll be given the option to purchase a “regional license” at a lower price.

Regional licenses include all of the same content (including bonuses), but cannot be accessed outside your country of residence.

Only the full course (the “Ultimate” package) can be purchased with a regional license.

Can I purchase multiple licenses, for my team or group?

Absolutely! You can purchase multiple licenses through the Team Checkout page. You can purchase as many licenses as you'd like, all at the deeply-discounted Early Access price.

You'll also gain access to the Teams Administration dashboard, to make it easy to distribute your licenses, and purchase additional licenses.

Will there be a student discount?

Sorta. 😅

As a general rule, my courses all come with a 20% student discount. If you're enrolled in any sort of educational institution (college, trade schools, bootcamps, high school, etc), you can receive a 20% discount.

But! This discount can't be combined with sales, and The Joy of React is currently 50% off for the Early Access launch.

So, if you want the cheapest possible price, your best bet is to buy it during this launch week (until January 31st). It will be cheaper than applying the student discount to the full course price.

Is this a subscription? Does the license expire?

Nope! It's a one-time purchase. When you buy The Joy of React, you'll have access to the course for the lifetime of my course platform. Not only that, but you'll get all updates and improvements for free!

You're welcome to purchase the course now, while it's deeply discounted, even if you only intend on going through the materials later.

Are there assignments and projects? Or is this mostly a video course?

I believe that in order to learn something, you need to get your hands dirty. This course offers lots of opportunities to practice the concepts we learn!

Throughout each module, you'll find exercises, activities, thought experiments, and interactive demos. There are also several real-world-inspired projects where we apply what we've learned in a broader, more realistic context.

That said, there are over 100 bite-sized videos in the course as well. The general format is that each lesson will mix written and video content to explain the concept, and then there are opportunities for practice and experimentation, leading up to the projects between modules.

What if I don't like the course? Is there a refund policy?

If you're not happy with the course, for any reason, you can reach out by email in the first 30 days and I'll refund your purchase, unconditionally.

Is there a Slack or Discord group?

Yes! We're using Discord for our online community. The community already has thousands of members, thanks to my CSS course. If history repeats itself, our Discord server will be a vibrant place for React-related discussion.

The community is moderated according to our Code of Conduct.

What if I get stuck? Can I ask questions?

Absolutely!

This course uses Discord as our community platform. There is a channel specifically for getting help with the content in this course, and you can also ask general React / web development questions!

I've been spending a lot of time answering your questions on Discord, but I've been thrilled to see that the community has been really active as well.

Do you offer a certificate of completion?

Yep! Anyone who completes the full course will be able to save a .pdf with their name on it, showing that they've completed The Joy of React. These certificates can also be verified, as each one has a unique URL!

This can be useful to prove completion for your employer, to add to your LinkedIn profile, to share on Twitter, or to just feel great about your accomplishment!

Even though the course content is not yet complete, you can still earn a certificate by completing all of the content in the "Early Access" release.

What about a receipt, so I can be reimbursed?

Right after purchasing, you'll be emailed a receipt/invoice from Paddle, our merchant. You'll be able to add whatever name and address is necessary to facilitate a reimbursement.

How long will it take to complete the course?

It's hard to say! There is a lot of content, but it's structured in such a way that it's easy to skip stuff that you already know.

My best guess is that the full course will take about 40 hours to complete, though there's probably a very wide distribution.

I have a question not listed here!

I can be reached at support@joshwcomeau.com! Feel free to send any questions you have.

Josh knocked it out of the park. Again. The material is well-organized, easy to follow and offers something for all types of learners.

There are a ton of courses on React but very few of this caliber and level of detail. If you're looking to build a strong foundation or go deeper with your skills, I can't recommend The Joy of React enough.

Chance the DevSoftware Developer at Shopify, Remix maintainer

I love this course so much! It’s interactive, fun, and lives up to its name while cutting through some of the most important React (and JS) concepts. I can’t wait to share this with folks I know who are learning React!

Una KravetsWeb Developer Advocate at Google

Josh has put together an amazing course that strikes an impressive combination of clear guides, videos, interactive code, and smart illustrations. All together it creates a one-stop-shop for learning all about how to write modern React code and JavaScript. Highly recommended!

John ResigCreator of jQuery. Chief Software Architect at Khan Academy