ES6 before React?

Should I learn ES6 before learning React?

I think it would be a good idea to at least become familiar with ES6 before you dive into React.

The FreeCodeCamp beta curriculum has a section on ES6! Check it out!


I think it would be helpful.

You probably should become familiar with class syntax, arrow functions, destructuring assignment and the spread operator as they are all pretty common in react!

1 Like

IIRC Codeacademy’s React course will teach you some ES6 while it’s teaching you React. ES6 is pretty simple and if you see it enough times you’ll just naturally pick it up, even without technically learning it separately.

1 Like

Yeah, modern react uses a lot of basic ES6 features.

That being said, you don’t really need all of ES6 for react. I would say:

  • class - But just the bare bones. It will take just a second to figure out how React uses class.
  • object destructuring
  • arrow functions - This is a big one - they get used a lot on modern React.
  • spread and rest operators
  • enhanced object literals
  • string template literals - not so much because of React, but because they are popular with ES6 users

But I wouldn’t overthink it. Most of the stuff you will pick up pretty quickly. The biggest concern is arrow functions - they are being used all over, they are confusing to look at if you haven’t worked with them, and there are a few tiny differences with how a regular function works.

I would suggest spending 5 minutes with each of the above topics to get a basic idea (most are pretty easy), and maybe 30 minutes exploring arrow functions.

Of specific importance to React is how you pass props to an arrow function component, and that arrow function components don’t create this or have state. But that stuff won’t make much sense until you start doing React.

1 Like

Yes, absolutely. React is JavaScript. Learn the fundamentals before learning a library. The better you understand JavaScript the better you will be as a React developer. It’s not to say learn all of it but build a strong base.

1 Like

Not that simple. Maybe to get started, but there’s A LOT to learn.

1 Like

Not really.

The component structure and concepts behind the library doesn’t really require much prior knowledge of es6. At a fundamental level, there would be a few features from es6 you’ll be writing with the current version of React. However, putting the time in mastering es6 will serve you enormously not only in the long run, but when the project you’re working starts reaching a size which makes it complex.

Therefore, I would suggest learning it concurrently

1 Like

Well, yes, I mostly meant to get started. Parts of ES6 do go deep and complex but that’s partly because the prerequisite non-ES6 JavaScript knowledge for it is comparatively complicated as well.

1 Like

Personally, I’ve already stopped thinking of it as ‘es6’ - it’s all just javascript really. You probably need to know a bit about classes, arrow functions and the spread operator before reading the React docs.

1 Like

The React docs suggest you are familiar with es6 before getting started. You can always look up the syntax as you encounter it though. I’d get familiar with the way es6 fakes classes if you don’t come from a language that uses a class-based OOP paradigm.

1 Like

Thanks everyone for your help, I get it.

1 Like

I feel like you could almost dive into React and pick things up as you go along. Most of the ES6 I’ve seen used with React are things that you could google as you go - let, const, spread / rest operator, classes, destructuring, modules…

One thing I’d note is that arrow functions will allow you to access your components this object from inside the callback function of an event. It would be helpful to understand how using () => {} rather than function () {} makes this work. I mention this specifically because this was always causing me trouble when I started with React :wink:

1 Like

So the prerequisite for Learning react is es6 and the concepts you need to learn before any modern JavaScript framework are:
1-fundamentals of JavaScript including [conditionals, looping structures along with functions and events].
2-Loops for in and for of loops
3-map, filter, reduce.
4-Arrow functions, closure functions, iife functions.
5- Promises, fetch, async, await.
6-Very important modules.
7-Class and Objects.
Now you are good to go with it. It’s not sure but it’s possible that a JavaScript framework may disappear so the base is the JavaScript and Es6 can also do anything just any framework provides us the Component and state management So focus on your logic and also some on building blocks.
This link can help you further :
It’s not mine but found it good.