Open trusktr opened 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.
It doesn't support anything advanced at the moment. Pull requests are appreciated if you want to implement something.
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, orv-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.