How to React ⚛️

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.

Abstraction

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

// $(el).toggleClass(className);

function toggleClass(el, className) {
	if (el.classList) {
		el.classList.toggle(className)
	} else {
		var classes = el.className.split(' ')
		var existingIndex = -1
		for (var i = classes.length; i--; ) {
			if (classes[i] === className) existingIndex = i
		}

		if (existingIndex >= 0) {
			classes.splice(existingIndex, 1)
		} else {
			classes.push(className)
		}

		el.className = classes.join(' ')
	}
}

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

// $(el).toggleClass(className)

function toggleClass(el, className) {
	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:

What is the benefit of this abstraction?
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 JavaScript30.com (totally free) and BeginnerJavaScript.com (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 pretty good, the beta docs are even better). The simplicity of React is what I love about it. 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 egghead.io. 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 CodeSandbox.io 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.

Also, I have a ton of React-related content on my blog 😅

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.

Remix

Now it's time to get serious about building a real-world application. No matter what you plan to build with React on the web, you'll be well served to use Remix as your framework of choice. It has allowed me to build this website with excellent performance while maintaining a fantastic codebase I love working in.

To learn Remix, I recommend the official documentation. I also have some Remix content on my blog that could be helpful to you.

State management

Most of typical state management will be managed for you by Remix, but for UI state (state that's not persisted in a backend), you're going to need to understand how to manage state within React.

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 may 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

Component Styling

I honestly cannot recommend tailwind enough. Once your app has more than a few hundred lines of CSS, you'll find that tailwind can really simplify things conceptually for you. It's "a utility-first CSS framework for rapidly building custom designs."

That said, Remix has a terrific mechanism for loading (and unloading!!) CSS on a per-route basis, so you may be able to manage just writing regular CSS for quite some time before needing to reach for something like Tailwind.

And on...

From here I suggest you dive in deeper into React. I have my Advanced React Component Patterns course on egghead.io which can give you a lot of really good information (but you can get a more up-to-date version of this content on EpicReact.dev anyway, so I suggest you just grab that).

Conclusion

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!