5 JS Concepts you should know before Learning React
Tags: javascript, react, beginners, tutorial
Published: 2022-09-06 18:41:36


Reactjs is by far one of the most popular javascript frameworks to learn in 2022, but for you to learn Reactjs(or any other JS framework) you need the following prerequisites. The basic ones are HTML, CSS, and JS(obviously) but in this article, we are going to go one step further and look at what you exactly need to know in Javascript to grasp Reactjs properly, easily, and efficiently.

### 1. Array Methods
Arrays are one of the most important ways of storing data in javascript; hence there are so many array methods. In React,(or any javascript framework) arrays methods are used all time, knowing them earlier will give you a strong foundation in Javascript and React. Array methods you should know:

1. The map Array method -- very common
2. The filter Array method -- very common
3. The find Array method
4. The reduce Array method

Do not worry if you do not know all these array methods. Check out [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) to help out.

### 2. Async Javascript and promises
This one is also equally important. In React(or any other javascript framework), you may be required to make requests to a server and that's where async Javascript comes in. Make sure to learn async and await, which is just a new syntax (ES8) that makes writing async javascript easier and cleaner.

Helpful articles to learn Async Javascript
1. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
2. [geeksforgeeks](https://www.geeksforgeeks.org/async-await-function-in-javascript/)
or try out this nice video [series](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jx2TTZk3IGWKSbtugYdrlu)

### 3. Proper Understanding of Destructing
This is used a lot in React for things like hooks and etc. Destructing is just basically a way to unpack values from arrays into distinct variables. Consider this example:

```javascript
//Array destructing
const numbers = [1,2]
const [a,b] = numbers;
console.log(a)
// expected output:1
console.log(b)
// expected output:2
//Object destructing
const numbers = {a:1,b:2}
const {a,b} = numbers;
console.log(a)
// expected output:1
console.log(b)
// expected output:2
``` 
In array destructing, what happens was that we made an array of numbers and destructed the values into the variables a and b, and the same is true for object destructing. That was a brief and basic tutorial to destructing.

### 4. Functions
You might be reading this and thinking "I already know functions".Functions are way more complicated than you think, but for you to learn React you do not need a crazy knowledge of functions. Make sure you understand arrow functions **properly** because they are used a lot. If you don't, check out this MDN post to help you [out](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)

### 5. ESM Modules
This is not that important but it is still worth learning. ESM Modules is just a cleaner and easier way of importing your files and other stuff in your Javascript apps. ESM Modules is available to vanilla javascript; so it is not special to any javascript framework.

### Conclusion
Those are the concepts that I recommend you learn before learning any javascript framework in my opinion. If you enjoyed it, please leave a reaction, follow me for more, and support [me](https://buymeacoffee/alex03) if possible. Thank you for reading!