I’ve been building user interfaces with React since 2015. I started teaching React to my coworkers at Eventbrite not too long after I had learned it. Now that I go around the country speaking and teaching workshops on React, I’m seen as an “expert.” As a result, I get asked “where is a good place to learn React?” a lot.
When I was learning, the only good option available was the official React tutorial. In the current version of the tutorial, you get to build an interactive tic-tac-toe game (back then when I went through it, it was a comment box app). In the beginning when I was asked “where to learn,” I sent interested learners to the official tutorial. It’s how I learned, so it was really all I knew. I figured everyone else would be able to learn React the same way I did. But when I would follow up with them, some would say that it didn’t work out. They didn’t finish because they got stuck, or they just didn’t understand the material.
It was at this point when it became apparent that not everyone learns the same way. It should’ve been obvious that folks learn differently, but by only recommending the official React tutorial I was assuming that there was only one good way to learn. Boy was I wrong. I have since found that there are at least three major ways to learn React from scratch. Of course, this can apply to other technologies as well, but I’m focusing on React for now.
Written React tutorials
The official React tutorial is an example of a written tutorial. It’s even more in-depth and instructional now compared to when I went through it 5 years ago. And there are many other options now as well. Learning React is a published book by Alex Banks and Eve Porcello that is another fantastic option.
The nice thing about written tutorials is that you can go at your own pace. You go at the pace at which you read, process, and understand. And thanks to a table of contents, you can jump all around the book or website as much as you want. You can “see” the code in a static state, and even copy and paste it when the tutorial is online. Written tutorials are a great way to learn.
However, they do also have drawbacks. The fact that they are self-driven means that you also have to be self-driven. Written tutorials, especially books, cannot be finished in a couple of hours, so you have to dedicate multiple days, if not weeks, to complete the tutorial to learn the new skill. In our instant gratification culture, that can be very difficult.
Also, it’s really hard to ask questions when you get stuck on something you don’t understand. Sure there’s Twitter, Stack Overflow, or Reddit, but it’s not quite the same. And when you get stuck and don’t have anyone to unstick you, it’s very easy to give up and move on.
Lastly, because React is continuously evolving, written tutorials tend to go out of date quickly, unfortunately. It takes a lot of work to write a tutorial, especially a whole book, so continuously keeping it up to date is a challenge. The official React tutorial isn’t even using hooks yet even though they are the future of React and have been out for more than a year.
Despite these challenges, I tend to buy and read physical books when I’m learning an entirely new programming language. Within the last few years, I’ve bought books on Python/Django, Android, and Ruby/Rails. I did pick up Django and used it a lot while at Eventbrite, but I don’t know Android development nor Rails. I lacked sufficient motivation to make it through the two books and learn the material.
However, I probably would know a little Rails & Android right now had I attended a live workshop instead...
Live React workshops
There are likely many people and organizations teaching live workshops, but the most popular are probably by Kent C. Dodds (remote) and React Training (in person). Live workshops are more akin to being in a school environment. Hopefully, that brings up more good memories than bad. 😂
Live workshops can work out great because they feel more hands-on. There's a specific block of time where learning will be taking place. You have a live instructor right there that you can ask questions in real-time. Even better, you get to hear other attendees’ questions as well which can provide more understanding. And if you ask a question and you don’t understand, you can ask again and get an answer explained in a different way.
Most live workshops are also live-coded, so you get to watch the instructor build the app as they teach you the React concepts. There are no amount of words that can be written to simulate watching an instructor write the code. Provided long as they are prepared and organized, how they put the code together and the little one-off comments they make while coding can be just as informative as the topic itself. In addition, live workshops tend to be more up-to-date because the instructor already is tweaking the workshop each time they give it.
However, one of the main drawbacks of a live workshop is that it moves at the pace of the instructor. Many times the pace of the workshop will feel too slow (you know more than most of the other attendees) or too fast (they all seem to know more than you). In a written tutorial, you can jump ahead when you already understand or keep re-reading when it hasn’t clicked yet.
With a live workshop, you’re paying for live access to the instructor. That’s why they tend to be expensive. So in order to maximize your time (and money), the workshops typically last a whole day (or two). But in my experiences as an attendee, it’s been really hard to absorb information after 3 or 4 hours. By the end of the day, my energy is zapped and it’s much harder to focus. That’s why I created my minishops, 3-hour focused workshops that allow you to learn while your mind is still fresh. But more on those in a bit.
I attended a live workshop on React Native by Devin Abbott back in 2016 that was fantastic. It quickly jumpstarted my understanding of React Native that I don’t think I could’ve gotten from a written tutorial. Similarly, last year I went to an extended session by Brian Douglas at All Things Open 2019 on Github Actions after unsuccessfully trying to find information online about what it was and how it works. Now I love them and use them in every project I create.
Online React courses
Online courses sit somewhere on the spectrum between written tutorials and live workshops. There are many, many options in this space, some paid but some also free. Tyler McGinnis created ui.dev which has a subscription-based React course, along with a few other JS-related courses. Kent C. Dodds’s Epic React is coming soon, but in the meantime, you can learn with his free React course on egghead.io.
Like written tutorials, online courses are self-paced. You can pause and rewind the video when you don’t understand or skip videos for topics you already know. However, just like written tutorials since they are self-paced, you have to be sufficiently self-motivated to make it all the way through the course. In addition, you can’t ask real-time questions when you get stuck. If you don’t understand how the topic was explained in the course, there’s no great option for a re-explanation. This is when many learners quit.
These online courses are video-based so they are very visual just like a live workshop. The instructors in these courses also typically use live coding to teach, so you get the same “collateral learning” that you get from live workshops. The videos, of course, are pre-recorded so these courses are almost always really organized. However, that organization and high-quality teaching usually come at a cost to you.
You’ll find lots of free online intro to React courses, like Mosh Hamedani’s React Tutorial for Beginners, Just search YouTube. But those also end up being stale 6 months to a year after production. Both Kent & Tyler’s online courses promise to be always up-to-date, that’s why they rightfully cost money. It takes a lot of work to maintain a "living" online course.
The online course industry is huge, with intro to React courses on all the big online learning platforms like Frontend Masters, egghead.io, Udemy, Pluralsight, and others. Some are better than others, but it’s clear that lots of people are successfully learning this way.
Apprenticeship
So figure out which way you think you’ll learn best, whether it’s written tutorials, live workshops or online courses, and give it a try. And if the first way doesn’t work out, there are still two other methods for you to try next.
But once you’ve gotten your introduction to React and have learned the basic principles, the next step is to apply what you’ve learned in order to start building experience. This is how you will truly understand React, or anything new you’re learning for that matter.
The best way I’ve found to gain this experience is to pair alongside someone who is more experienced than you; sort of like an informal apprenticeship. It will probably take too much of this mentor’s time for them to teach you React from the very beginning, but now that you know the introductory material, you can lean on them to help you grow. And you’re doing this all while building something real. Even if you're just pushing it up on Netlify, it has to be real.
Ideally, this mentor is working with you on the project so that their advice is in real-time, and you can also see how they solve problems in React. But even if not, having them around will really accelerate your growth. You can ask questions and they can help you get unstuck. You can show them some code and they can give you peer review feedback. They can send you links to the docs, blog posts, or videos that will teach you new concepts.
Speaking of docs, they’ll likely make more sense at that this point too. I’ve found that docs unintentionally are written for those who already know how to use the technology the docs are for. There have been many times when I’m just getting started with a language or a tool where some of the docs just don’t make any sense. But after I’ve learned and used it a bit, I now understand what the docs were trying to explain.
Similarly, it’s at this point where you can start watching videos of different intermediate to advanced React concepts. I’ve probably watched a couple dozen videos from Harry Wolff on his YouTube channel about React and other frontend-y topics. And I’ve learned so much!
Minishops by Ben Ilegbodu
I mentioned it before, but I’d be remiss if I didn’t use the opportunity to give a plug for my minishops. They are fully-remote workshops that last about 3 hours. They’re highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day. I gave a full explanation of minishops in my Introducing Minishops post a few months back.
I just finished giving the TypeScript for React Developers minishop where we learned how to use strong types with TypeScript in React applications to prevent common bugs that infect our apps. Coming next is the Migrating to React Hooks minishop to learn how to move away from class components in order to manage state better in React apps. I also have an introductory minishop called Zero to React with Hooks that could be a perfect way for you to learn React. That will be announced soon. I plan to add other React & JavaScript minishops in the near future.
Be sure to check them all out while you’re here!
Keep learning my friends. 🤓