That you can't tackle React before you've learned JavaScvript is an... universally accepted truth. But how much of it more precisely? How much JavaScript do you need to know before learning React.js? Is a reasonable grasp of the fundamentals enough or should you be able to... write your components from scratch?

Is “having a clue” about the JavaScript syntax more than enough for jumping into a JavaScript library like React? Or it is necessary to dive way deeper into JS? To learn all about the DOM, to gain a good grasp of the object-oriented and functional programming concepts and so on?

Learn to walk before you run...

Well, let me give you some clues here! So you should prepare your “battle plan” for “conquering” key JavaScript aspects before you actually dive into your first React tutorial.

A list, in fact, including 7 concepts that you should focus on along your roadmap to learning JavaScript (before learning React.js):

 

1. But First: Why Would You Want to Learn React.js in the First Place?

Mostly because it enables you to “mix and match” and to reuse simple pieces of functionality throughout your React web app.

There's no point in hiding that it does challenge you with a steeper learning curve, compared to other libraries. And that you might also get a bit discouraged, at first, by the need to write JSX.

Yet, once you're comfortable with it, the convenience of its reusable components will make up for all the time that you will have invested in learning its “wheels within wheels”.

And where do you add that:

 

1. it's a JavaScript library created and actively maintained by Facebook itself
2. it's backed up by a striving open-source community
    

2. Master the Fundamentals of JavaScript Syntax, First Things First

And I feel like repeating myself:

Learn to walk before you run!

React developers will seek to leverage the newest, the very best of JavaScript features. So, trying to “compete” with them, to make your React app stand out, by mimicking that you do grasp the fundamentals of JS, won't get you too far too soon.

You'd better step back and learn plain, vanilla JavaScript before you jump straight to the latest features.

For a “learn as you go” strategy won't turn out to be very productive. It will only widen those holes in your knowledge of Javascript and make assimilating any new feature twice as challenging.

So, if you're still confused by concepts such as:

 

• how to access an object 
• what JavaScript primitive types are
• what the falsy values are
• key concepts of JavaScript: arrays, functions, objects
   

… then it's time to invest time in getting a good grasp of the basic principles of JavaScript before learning React.js.

Once you have, it's not just React, but other frameworks, too (although React is a library) — Vue.js or Angular — that you'll be able to learn, within weeks.

 

3. Understand JavaScript “This”

There's no way around it:

 

You must gain a full understanding of how to properly use “this” when writing code in JavaScript.

For, if somehow you've managed to put this aspect at the back of your “TO Do” list, you can't postpone it any longer  now, when you're decided to learn React.js.

You'll be using it more often that you may like it when building web apps in React.

So, after you've learned/reviewed your fundamentals in JavaScript, get to know how “this” works.

 

4. Learn About the ES2015 JavaScript Features

You can still make it without them. You can build your React web apps without knowing any of these features.

Yet, you can't expect to get up to speed on React if you skip the latest changes in JavaScript. 

And speaking of these features, here's a shortlist including those that you should explore first, before learning React.js:

 

• let

• arow functions

• const

• rest and spread

• object destructuring

• object.assign

• class syntax
  
  

5. Learn to Solve Problems in JavaScript Before Learning React.js

You might get away with developing your first React web app by relying solely on tutorials, by applying specific patterns found in certain courses.

Yet, don't expect those tutorials to be of any help when it's a serious JavaScript coding challenge that you'll bump into!

My point here: be both a hard-working and a clever JavaScript student and learn to solve problems in JavaScript before learning React (or any other view framework)! 

 

6. Understand How the DOM Works: Learn How to Properly Manipulate It 

Learning the underlying mechanics of the DOM before learning React.js is a MUST-DO!

For, after all, it's React that makes the most of the Virtual DOM, right? And you can't possibly jump to the virtual one if you don't have a deep knowledge of the “real” one.

So, do take some time to learn all about:

 

• the different methods that the DOM provides you with.
• traversing the DOM
• adding/removing listeners
• selecting elements
• changing classes and styles
• adding/removing things from the DOM
   

And while at this stage, challenge yourself with some practice tests, as well:

 

• try making a menu show up once a button gets clicked on
• try creating some... accordions, for instance
   

From a “copy-paste” level, do your best to reach the level where you're able to write your own components from scratch.

And strive to learn all about the very process taking place “under the hood” as you do that!

 

7. Learn About Object-Oriented Programming

Since fundamental OOP concepts like abstraction and encapsulation fit perfectly into the React app development process, it becomes crucial for you, too, to... explore them!

And practice is always the most effective way of learning. How about trying to design the code of your new React app the... OOP way and thus familiarizing yourself with it?

Note: before learning React.js you should consider learning how querying APIs from Twitter or/and Github works.

 

8. Explore the Concepts of Functional Programming

Immutability (“immutable data”) and pure functions! These are the functional programming concepts that you should try and get a good grasp of before learning React.js.

Speaking of which, “immutability” is a widely “exploited” concept in React:

 

• all React props are immutable — they can no longer be changed once created
• the state, too, is considered immutable; it should be updated exclusively by using the React setState function 
   

9. You Take It from Here...

“How much JavaScript before React?” comes down to:

“How much of any language do you need to master before jumping into a framework/library that depends on it?”

You don't need to speak fluently in JavaScript before learning React.js! Yet, you should still make this your goal if it's high performant, unique web apps that you want to develop in React.

And not just... apps.

As a starting point, I strongly recommend you Facebook's documentation. Then, feel free to complete it with curated learning resources for each one of the 7 concepts presented here.

Next, start making your first React app and remember to apply all the new practices you've learned so you can internalize all those underlying mechanics. Happy learning, happy coding!

---