5 JS Concepts you should know before Learning React

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 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
2. geeksforgeeks or try out this nice video series

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:

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

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 if possible. Thank you for reading!