The article has been initially published here.

Introduction

After having seen this question being asked countless times, I believe it might be helpful to many folks out there to have a clear understanding of what’s needed to be known in JavaScript before rushing off to learn 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:

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

When you 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 dozen of them.

Basically, a higher-order function is a function that takes another function(s) as argument(s) , or returns 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.

I will soon write a more in-depth article regarding higher-order functions and how you can even create your own, so stay tuned for that.

You can subscribe to my newsletter here, so you’ll be notified every time I publish a new story 😉.

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 excellent 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

Objects are an essential built-in data structure you will likely use in any project.

You might want to get familiar with the following:

• 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 are working on, you will need to use some already-built functionality, and that’s where NPM modules come into play.

There are packages built by other developers or development teams that provide you with much pre-built functionality 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 want to do, for nearly any integration you may think of, etc.

You will need packages for more advanced uses when working with React, so getting familiar with it is essential.

You can see all the available packages here.

Summary

This article assumes a certain level of JS knowledge, so I included 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 to be ready to learn React.