After having seen this question being asked countless times, I believe it might be helpful to a lot of folks out there to have a clear understanding of what’s needed to be known in JavaScript concepts you need to know in order to get started with React

I, myself, have gone through the rough process of starting out using React before properly knowing JavaScript, and thus, not being able to make the difference between JavaScript-specific stuff and React-specific stuff, which proved to be quite an impediment in my development as a Front-End Dev.

So, with that said, let’s get to the key concepts in JavaScript you have to get familiar with before starting out learning React:

JavaScript concepts you need to know in order to get started with React

1. Built-in Array Higher Order Functions (HoF)

When you’ll start using React, you’ll quickly find yourself needing to use HoFs one way or the other, and you’ll never see a React project lacking at least a couple dozens of them.

Basically, a higher-order function is a function that takes another function(s) as argument(s) or return a function(s) as its result.

Notable examples are:

Array.prototype.map , which creates a new array populated with the results of calling a provided function on every element in the calling array.

E.g: ([1, 2, 3, 4]).map((arrayElm) => arrayElm * 2) will return [2, 4, 6, 8]

Array.prototype.filter , which creates a new array with all elements that pass the test implemented by the provided function.

E.g: ([1, 2, 3, 4]).filter((arrayElm) => arrayElm % 2 === 0) will return [2, 4]. It has filtered out all of the items where the arrayElm % 2 === 0 condition was falsy.

Array.prototype.forEach , which iterated over each element of the array, but this function doesn’t return anything as a result. It’s used purely for side effects.

E.g: ([1, 2, 3, 4]).forEach((arrayElm) => console.log(arrayElm)), which will only log to the console the elements of the array, but will return undefined.

2. Modern ES6 Syntax

• This includes concepts such as:
• Variable declarations using const / let
• import / export syntax for modules
• Arrow functions: const fn = () => {console.log('Modern ES6 Syntax');}
• Classes
• The new spread operator ( Syntax: ... )

You can check this awesome article from FreeCodeCamp to get more familiar with the new ES6 features: JavaScript ES6 — write less, do more, as well as the official MDN Docs, which is what I highly recommend you do.

3. Objects

An essential built-in data structure, which you’re likely to use in any project. You might want to get familiar with:

• Object destructuring ( const { x, y } = someObject )
• Object destructuring aliases ( const { x: newVarName, y: anotherNewVarName } = someObject )
• Object destructuring default values ( const { x = 5, y = 12 } = someObject )
• Dynamic object properties names ( const dynamicObjectKey = '☕️'; const newObject = { [dynamicObjectKey]: '🍰' })
• Objects’ methods such as: Object.keys() , Object.values() , Object.entries()

4. NPM Ecosystem

Whichever project you might be working on, you will find yourself needing to use some already-built functionality, and that’s where NPM modules come into play. There are packages built by other developers or other development teams that provide you with a lot of pre-built functionality which you might need in your project.

• An easier way to handle HTTP requests? -axios
• An easier way to deal with JS Dates? -date-fns
• Want to receive payments through Stripe? -stripe

There’s a package for almost everything you might want to do, for almost integration you might think of, etc. When working with React you will find yourself needing packages for more advanced uses, so getting familiar with it is essential.

Conclusion

This article assumes a certain level of JS knowledge, and as such, I decided to include slightly more advanced JS concepts that would make up the ladder to gaining enough knowledge to start learning React. I hope you have enjoyed reading this article, and more importantly, I hope it helped you get a clearer idea of what you could learn next in order to be ready to learn React.