reactjs / react-magic

Automatically AJAXify plain HTML with the power of React. It's magic!
Other
947 stars 100 forks source link

[HtmlToJsx] View logic? F.e., how do we loop through items in an HTML view? #137

Open trusktr opened 7 years ago

trusktr commented 7 years ago

The example at http://magic.reactjs.net/htmltojsx.htm is very simple, it just converts static HTML to static JSX.

But that's not very useful on it's own.

How would one write HTML that can loop through a set of items, for example? I'm talking about things like ng-repeat in Angular, or v-for in Vue.

Is there some way to do this? This would be super helpful, because it means a design team could be responsible for owning HTML/CSS, and developers can update the same components with view logic. And HTML/CSS widget library would ship with compiled (or with compilable) templates that are easily usable in React, without React developers having to go and manually copy/pasting HTML/CSS in a way that doesn't scale.

trusktr commented 7 years ago

If there isn't such a feature, maybe you can detect JS, and not escape it? f.e.

<div>
  {items.map(i =>
    <div>name: {item.name}</div>
  )}
</div>

and for example if developers take care in writing simple JS on separate lines, then it can at least be somewhat easy for designers to wade over logic and do their design work.

Here's the Vue version, which is easier for a designer to work with:

<div>
    <div v-for="item in items">name: {{item.name}}</div>
</div>

because the logic doesn't affect the markup's HTML structure so much.

Daniel15 commented 7 years ago

It doesn't support anything advanced at the moment. Pull requests are appreciated if you want to implement something.