3 Must-learn JavaScript Concepts to Master Before Learning Reactby@vladmihet
461 reads
461 reads

3 Must-learn JavaScript Concepts to Master Before Learning React

by Vlad MihetMarch 26th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Jumping on learning React is easy, but you'll hit your head hardly later on if you are not yet familiar with these 4 key concepts detailed in this article.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - 3 Must-learn JavaScript Concepts to Master Before Learning React
Vlad Mihet HackerNoon profile picture

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:

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]


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.


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