So You Really Want to Learn React? Well, So Do I.

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.

And as a bonus: Understanding many of these concepts will be invaluable in your JavaScript development even long after React is no longer in use. Because, after all, if I (or someone else) struggles to learn React, then maybe it’s not a flaw in React, but something deeper. I hope this post will address these deeper issues for those of us who have a hard time with these kinds of tools.

Primary JavaScript Concepts to Learn React

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”.

As already greatly implied, truly learning React means becoming more familiar with certain aspects of JavaScript, and in particular ES6+ features that are incorporated into React. There are many articles that discuss JavaScript features apart from React, but sometimes it’s nice to have articles discussing JavaScript from a React standpoint. Two such articles I found are: JavaScript essentials for React developers and Essential JavaScript features for React. There’s also ES6 Syntax and Feature Overview by Tania Rascia, which looks like a great overview of most of the React-relevant ES6 features.

Along the same lines as the above, there’s Carlos Mafla’s video 10 Things to Know About JavaScript ES6 Before Learning React JS. It’s similar to the previous article links but sometimes a video can provide visuals that really drive home certain concepts.

At this stage, a deeper dive of JavaScript concepts that are important to React development would likely be helpful. JavaScript fundamentals before learning React by Robin Wieruch is one such example, broken up into 17 different categories.

Another article that summarizes, but doesn’t go into a lot of detail on, some important JavaScript features is 5 Topics To Master Before Learning React. A similar source for further reading on basic JavaScript concepts before learning React is this Quora post, if you prefer a Q&A format.

I was also intrigued by this article title: Before Learning React.js: Do You Need to “Speak” Fluent JavaScript? Or Is Basic JS Enough?. Invariably, the answer to the first question is “yes”, and the author suggest that you “Learn to Solve Problems in JavaScript Before Learning React.js”, which I think is good advice for working with any JavaScript tool.

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.

Deeper JavaScript Concepts for React Devs

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.

In the area of pure JavaScript features and concepts, here are some that I’ve discovered through my research are important to understand:

Those might fill any gaps in knowledge of some of the more advanced parts of JavaScript.

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.

For help in understanding the concept of components in React, William Pei Yuan wrote Create components with ES6 Vanilla JavaScript. He explains why he went through this exercise for himself:

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

After getting familiar with important JavaScript concepts I think it will be useful to look into articles on specific features of React and some of the related tooling.

5 things to learn before learning React by Nicole Chung has some good suggestions including some points about development environment, npm, and CSS.

JSX is a syntax extension to JavaScript, similar to a template language, which is often used (but not required) in React. What is JSX by Kent C. Dodds should be a good starting point, as well as the official docs.

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:

When it comes to client-side JavaScript applications, I like to think of state as “the outcome of all of the actions that the user has taken since the page loaded”.

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.