I probably don’t need to tell you that if you want to make it easier marketing yourself as a strong front-end web developer, it’s important to learn React. No, it’s not absolutely crucial, nor is it required. But React is undoubtedly the most important UI library in the front-end landscape in 2019 and it’s not going away anytime soon.
But many have expressed frustration with React and I don’t think it’s just a vocal minority. I think the majority of front-end web developers that can build stuff with React probably don’t have the kind of deep understanding that they would like (myself included).
What’s Missing When Developers Learn React?
I’ve barely scratched the surface with learning React. There are tons of resources to get started with React, including Wes Bos’s hugely popular React for Beginners course.
Even after going through a course like that I find there can still be some gaps in knowledge and understanding. Personally, when I build things in any library or framework, I want to understand, not just the hows of the library, but the whys.
To that end, for the past six months or so I’ve been saving URLs to various React articles and videos that I’ve started to use to deepen my understanding of the concepts that drive the library. I thought putting them all together like this in a single article will be beneficial not only for my own future reference, but for others that hope to master React and any library that resembles it.
I don’t expect that I (or anyone else) will read all the articles referenced here. The idea here is to present a somewhat organized and logical archive of React articles that go beyond just the basics of building stuff and explain the concepts that are important to truly learning it.
Once I have the basics of React down and I’m more or less able to build stuff, I think the goal from there should be to go deeper into each of React’s main concepts and what really drives the library.
A good start might be a refreshing article like How Fast Can You Learn React? by Attila Vágó, because he makes us feel human again. He discusses a number of React concepts, and says:
So no, you won’t learn React in 5, 8 or 10 minutes. Not by a long-shot. It takes a weekend just to familiarise yourself with the main concepts of the library. Then you’ll have a go at it and build something on your own peeking back at code you wrote during a tutorial or course. You’ll quickly realise your needs have gone beyond what the course taught, so you’ll google, you’ll read the docs and you’ll make mistakes. You’ll swear, and you’ll learn. In time. Every day a little bit more, and maybe, just maybe a couple years down the line you’ll be confident to say “yeah, I really know this stuff”.
A 2016 article by Cody Lindley might also help here. He covers 5 Steps for Learning React Application Development. The five steps are pretty basic and similar to what’s already been considered (and somewhat out of date), but, importantly, he covers why Facebook created React, which I haven’t seen in many other posts.
On a related note, here’s a useful article: How You May Have Come Up With React by Hudson Thomas. He explains:
While it is true React is immensely useful, you may not immediately realise why that is. So, let’s go on a little journey through a hypothetical application to understand how you may have come up with the fundamentals upon which React is built.
Sounds like a must-read for those who know a little React but can’t seem to grasp the deeper reasons behind why the library is so practical.
Sometimes I’m concerned about the order in which I’m learning things. In that case, Dave Ceddia’s Your Timeline for Learning React, which has a chronological checklist, might help.
In a similar vein, John Hannah wrote How to Learn React: A Five-Step Plan. It’s a 2017 article, but I like his intro because it addresses what I believe React newcomers want:
For the past two+ years I’ve worked exclusively on React projects and I’ve had my own up-and-down learning experience with it. Over that time, I’ve developed some advice for how to learn React—the resources, the sequence and the important takeaways.
Further on the timeline discussion, Adam Gołąb’s React Developer Roadmap infographic might be of help. To be honest, this is not the kind of resource that would personally help me much but you might find it useful.
A lot of the content discussed in the previous section’s resources comprises features that many of us have studied before (arrow functions, let/const, ES6 Classes, etc). But with React, it seems appropriate to want to go deeper. Where to next?
These React Fundamentals You Skip may be Killing You by Ohans Emmanuel says:
Often times, the inability to debug a certain error stems from not understanding some foundational concept.
Quite true! That article aims to help the reader gain depth of certain React concepts including how React works “under the hood”.
The ambitiously-titled All the fundamental React.js concepts, jammed into this one article covers lots of ground but some of the specific topics in there that go beyond the basics will likely be good to delve into.
- Imperative vs Declarative Programming
- Understanding the “this” keyword, call, apply, and bind
- Higher-Order Functions
- First-Class Functions
Higher-Order Functions (not the same as first-class functions) are also covered, among other things, in the article These are the concepts you should know in React.js (after you learn the basics) by Chris Chuck. He also covers the Component Lifecycle, Mounting/Unmounting, React State, and more.
because it has helped me further my understanding of frameworks like Reactjs, Vuejs, Preactjs, and others.
Another post geared towards those who already have the basics down is React 101: Things every beginner should know – Part 1 by Nilesh Singh which covers some unique territory not mentioned in other sources.
React Tools, React Features, and more
The concept of state in React is another one I hear thrown around a lot and is vital to understanding React. Understanding “state” in React Components by Eric Simons is one source to consider. That site requires payment to unlock all the content, but the free content includes a nice analogy about temperature that explains what state is:
If you can change the value on a thermometer, that means you have the ability to put a piece of matter into a different state […] What if we could do the same thing with programs? What if we could define a set of properties that would determine how our program would behave in any situation, similarly to water’s relationship with temperature?
Raquel Moss’s What is state? Why do I need to manage it? provides this useful summary of what state is:
Another good resource is Ruben Leija’s What is the difference between React props vs state. Props are another familiar feature of React that so far I have a superficial understanding of, so maybe the contrast presented in that article will help solidify my understanding of both concepts.
Appropriately, React creator Dan Abramov put together Getting Started with Redux, an egghead video course that can get developers up to speed with Redux, a popular tool for managing state in React. Further on the subject of state and Redux, in Building a Redux-like State Manager for React, Joshua Jahans says:
Once a developer has learned how to use a library like Redux, they may still be left wondering just how exactly everything is working “under the hood” since it’s not obvious at first, even if the more general concept of updating a globally-available object is easy to grasp.
He then goes on to build a Redux clone. (Note: the code embeds in that article aren’t working correctly but I thought his info was useful enough to include a link here regardless.)
Finally, to round out an understanding of Redux, there’s An Unforgettable Way to Learn Redux — The Visual Guide by Ohans Emmanuel. He describes the article as:
a visual guide to learning Redux […] focused on the core Redux principles explained with memorable associations and custom illustrations.
A useful Redux learning tool is Edd Yerburgh’s Simple Redux, which he describes as a “bare-bones redux implementation for teaching purposes.”
Another term that’s often mentioned in connection with React is Virtual DOM. The Inner Workings Of Virtual DOM by Raja Rao or Understanding the Virtual DOM by Ire Aderinokun should be enough to bolster that area of React knowledge. There’s also Jason Yu’s talk Building a Simple Virtual DOM from Scratch.
I’ve never used Vue, but if you’re already familiar with Vue and are thinking of switching to React (or vice-versa), it might help to understand the differences between the two libraries. Here’s an article by Sunil Sandhu in which he builds the same app with both tools.
The most popular boilerplate/scaffold for jumpstarting React projects is Create React App. Apparently, there isn’t a lot to know about Create React App; it just works. So after an introductory look, a source like A Complete React Boilerplate Tutorial — From Zero to Hero by Leonardo Maldonado, where he builds one step by step, might be the next place to go.
Yet another React tool that I’ve heard a lot about is React Router. Routing is more or less React’s version of deep linking. A tool like React Router helps manage this. Must know concepts of React Router by Aayush Jaiswal might provide a more satisfying understanding of how this works in React.
And lastly, here’s an article that really dives deep: 10 React.js interview questions (and possible answers). I don’t know if I’ll ever need any of that for an actual interview, but I’m sure much of what’s discussed in there can help drive home some of the concepts that might still be foggy.
Wrapping Things Up
More than likely there are some important concepts I’ve missed here. Like I said, I’m in the same boat as many of you, having not yet delved too deeply into the library. So if you want more concepts to read about and search online for, this portion of the official docs might be a good starting point.
If you have anything to add or correct in this post, I’m more than happy to make the necessary adjustments to the content. I hope this post will prove useful for those looking for some in-depth sources on React-related concepts.