Can this be done with vanilla React?

[trusktr]

Maybe it's possible to create If, For, etc, components in React, without needing to extend JSX? Foe example,

<For items={someArray}>
  <div>...</div>
</For>

Then the For component would see thie child, and clone it for each item passed in to the items prop. It'd work without JSX. I can imagine the code to make that happen.

What are the pros/cons of introducing a compile step versus runtime components?

[trusktr]

A compile-step advantage I see is being able to convert each="item" into a variable reference, not possible with runtime.

[texttechne]

Actually there are a couple of projects which realize the conditional part as React component. But they are all confronted with the following problem:

<If condition={obj}>
    <div>{obj.name}<div>
</If>

The code inside the <If> statement would get evaluated nonetheless, even if obj is false or undefined. Hence the compilation step, which is the only elegant way to solve this.

Read also Why Transform. This reason should probably be made more prominent, like putting it into the intro section. So let's keep this issue open until it is better documented.

[texttechne]

Pros

• Conditionals are not flawed
• For statements with variable reference are made possible
• There's no penalty on the runtime performance
• It works exactly as JSX is supposed to work: Plain syntactic sugar

Cons

• Requires Babel (6)
• Penalty on build time performance

[texttechne]

Closing in favor of #39