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.
For the past two years, I’ve been hard at work building the ultimate beginner-friendly React course.
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 almost a decade of professional React experience.
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 uninterruptedflow 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.
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 the React useState hook 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 are 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 go beyond the useState hook, and cover things like:
Managing side effects with the useEffect hook.
Capturing DOM references with the useRef hook.
Optimizing the performance of our applications with useMemo and useCallback.
Creating our own abstractions with custom hooks.
Fetching data from the network with Fetch + the useSWRthird-party hook.
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
At this point in the course, we've covered a good chunk of the React API, but we've been focusing on how everything works. In this module, our focus starts to shift.
The components we create should be a joy to use: they should be easy to understand, composable, and offer the right amount of flexibility. Even more critically, they should offer a wonderful user experience, in terms of accessibility, usability, and performance.
This module is all about refining our thinking around components. I'll teach you the mental models I use every day when deciding how I want to structure my code.
We'll cover a ton of practical tips and tricks in this module, from polymorphism to prop delegation to compound components and slots. You'll also learn about React Context, and see how it can be useful in achieving our goals.
Accessibility is a focus throughout the course, but we really lean into it in this module. We'll build notoriously-tricky components like modals from scratch, with a focus on usability and accessibility, and see why it's probably a better idea to use a library.
Module 5 Happy Practices
I started working with React in 2015, and I've learned so much along the way. My goal with this module is to help you skip a few years of experimentation, and jump straight to the patterns and practices that are a delight to use.
In the dev community, we talk a lot about “Best Practices”, but really, there's no such thing as a best practice. It depends what you're optimizing for! It's all trade-offs.
In this module, I'll share my favourite “Happy Practices”, the design patterns and habits I've been refining over 8 years, things that just make it enjoyable to work with React.
Here's a few examples of what we'll cover:
The Principle of Least Privilege, and why I give components as little knowledge/power as possible.
The distinction between parents and owners, and how we can simplify our code and improve performance in one fell swoop.
The magic of Immer, and how it makes complex state much less scary.
Really getting to understand things like React elements, refs, and keys, and how a deep understanding exposes entirely new patterns we can take advantage of.
Module 6 Full-Stack React
In this module, we go beyond the browser and explore how React works in a full-stack context, using Next.js.
Next.js is a meta-framework, built on top of React. It's been around since 2016, but was recently totally rebuilt from the ground up. In May 2023, Next brought its new “App” router out of beta, and ushered in the start of a new era in React.
In this module, we'll learn how to build performant full-stack applications using the latest version of Next.js. We cover all of the shiny new tech, including:
React Server Components
Streaming Server Side Rendering w/ Selective Hydration
Next.js App Router
We'll learn how these things work, but also how they fit together to deliver incredible next-level user experiences. This stuff is bleeding-edge, and this course is one of the first in-depth resources to really explore this new world.
This is the module where everything comes together. Using everything we learned over the first 5 modules of the course, we'll build dynamic full-stack React applications, from project initialization to deploy.
Real-world inspiredCapstone Projects
Everything you learn in the modules will be reinforced and solidified in 3 challenging projects, woven between the modules. You'll use your newfound skills to build:
Project 1Word Game
One of the best ways to learn React is by building games. In this first project, we build a clone of Wordle, a popular online word-guessing game.
The main focus of this project is to get comfortable with React state, but it also exposes us to some really interesting questions around application structure. You'll need to decide how you want state to move through the application, and consider different tradeoffs!
Project 2Toast Playground
We build a reusable, low-level <Toast> component!
This is way harder than it seems. The component we build will adhere to all accessibility guidelines, with a focus on usability and user experience. We'll also put a lot of thought into its API design, making sure it's composable and flexible.
We'll also build a mini app to help us customize and generate toasts.
A few years back, I created a React curriculum for a local coding bootcamp, and it featured a project like this, building a seemingly-straightforward UI component. Students have said that this is a really eye-opening exercise.
Project 3Interactive MDX-Based Blog
When I created my blog back in 2018, I didn't want to make a boring ol’ static blog. I wanted to create custom, bespoke widgets that would help the reader learn a concept by doing.
In this final project, we'll build the ultimate blog. You'll learn exactly how to set things up so that you have the full power of React available to you within the content.
You'll use what you've learned throughout the course to build dynamic, animated demos like this:
This isn't some contrived toy version of a blog. We use the exact same stack I use for my real blog, joshwcomeau.com, except it's even more modern, using bleeding-edge tech like the Next.js App Router and React Server Components.
If I was creating a new blog today, this is precisely how I would do it. You'll learn all about it in this course. You can even use this project as the foundation for your own real-world blog!
It also comes withBonus Features!
If you buy the Ultimate package of the course, you'll also gain access to some nifty bonuses which will help you in your journey with React.
Bonus ModuleLayout Animations with Framer Motion
Framer Motion is one of the most incredible tools in the React ecosystem. In this bonus module, you'll learn how to use its “layout projection” engine to do truly remarkable, seemingly-impossible layout animations.
This is honestly one of the best “secret weapon” packages in my arsenal, and I'm psyched to show you how I use it!
Bonus ModuleJob Hunting Kit
Most of us aren't learning React just for fun, as a hobby. We want to get a job as a React dev!
This bonus feature includes a ton of strategies and tips to help you navigate the job-hunting process. I'll share the most effective strategies I've learned in my time as a career coach, and as someone involved in hiring at several companies.
It features 11 mock interview challenges. You'll be given a prompt, along with some requirements, and asked to solve the problem. Then, I'll show you exactly what I would do, if I was given this challenge in a technical interview.
Level up the whole team ✨
Train multiple devs at your organization with Team Licenses. Receive up to a 20% discount, plus you'll be able to invite your team through our Team Administrator dashboard.
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.
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.
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.
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 🤩
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.
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.
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.
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.
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.
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.
The Joy of Reacthelped 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
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.
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 The Joy of React is no exception!
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!
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 ✨
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.
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!
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 ~500,000 times a month from NPM. It was originally released in 2016.
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
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.
Back-end or mobile developers who have been thinking of switching to front-end, but aren't sure where to start.
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.
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.
I'm already pretty comfortable with React, is there anything in this course for me?
This course is primarily built for folks who are new to React, or have struggled to learn it, but I've heard from so many developers with years of React experience who still got a lot of value from the course.
There are a few reasons for this:
We cover all of the bleeding-edge features, like React Server Components, Streaming Server Side Rendering, the Next.js App Router, and Suspense. There aren't that many resources out there about this stuff, and we go surprisingly deep in this course.
In one of the bonus features, we dig into Framer Motion, an animation library for React. You'll learn how to do advanced layout animations like this one:
We cover the core mechanics of React in more depth than most React tutorials/courses. We dig into the thorniest parts of modern React, things like useEffect’s dependency array, or understanding how React's reconciliation process works. I've heard from several students now, who have said things like this:
I've structured the course so that more advanced developers can quickly skim the early content: all lesson videos have text summaries, all exercises have text solutions. You should be able to sprint through the early content, and get to the meaty advanced stuff in no time!
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.
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.
Finally, there is quite a bit of content that you won't find in other courses, including:
Bleeding-edge React features like React Server Components, Suspense, and Streaming SSR.
Creating next-level layout animations with Framer Motion.
Learning how to use the Next.js App Router.
The mental models and design patterns I've developed on my own, after 8 years of React experience, that help me build scalable, well-architected React applications quickly.
Building accessible and usable interfaces.
Does this course use React classes? Hooks? Or both?
In this course, we focus almost exclusively on hooks. The only time we use class components is when we look at Error Boundaries, since that feature hasn't yet been ported.
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!
Does this course use TypeScript?
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 you have to climb is much steeper.
My goal in this course is to give you a rock-solid foundation with React. Once you have that foundation, it will be much easier building your understanding of TypeScript on that foundation! I've spoken to many students now who have gone on to learn TS, and they've said that the course helped them a lot.
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”.
Regional licenses include all of the same content (including bonuses!) at a significantly lower price point. In exchange, the course can only be accessed within your home region. If you wind up moving to a higher-cost-of-living area and wish to continue accessing the course, you'll need to upgrade to a global license, and pay the difference in cost.
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'll receive a 10-20% discount, depending on the number of licenses purchased.
You'll also gain access to the Teams Administration dashboard, to make it easy to distribute your licenses, and purchase additional licenses.
Is there a student discount?
There is indeed! We can offer a 20% discount on the Ultimate package of the course for students. This discount can be combined with regional licenses.
To qualify, you must be enrolled in a full-time or part-time educational institution. We accept students from high school, college, university, trade school, and coding bootcamps. The main restriction is that you must be currently enrolled, it can't be something you've already graduated from.
Please send proof of active enrollment to firstname.lastname@example.org. This can be anything from a student ID card, to registration paperwork. If you have an “.edu” email address, sending us an email from that address is sufficient proof.
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!
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 200 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.
Can I upgrade later if I buy a lower tier now?
Yep! But there are a couple of things to know:
You can only upgrade to the full “Ultimate” package. You can't upgrade from “Basic” to “Pro”.
The upgrade cost will be the difference between what you paid originally and the current full price of the “Ultimate” package. Any future discounts or sales cannot be applied to upgrades.
What if I don't like the course? Is there a refund policy?
Yes! If you purchase the course and you don't get a ton of value out of it, you can absolutely return it. You have 30 days to go through the materials.
If you discover that it's not right for you, reach out by email and we'll refund your purchase in full, including sales tax. No questions asked, and no hard feelings. ❤️
Can I pay in installments?
I'm in the process of looking into supporting installment payments for the full course.
That said, it may be possible for you to use PayPal’s “Pay Later” feature to pay for the course in four interest-free installments. You can also select longer installment periods. To use this feature, click on the “PayPal” button during checkout.
Unfortunately, this feature is only available in the following countries:
I hope to add support for worldwide installment payments in the future!
Can I buy the modules individually?
A few people have asked if they can buy modules “à la carte”, if they're only interested in the Full Stack stuff, or the Framer Motion stuff.
Unfortunately, this isn't possible. The 3 listed tiers are the only options when it comes to purchasing the course.
That said, I genuinely believe the course is still a fantastic value even if you only wind up doing 1 or 2 modules! You can always purchase the full course and jump straight to the content you're most interested in. 😄
Is there an online community for this course?
Yes! We're using Discord for our online community. It's a very vibrant place — there are already thousands of active students, who joined earlier in the year with the “Early Access” launch.
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!
What about a receipt, so I can be reimbursed?
Right after purchasing, you'll be emailed a receipt/invoice from Paddle, our merchant.
The invoice can be customized using Paddle's web interface, to add whatever name / address is required to comply with your employer's reimbursement requirements.
Can I gift a license to somebody else?
It's definitely possible! But it's not totally seamless yet. There are two options:
You can enter the recipient's email in the checkout process, so they receive the welcome email.
You can purchase for yourself, and then email me with the name/email of the person you'd like to gift it to.
The first option is quicker, but please note that the recipient will also receive a copy of the invoice, with the last 4 digits of your credit card (if paying by credit). The second option preserves your privacy, but it may take me a day or two to respond.
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.
The students I've spoken with have told me they've spent anywhere from 40 to 100+ hours going through all of the content. It's a significant time investment, but still so much faster than it would be to learn all of this stuff on your own!