3 Must-learn JavaScript Concepts to Master Before Learning React

After seeing the question of whether or not one is ready to learn React being asked countless times, I believe it might be helpful to have a clear understanding of what JavaScript is needed before learning React.

Having gone through the process of learning React before understanding the needed JavaScript, I struggled with not being able to distinguish between JavaScript-specific stuff and React-specific stuff. This proved to be quite a challenge in my development as a Front-End Dev.

With that said, let's get to the key concepts in JavaScript you should get familiar with before 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. In fact, you'll never see a React project lacking HoFs.

A higher-order function is a function that takes other function(s) as argument(s) and/or returns a function(s) as its result.

Notable examples are:

Array.prototype.map

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

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

Iterates 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 ( Syntax: 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

Objects are 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()

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.

You can check all of the available packages available here.

Final Word

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.

If you have enjoyed reading this article, you can also support me by buying me a coffee here.

Also Published here