跳过功能关键字会引发语法错误

Question

This example doesn't work:

var App = React.createClass({
  render() { 
    return (
      <div>
    Hello World  </div>
    )
  }
});

I compile jsx into js on the client side and the browser throws the error,

Uncaught SyntaxError: Unexpected token (

This example works:

    var App = React.createClass({
      render: function() {    
    return (
      <div>
    Hello World  </div>
    )
   }       })

So, how does react-router tutorial work without function keyword?

Answer 1

So, how does react-router tutorial work without function keyword?

This is a relatively new thing, being added as part of ES6 (ECMAScript 6, the next version of "JavaScript.") You can create methods like that , basically, this code in ES6:

var obj = {
    foo() {
    }
};

is equivalent to this code in ES5 and before:

var obj = {
    foo: function foo() {
    }
};

(Modulo browser bugs around named function expressions, but no one uses IE8 or Safari 5 anymore, right? Right?)

The new syntax works on recent versions of Firefox and Chrome.

That said, I suspect it's just a minor error in that tutorial, as they only do it in a couple of places and use the older syntax in most places.