RFC: React Expressions with Explicit Generator Expression Semantics

[clemmy]

RFC: React Expressions with Explicit Generator Expression Semantics

For more background on this proposal, please refer to https://github.com/facebook/jsx/pull/98. In that thread, there was a lot of backlash for the implicit nature of the do-generator by unifying it with the current {} JSX expression syntax. This proposal makes it explicit by using the *{...} syntax for generator expressions. So all the old goodies will be kept:

<div>{ items.map(i => <li key={i.key} />) }</div> // expression

<div style={{ position: 'absolute' }} /> // object literal

// these still work!

But more adventurous users will be able to use the following syntax for generator expressions:

<div>*{ for (let item of items) yield item; }</div>
// loops!

The Generator Expressions proposal is here: https://github.com/sebmarkbage/ecmascript-generator-expression.

Try it out (CodePen Examples)

• early break
• odd/even
• nested loops
• fibonacci

Caveats

Strings in JSXText with a * immediately before a left brace will be parsed as a JSXGeneratorExpression.

<div>
  This is a paragraph* with some asterisk.
  *{explanation}
</div>