If you're looking to learn ReactJS or any other JavaScript Framework you should first know and understand the code and important javascript concepts otherwise, it will be harder for you to learn a framework.

React is a javascript framework that is used to build beautiful user interfaces and by building React components, written in javascript including the markup that is written is JSX, and in this article, I will show you the core concepts and methods that you will need to know before making the jump.

1. Callback Functions in JavaScript A callback function is a function that is performed after another function has completed its execution. It is typically supplied as an input into another function.

2. Promises in JavaScript As previously stated, a callback function is executed after the original function is executed. You may now begin to consider stacking so many callback functions on top of each other because you do not want a specific function to run until the parent function has finished running or a specific time has passed.

3. Map() in JavaScript One of the most often used methods is %[Array.map()], which allows you to iterate over an array and modify its elements using a callback function. The callback function will be run on each array element.

4. Filter() and Find() in JavaScript

   Filter()

   provides a new array depending on certain criteria. Unlike %[map()], it can alter the size of the new array, whereas find() returns just a single instance (this might be an object or item). If several matches exist, it returns the first match – otherwise, it returns undefined.

5. Find() The %[find()] method, like the %[filter()] method, iterates across the array looking for an instance/item that meets the specified condition. Once it finds it, it returns that specific array item and immediately terminates the loop. If no match is discovered, the function returns undefined.

6. Destructuring Arrays and Objects in JavaScript Destructuring is a JavaScript feature introduced in ES6 that allows for faster and simpler access to and unpacking of variables from arrays and objects.

7. Object destructuring Let’s now see how we could destructure an object – because in React you will be doing a lot of object restructuring.

8. Rest and Spread Operators in JavaScript JavaScript spread and rest operators use three dots %[....] The rest operator gathers or collects items – it puts the “rest” of some specific user-supplied values into a JavaScript array/object.

9. Spread operator The spread operator, as the name implies, is used to spread out array items. It gives us the ability to get a list of parameters from an array. The spread operator has a similar syntax to the rest operator, except it operates in the opposite direction.

10. Dynamic Object keys in JavaScript This enables us to add object keys using square bracket notation. This may not make sense to you right now, but as you continue learning React or begin working with teams, you may come across it.