React.createClass versus extends React.Component and Prototypal Function issue

Question

In Jim Hoskins React Basics course, he uses the React.createClass function instead of ES6 class field syntax with extends React.Component.

I prefer the latter. It's my understanding that they both are functionally the same, but the second method is much easier to write / read for me.

Here is my Counter component:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      score: 0,
    };
  }

  incrementScore = (e) => {
    console.log('incrementscore', e);
  };

  render() {
    return(
      <div className="counter">
        <button className="counter-action decrement"> - </button>
        <div className="counter-score"> {this.state.score} </div>
        <button className="counter-action increment" onClick = {this.incrementScore}> + </button>
      </div>
    );
  }
}

The following console error is generated:

babel-browser.min.js:41 Uncaught SyntaxError: http://port-80-9c1rnzhf5l.treehouse-app.com/app.jsx: Unexpected token (39:17)
  37 |   }
  38 |   
> 39 |   incrementScore = (e) => {
     |                  ^
  40 |     console.log('incrementscore', e);
  41 |   };
  42 | 
    at Parser.pp.raise (babel-browser.min.js:41)
    at Parser.pp.unexpected (babel-browser.min.js:42)
    at Parser.pp.parseClassProperty (babel-browser.min.js:41)
    at Parser.parseClassProperty (babel-browser.min.js:42)
    at Parser.pp.parseClass (babel-browser.min.js:41)
    at Parser.pp.parseStatement (babel-browser.min.js:41)
    at Parser.parseStatement (babel-browser.min.js:42)
    at Parser.pp.parseTopLevel (babel-browser.min.js:41)
    at Parser.parse (babel-browser.min.js:41)
    at Object.parse (babel-browser.min.js:40)
pp.raise @ babel-browser.min.js:41
pp.unexpected @ babel-browser.min.js:42
pp.parseClassProperty @ babel-browser.min.js:41
(anonymous) @ babel-browser.min.js:42
pp.parseClass @ babel-browser.min.js:41
pp.parseStatement @ babel-browser.min.js:41
(anonymous) @ babel-browser.min.js:42
pp.parseTopLevel @ babel-browser.min.js:41
parse @ babel-browser.min.js:41
parse @ babel-browser.min.js:40
exports.default @ babel-browser.min.js:7
parse @ babel-browser.min.js:7
parseCode @ babel-browser.min.js:7
(anonymous) @ babel-browser.min.js:10
wrap @ babel-browser.min.js:7
transform @ babel-browser.min.js:10
transform.run @ babel-browser.min.js:4
exec @ babel-browser.min.js:4
(anonymous) @ babel-browser.min.js:4
xhr.onreadystatechange @ babel-browser.min.js:4
XMLHttpRequest.send (async)
transform.load @ babel-browser.min.js:4
run @ babel-browser.min.js:4
runScripts @ babel-browser.min.js:4

Here's a Snapshot

Useful Reference: https://toddmotto.com/react-create-class-versus-component/#proptypes-and-getdefaultprops

Answer 1 · 2017-11-12T21:13:32Z

November 12, 2017 9:13pm

Property initializers are a proposed feature for the next JavaScript standard. To use them you need a Babel plugin like stage-2 (or lower). These features are automatically configured by Create React App, which is why the syntax is common. I'm not sure offhand how to include it in the browser-side version of Babel but there are probably docs for it.

Otherwise you could fall back to manually binding in the constructor:

  constructor(props) {
    super(props);
    this.incrementScore = this.incrementScore.bind(this);
    this.state = {
      score: 0,
    };
  }

  incrementScore (e) {
    console.log('incrementscore', e);
 }

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Anderson

Matthew Anderson

React.createClass versus extends React.Component and Prototypal Function issue

1 Answer

Seth Kroger

Seth Kroger