Why you don’t have to know ES6+ perfectly before learning React?

A lot of people say: you have to know JavaScript inside out before you start learning framework! First of all, NO – you don't have to. I will describe my start with React and what was the state of my knowledge when it comes to JavaScript.

Before you stop reading this article with a smile and the thought that you can start learning now even without basic knowledge, I have to stop you and inform that unfortunately, you should know of a few things. Some ES6 features are the cornerstone of the modern JavaScript syntax and lack of consciousness of them might bring you bad start, right?

So, what I knew before I started learning React?

• Good HTML and CSS understanding
• Flexbox and SCSS
• Node.js basics: Express.js, NPM commands, Gulp workflow and GIT basics
• Awareness of terms like: hoisting, closure and scope
• I’ve also made a few websites using HTML, CSS and vanilla JS like weather app and to-do list

Of course, you don't need to learn Express, Gulp, all NPM commands in order to start your learning. I got to know these things because I had been wanted to learn them one way or another. Then, I started improving my JS with ES6+ syntax. About three months later, when I ultimately decided to learn React, I know only basics of ES6+. What I mean writing basics? Here you are:

• Let, const keywords, why not to use var and why we can modify objects and arrays despite using the const keyword
• Template string instead of concatenating
• Rest and spread operator
• Array methods (forEach, map, filter, reduce, sort, findIndex, some, any) and a concept of higher order functions
• Arrow functions
• Promises and asynchronous JS with async/await. (also callbacks and promises)
• Classes (only theoretical knowledge)
• Array and objects destructuring (only theoretical knowledge)

And that’s all, nothing more. I didn't know ES6 modules, symbols, iterators, Maps and Sets, or Proxy. Why? Because except for ES6 modules these things almost never occur in natural React habitat. Also, I lack the practical use of destructuring and classes. Of course, I know of them but the only thing I didn't have was the practice. It could be a lot of things to learn for some of you but it's not. These things are the must-have before you think of learning this library. Why?

So, in 2021 functional components, hooks and context API underlies the world of React. It means you must know how to destructure props in arrow functions, syntax of different hooks like useState, default and named exports, imports, how to list through arrays using array methods and so on. In addition, different React libraries like to make good use of some ES6 features, for instance GraphQL or Styled-components use template strings mechanism and Redux-saga uses generators. So that’s the next argument about why you don't need to worry about all ES6 features before you jump into more complex libraries, all the more:

"learn new things only when it's necessary because, for example, you want to get to know new technology. Other knowledge - without practicing - is bound to leave your mind faster than you might think."

ES6 modules, classes, bind method, webpack configuration, prettier, ESList, Maps and Sets - I get to know these things only during the learning process which additionally gave me a lot of fun and I don't regret my decision at all.

So, my tip for you is: hold for horses, don't learn exaggeratingly every detail of ES6 because there is a possibility that you will forget about them without practical use and true-life examples. Get to know the core concepts that I named above and don't worry. If you won’t be able to understand specific parts of React, stop and back to the vanilla JS for a moment and try again. That's exactly how the learning process in programming looks like 😊 I'm keeping my fingers crossed for you!

Cya! ✌️