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 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!
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.
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.
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.
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.
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
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.
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).
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!
