by author Kristofer Selbekk
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.
Get started at developer.mozilla.org
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
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.
The course claims “there’s no better introduction to React online”, and after having through most of them, I agree fully!
Get started at egghead.io
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.
Get started at epicreact.dev
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!
Get started at beta.reactjs.org
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.
Watch it at learnwithjason.dev
Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue.
It’s like having your browser’s inspector open while looking over your user’s shoulder.
OpenReplay is the only open-source alternative currently available.
Happy debugging, for modern frontend teams - Start monitoring your web app for free.
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.
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.
Get started at nextjs.org
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!
Get started at remix.run
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?
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.