This site runs best with JavaScript enabled.

How to React ⚛️

Let's see how learning React ⚛️ in the right order can make it less overwhelming.

The best way to learn React is... Honestly, it's different for everyone. But here's some handy advice from someone who's taught React to tens (hundreds?) of thousands of developers.


Let's start out talking about abstraction. Here's an example of an abstraction from

1// $(el).toggleClass(className);
3function toggleClass(el, className) {
4 if (el.classList) {
5 el.classList.toggle(className)
6 } else {
7 var classes = el.className.split(' ')
8 var existingIndex = -1
9 for (var i = classes.length; i--; ) {
10 if (classes[i] === className) existingIndex = i
11 }
13 if (existingIndex >= 0) {
14 classes.splice(existingIndex, 1)
15 } else {
16 classes.push(className)
17 }
19 el.className = classes.join(' ')
20 }

Pretty handy. But here's the kicker... If you don't need to support IE8, then you can actually change that to:

1// $(el).toggleClass(className)
3function toggleClass(el, className) {
4 el.classList.toggle(className)

Which, quite honestly is an abstraction that shouldn't exist at all... el.classList.toggle(className) is simple enough all on its own.

So here's what you need to know about an abstraction before you adopt it into your application or workflow:

  1. What is the benefit of this abstraction?
  2. What is the cost of this abstraction?

If you don't know those things, then you run the risk of paying a cost for a solution for a problem you don't have. A cost with no benefit is not a good deal!

An important part of understanding the benefits and costs is feeling the pain of the problem that the abstraction solves. This is why it's important for you to learn React and its ecosystem in the right order to make certain that you're not overwhelmed by too much to learn at once and using abstractions effectively.

For more on this, check out AHA Programming 💡.

Side note...
Want to just play around with stuff?
Want to just ship stuff?
That's totally cool.
Just recognize you don't know the trade-offs and that could bite you in the future. If the future doesn't matter that much then don't worry about it!

Start with JavaScript + Modern JS

One of the things I love about React is how much JavaScript it is. If you can build a simple app with regular JavaScript and DOM APIs then you'll understand the benefits of React much better. You'll also be much more effective using React because honestly, 90% of being effective with React is understanding JavaScript well. For this, I suggest reading my blog post "JavaScript to Know for React". Also check out (totally free) and (not free) both by Wes Bos.

In addition, knowing modern JavaScript features will go a long way. Because JSX (more on this later) requires a compiler, most React developers take modern JavaScript features/compilers for granted. So most tutorials and examples will assume you have a basic understanding of modern JavaScript features. For this, I suggest my ES6 and Beyond Workshop (totally free) which is a recording of a workshop I gave at PayPal.

Next, let's learn React

Too many "beginner React" material starts with JSX and a bunch of tools. React itself is remarkably simple (and the docs are amazingly good). Sadly, everything around it can get complicated quickly and it can be hard to know where the lines are between React and the tools and libraries you use it with. Because of this, I've created The Beginner's Guide to React absolutely free on It starts with everything in index.html files which I think is important. You don't need any tooling at all to use React. I've built real side-projects with this approach for lightning fast iteration and deployment. I seriously can't think of a faster way to build those kinds of simple apps, and it allows you to side-step a ton of complexity and get to building and shipping apps fast. Learn more about this approach in my post Super Simple Start to React.

The last lesson of my free egghead course shows you how to use to create your app entirely in the browser and download that to your computer to a create-react-app application.

You don't need anything installed to get a really long way! And once you do, you can get really far without having to configure any tools. I know of several companies shipping their application with create-react-app.

If you're looking for the fast-pass to learning React, then look no farther than EpicReact.Dev. It will teach you everything that my Beginner's Guide to React does and then WAY more. EpicReact can be your companion from the start of your journey with React all the way through becoming a complete boss at this stuff. And it does this so effectively thanks to the exercise-driven approach. You'll spend WAY more time with your fingers at the keyboard applying what you're learning than any typical online course will give you. Don't miss EpicReact.Dev.

Dependencies and npm

Once you've decided that you don't want to write your own version of every component under the sun, you can start looking into dependencies. There are a TON of components out there and here is where you really need to start asking the questions of "what's the cost" and "what's the benefit." Try really hard to not add a dependency until after you've felt the pain it's supposed to solve. It will make you more effective at using the dependency.

I suggest reading through the npm documentation in an afternoon. Seriously, do it. There's some really valuable information in there.

In addition, when you start using dependencies, you're going to want to learn how to import those dependencies. I have a talk called "More than you want to know about ES6 Modules" which you'll probably find packed with useful information about the ES Modules syntax.


If your application is server rendered and you're adding react in to support some interactivity, then don't bother with routing. However, if your application is a "Single Page App" or the client (your browser code) will be responsible for routing (updating the URL as the user is using the app), then you should learn and use react-router.

It has fantastic documentation. But if you really want to get a firm grip on what it's doing, then I highly suggest "Build your own react-router" by Tyler McGinnis.

State management

When you learned React, you learned about the useState API. You probably also learned about Lifting State Up. This can actually get you a long way with React and I encourage you to keep doing this as long as you're able. Eventually you'll start running into some trouble with "the prop-drilling problem." You'll know it when you feel it. When this happens, then I suggest you give my blog post "Application State Management" a read through.

TL;DR: React is an Application State Management library and you don't need Redux

Server Cache Management with react-query

If you're interacting with a backend, then you're going to want to have some mechanism for storing and interacting with the data you get back from the server. For this, look no further than react-query. It's just fantastic and will simplify your journey a great deal.

Component Styling

I honestly cannot recommend CSS-in-JS enough. Once your app has more than a few hundred lines of CSS, you'll find that CSS-in-JS can really simplify things conceptually for you. Here's some resources on why:

A Unified Styling Language — Mark Dalgleish:

  • Scoped styles
  • Critical CSS
  • Smarter optimisations
  • Package management
  • Non-browser styling

Maintainable CSS in React — me 👋:

  • Colocation of concerns

I recommend emotion because it has all the features you could want out of a solution like this and it's the smallest, fastest, and more memory efficient solution.

Another thing that you might look into is TailwindCSS. It's "a utility-first CSS framework for rapidly building custom designs."

And on...

From here I suggest you dive in deeper into React. I have my Advanced React Component Patterns course on which can give you a lot of really good information.

Beyond here, you can learn:

  • Server Rendering (Gatsby.js, Next.js, After.js)
  • Relay/Apollo (for use with GraphQL servers)

Again, I would strongly recommend not learning these things until you've felt the pain they solve. This will make you a much more effective user of these solutions.


I hope that this gives you (and your friends) a path for how to learn react as well as where to start when building React applications. Adding abstractions to your application too early makes them less flexible, so I would generally follow this pattern when building apps as well. Good luck!

Discuss on TwitterEdit post on GitHub

Share article

Get Really Good at React

Blast Off

Write professional React.

Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. He's taught hundreds of thousands of people how to make the world a better place with quality software development tools and practices. He lives with his wife and four kids in Utah.

Join the Newsletter

Kent C. Dodds