How Much JavaScript is Needed to Learn React?

People use different words to introduce React. But nothing can be more suitable than what its official tagline says: React is a Javascript library for building user interfaces. It hints at the important role Javascript plays in React. What does this relationship mean when you’re learning React, though?

Does it mean you should master all Javascript before starting React? No.

Does it mean you don’t need to know any Javascript to learn React? Again, no.

Then, how much Javascript is needed to learn React? Now we’re asking the right questions. And to answer this, I’d say at least enough Javascript to tell it apart from React. Here’s why.

React is just a UI library; you can’t use it for everything

Most people learn React to develop web frontends. But a frontend of a modern website is not just the user interface. It also runs background activities to control its dynamic behavior. It has to fetch data from APIs, run calculations before making certain decisions, or validate the user’s actions before executing them.

As React’s official tagline says, though, React is only a UI library. It has the ability to decide how the web page and its components should look. It also has the means to rerender the page if some event triggers it. But it can’t do any of the other background activities a web frontend does, like making API calls.

The responsibility of doing the things that React cannot do then falls on the shoulders of the languages React is built on. That means, primarily, Javascript.

So, if you want to make an API call, you have to use Javascript’s Fetch API. If you're going to check whether the password user entered follows an accepted pattern, you need Javascript to compare it to a regular expression. If you need a function to calculate the estimated discount of a user’s order, again, it’s Javascript that can help you.

Since a website is not just a UI, a developer can’t rely on React for everything. It makes some level of Javascript knowledge a must for anyone who wants to learn to build frontends with React.

Knowing to tell Javascript and React apart gives you a smoother learning experience

Even in the early stages of learning React, many syntax and concepts you encounter come from Javascript. For example, the syntax for classes that React uses to define components is a part of Javascript ES6. The idea of using the “this” keyword to refer to an object instance is also introduced by Javascript.

The problem with React borrowing from Javascript concepts is not that you can’t learn them along with React itself. The problem is that you won’t know how to tell apart what’s React and what’s Javascript even as you move on to increasingly advanced topics.

How does not knowing to tell React and Javascript apart become a problem, though?

If you don’t know whether the code you write belongs to Javascript or React, you’ll have to struggle to find solutions when things go wrong. The answer to your dilemma may be on the Javascript end. But if you don’t have the Javascript knowledge to realize it, you will end up going on a wild goose chase sweeping through React docs.

Googling the right thing is a life-saving skill for a developer. If you mix up where to look for the answer, though, you’ll google how to do something in React when the “right thing” should include Javascript.

This situation can be pretty frustrating to a novice. It makes the entire learning process more complicated than it ought to be. Especially so for React, considering how it demands you to adopt a unique way of thinking for solving problems.

You don’t need to learn everything about Javascript

Yes, having Javascript knowledge is important for learning React. However, it doesn’t mean you have to know everything about it before moving forward. Having some Javascript experience is enough to ensure a smooth transition to React. But where do you draw this line?

The essentials

The parts that you absolutely cannot skip over are the basics of programming and frontend development. If you haven’t had any exposure to these two topics, even in another programming language, you must learn them through Javascript before considering React.

Here’s a list of concepts that falls into this category.

• Control structures (conditional statements and loops)
• Primitive data types (number, string, boolean, undefined, null, etc.)
• Composite data types (object, array, map, function, etc.)
• Functions and argument passing
• Object Oriented Programming concepts like classes, class functions and variables, constructors, and inheritance
• Document Object Model (DOM)
• How Javascripts manipulate the DOM
• How HTML, CSS, and Javascript come together to build dynamic web pages

After the essentials

Once you’ve understood the essentials, you can turn to more Javascript-specific concepts and syntax that show up so often with React. This includes:

• Event listeners (on click, on hover, on key press, etc.)
• Module imports and exports
• Difference between let, const, and var keywords
• Callbacks, promises, and async/await
• Exception handling
• Using the Fetch API to make API calls
• Important array functions like map, filter, and reduce.
• Important string functions like split, join, and slice.
• Arrow functions
• Type casting Javascript variables
• Closures
• Using call, apply, and bind with functions
• Object and array destructuring
• Rest and spread operators

The list looks like a lot. It contains many concepts most Javascript beginners haven’t even heard of. The good news, though, is that you don’t have to master all of them before starting React.

If you have a solid grasp of half of them, it puts you in a position to recognize between Javascript and React most of the time. That’s always a good enough place to take your first steps towards learning React.

But does reaching this point mean you no longer have to learn Javascript? Absolutely, no.

Learning Javascript and React can happen parallelly

Starting React is not the end of your Javascript learning attempt. Instead, it joins the two learning paths into something that runs parallel to each other.

As you gain more experience adding new features to a website with React, you learn more about different Javascript concepts applied in practice. This Javascript knowledge, in turn, allows you to be more daring and experimental with frontend development.

It’ll allow you to become familiar with the concepts you left out from the previous list after a while. And it’ll bring your Javascript and React learning journey full circle in the end.

Final thoughts

How much Javascript is needed to learn React is a question that runs through the mind of anyone coming to React from a different background. But it’s not a question that allows you to draw a hard line and point out, “This is where you should be before starting React.”

However, if you learn enough Javascript to tell what’s React and what’s Javascript apart, you’ll be in an optimal place to begin a transition to React. This “enough Javascript” includes the programming and web development basics and a bit of Javascript-specific concepts.

From that point onwards, learning React also gives you a way to master Javascript as you try to improve as a frontend developer.