Where to Learn React.JS in 2022 - A List of Resources for New Developers
React has never been more popular. According to last year’s Stack Overflow survey, over 40 percent of professional developers claim to have worked with React in some respect! In other words, if you want to work with front end development, spending the time to learn how to work with React might be a worthwhile investment.
Unfortunately, React’s popularity has a major downside. Because it’s so popular, you’ll find an overwhelming amount of content about it, from everybody from professional educators to professional content farms. Some of this content is great, while other pieces might be written by people just getting started themselves. Some might be free, while other resources cost a lot of money. And to be honest, sifting through this by yourself is no easy feat.
Luckily, there are people who know the community and content out there better than others. This article will show you some of the very best resources available today, and present them to you in a way that still leaves you with a choice of how to spend your time.
Before you begin: JavaScript
Before we dive into learning React, I believe it’s important to have a firm understanding of the language it’s implemented in – JavaScript.
JavaScript is a language that has evolved tremendous amounts the last seven years. There is a bunch of new syntax and improved API , so if you haven’t worked with it in a while, you might want to invest some time in understanding its new features.
MDN’s JavaScript guide
Mozilla’s Developer Network, or MDN for short, is one of the very best resources about web development available. It’s a complete reference to all functions, methods, APIs and everything in between for both HTML, CSS and JavaScript.
They also have lots of great guides and tutorials, and their step by step guide to JavaScript teaches you everything you need to know about modern JavaScript syntax. It’s free, it’s well written, and it’s easy to follow for both people new to programming, and development professionals with a different background.
Price: Free Get started at developer.mozilla.org
JavaScript 30
If you’re more of a practical learner, I would suggest you check out the JavaScript 30 course from web educator Wes Boz. In this course, he guides you through building 30 small web projects without any frameworks, libraries or build steps. It requires you to know the basics of JavaScript, but once you know the syntax, you should be good to go. He also offers a paid JavaScript 101 course, if you want to look into that.
Price: Free Get started at javascript30.com
Just JavaScript
This might be the very best money I’ve ever spent. Dan Abramov and Maggie Appleton have made this incredible guide to having sane mental models about most of JavaScript’s harder parts. What is an object, really? How does primitive values work?
Taking this course (a few evenings worth) really revolutionized the way I think about JavaScript, and how it works. If you got the syntax down, and have built a few small projects, this is a course you should strongly consider.
Price: $42 Get started at justjavascript.com
Learning React
Now that you’ve gotten your JavaScript skills up to par, it’s time to dive into the nitty gritty of the web’s most popular way to build user interfaces – React.
There are a lot of ways to learn React, both textual, visual and practical. Most people have a preference to their learning (I’m a huge reader, myself), so please consider the resources that makes sense to your own preferences.
Without further ado – let’s dive into some of the very best available
The Beginner’s Guide to React
If you don’t know the name Kent C. Dodds, you might as well learn it now. Kent is - in addition to being a really great guy - an amazing educator.
I always recommend people to start with his free beginner’s guide to React. It’s a free video course, taking you through 30 small and contained lessons, taking you from using regular JavaScript to do React’s job, to introducing React step by step, and learning all of the most fundamental parts you need to get started on your React journey.
The course claims “there’s no better introduction to React online”, and after having through most of them, I agree fully!
Price: free Get started at egghead.io
Epic React
If you like Kent’s teaching style, you might want to invest in his complete line of React courses - called Epic React. In this extremely thorough course, you’ll go through 8 different workshops, learning everything from the very basics to really advanced APIs.
The workshops are a mix between video introductions and practical exercises, with great walkthroughs at the end. It’s really good at explaining at times pretty advanced concepts, and you get to learn a lot of techniques I had to learn by trying and failing.
With all that said, it’s a pretty expensive course. Not for what you’re getting, but in dollars and cents. At $599 for all courses, it might not be worth the initial investment for many. However, if you got the budget, or your employer does, it’s definitely going to pay off in the long run.
Price: $119-$599 Get started at epicreact.dev
The React Docs
When learning new frameworks, the official documentation tends to be the best place to start. Unfortunately, as React has evolved, its documentation site has not. New features and best practices, like using hooks, suspense and concurrent features, had been hidden away in hard-to-find sub sections, while the official tutorial teached old concepts like class components and lifecycle methods.
Luckily, the amazing team behind React has been working on new documentation, that’s simply incredible. The new documentation site, in addition to being easy to navigate and use, takes you through every concept you need to know about React, with great writing, interactive examples and a very step-by-step learning process.
The new documentation site is still in beta, new sections are being added as we speak. Give it a try today!
Price: free Get started at beta.reactjs.org
Let’s Learn React
If you’re into watching videos, I can highly recommend this video introduction by the wonderful Ali Spittel and Jason Lengstorf. In one and a half hours, you get a great introduction to React, and what benefits you gain from using it over other frameworks.
There’s lots of live coding, and some really neat discourse about React and web development in general. A definite must-watch for anybody interested in learning React.
Price: free Watch it at learnwithjason.dev
Open Source Session Replay
OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.
Start enjoying your debugging experience - start using OpenReplay for free.
Learning frameworks
When you got a good grasp of the basics of React, you might want to dive into two of the most popular React frameworks out there, Next.js and Remix. You don’t have to, of course, but I’ve found both of these frameworks incredibly useful as a professional developer.
Learning Next.js
Next.js is a framework that gives React superpowers. It helps you gain incredible performance gains over “regular React”, by running React on the server, or while building, and just send readily rendered HTML to your users.
Next.js has its own interactive tutorial, where you build an application by following along well-written instructions. This is how I learned Next.js, and it’s always been my go-to resource for teaching others. Also, I don’t know of any other guides that even come close quality-wise.
Price: free Get started at nextjs.org
Learning Remix
Remix is a pretty new framework, but it builds on the very fundamentals of web development. In addition, it’s built by some of the best educators in the React world!
Remix’s approach to React is slightly different from Next - instead of pre-generating static content, it leverages caching and something called edge computing to serve existing content, only hitting the server when it’s needed (or the cache is invalidated).
In addition, Remix builds on top of existing web APIs, like the Request and Response objects the browser (and Node) provides us. That means, when you learn Remix for the first time, you’re probably learning a ton of useful web fundamentals at the same time.
Remix comes with their own tutorial, and I highly recommend working through it!
Price: free Get started at remix.run
Learning by doing
After going through some of these tutorials, guides and courses, you’ll be more than proficient enough to look for your first real projects as a React developer. And to be honest, it’s in these real-life projects the real learning begins.
If you have a job that provides you with these possibilities, consider asking for them now. If you don’t, and you don’t want to switch employer right now, you should look into sites like Frontend Mentor for honing your skills outside of todo-apps and follow-along tutorials. Or perhaps you have an idea for a side project?
Do the learning!
And with that last recommendation, I suggest you put down this article, and start learning. Any one of these courses and tutorials will help you become a better React developer. I promise it will be lots of fun, a bit frustrating at times, and totally worth it.
