Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics (retired) Stateful Components Understanding State

Ari Misha
Ari Misha
19,286 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

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

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

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,587 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.