Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (retired) Stateful Components Understanding State

Ari Misha
Ari Misha
19,323 Points
Posted by Ari Misha
Ari Misha
19,323 Points

ES5 vs ES6 syntax

After so much research, i finally noticed that we're using ES5 syntax in treehouse videos. But everytime i visit React's official doc pages , all i find is ES6 syntax. I mean there is so much difference in ES5 vs ES6 syntax and its getting hard to wrap my head around it coz ES5 has different style of writing the same code as compared to ES6 , even methods are so much different. I mean why is that? Shouldnt treehouse follow the latest syntax as well? If someone can gimme tips and tricks or cheatsheets about how to wrap my head around these both syntax in React, i'd really appreciate it.

There is also a follow up question about Babeljs. Even though we're using ES5, why do we need Babeljs ?

Thank you!

~ Ari

gevuong
gevuong
2,377 Points

this document helped me in understanding ES5 vs ES6 syntax in React when creating a component class. This won't answer all your questions, but I hope this helps a little.
https://reactjs.org/docs/react-without-es6.html

3 Answers

Moe Machef
PLUS
Moe Machef
Courses Plus Student 5,514 Points
Moe Machef
Moe Machef
Courses Plus Student 5,514 Points

ES6/ECMASCRIPT2015 Adds on ES5 Some Higher level data structures like Classes, Sets, Maps, It Add on Some Useful Functionalities that present in other languages like C++, C# and Python and also Add on some syntactical sugar to Javascript like Arrow functions. Before I started React, I studied ES6 for sometime, I think it helped alot understanding react specially classes (React uses class components), arrow functions, const/let, Enhanced Object Literals and so on, since all new courses and tutorials using ES6.

Carlos Braga
Carlos Braga
13,587 Points
Carlos Braga
Carlos Braga
13,587 Points

ES6 Syntax for Counter

class Counter extends React.Component {
  constructor() {
    super();

    this.state =  {
      score: 0
    }
  }

  render() {
    return (
      <div className="counter">
        <button className="counter-action decrement"> - </button>
        <div className="counter-score">{this.state.score}</div>
        <button className="counter-action increment"> + </button>
      </div>
    );
  }
}
Anthony Albertorio
Anthony Albertorio
22,624 Points
Anthony Albertorio
Anthony Albertorio
22,624 Points

You can check out The ES6 course in Treehouse. See my notes on repl.it: https://repl.it/@tesla809/TeamTreehouse-Getting-Started-with-ES2015-course

Also this instructor is pretty good: https://www.youtube.com/watch?v=CozSF5abcTA

This guy seems to be very good: https://www.youtube.com/watch?v=IEf1KAcK6A8

You can also check out the MDN documentation:

Hope this helps.