(Breaking) Feature Request: Make JSX even more like JS

[kasperpeulen]

I think it is time to make JSX even more like JS and less like HTML. Consider the following JSX:

const name = "Kasper";
const message = <p>Hello, {name}!</p>;
const container = <div>{element}</div>;

What about writing it like this:

const name = "Kasper";
const message = <h1>"Hello, ${name}!"</h1>;
const container = <div>message</div>;

My main subjective reason is that it just looks more right to me. A more objective reason would be that you could introduce javascript comment syntax:

const name = "Kasper";
const message = <h1>"Hello, ${name}!"</h1>;
const container = ( 
  <div>
    // we currently only message the first name
    message
  </div>
);

Similar things could be done for jsx attributes. Instead of:

const element = <Counter count={0}/>;
const element2 = <img src={user.avatarUrl}/>;
const element3 = <div className="header"></div>

I would like it as:

const element = <Counter count=0/>;
const element2 = <img src=user.avatarUrl/>;
const element3 = <div className="header"/>;

Or even better, (I haven't put much thought in this):

const element = <Counter count: 0/>;
const element2 = <img src: user.avatarUrl/>;
const element3 = <div className: "header"/>;

More generally:

<Component
  bool: true,
  num: 1,
  string: "bar",
  expr: x + y,
  valueByPropName,
  ...spreadObject
/>

Inspiration comes from:
https://twitter.com/emilpersson/status/795640485683560449

[kasperpeulen]

Nevermind, should probably be in facebook/jsx.

[kasperpeulen]

Moved to:
facebook/jsx#68