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 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.
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.
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? I'm still figuring that out, but 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!
Sign up forEmail Updates
The Joy of React will be released in full later this year.
If you'd like to be notified when the course is released, you can join the waitlist newsletter. You'll also receive exclusive “sneak peeks” of the content, and some behind-the-scenes stuff.
Enter your email to join the waitlist:
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.
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!
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 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
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 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.
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!
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 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 happened to “Early Access”?
From January 23rd to January 31st, this course was available to preorder as part of an “Early Access” program.
Unfortunately, that window has now closed, and the course is no longer available. I plan on spending the next few months building out the rest of the course, iterating based on feedback from the folks who enrolled in “Early Access”.
You'll be able to register for the course when it's completed. I'm hoping that this will happen by June or July, though I can't make any promises.
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.
Will there be a student discount?
Yes! When The Joy of React launches later this year, it will support a student discount.
This discount will reduce the price by 20%, and it can be obtained by sending us proof of enrollment. You're eligible for this discount if you're enrolled in a full-time or part-time program, whether that's at a university, college, trade school, bootcamp program, or high school.
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 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!
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.
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!
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
Module 1 React Fundamentals
