flexx_like_react.py

## Option 1 - strings for verbatim html, dicts for elements with attributes
class MyReactlikeWidget(ReactLike):

    name = event.StringProp('john', settable=True)
    
    def render(self):
        return ['greet: ',
                dict(type='b',
                     onclick=lambda:print('clicked!'),
                     innerHTML='hi ' + self.name),
                '<br><button onclick="alert(\'told you!\')">dont click me</button>',
                dict(type='button',
                     onclick=lambda:window.alert('told you'),
                     innerHTML='dont click me'),
                ]

## Option 2 - Element class to ease the spelling, second arg can be dict with args
class MyReactlikeWidget(ReactLike):

    name = event.StringProp('john', settable=True)
    
    def render(self):
        return [Element('span', 'greet: '),
                Element('b', dict(onclick=lambda:print('clicked')),
                        'hi ',
                        self.name),
                Element('br'),
                Element('span', '<button onclick="alert(\'told you!\')">dont click me</button>'),
                Element('button', dict(onclick=lambda:window.alert('told you')),
                        'dont click me'),
                ]

Resulting in something like:

Setting the name will re-render.

BTW, I added that button twice in two different ways to illustrate the difference between verbatim html and the more structured syntax. I think it makes sense to support verbatim html at the least. The question is more how to let users write more structured dom structures.

BTW: at the moment the widget will recreate the DOM nodes. But eventually it could apply more of a diff approach for efficiency.

This is awesome! I really like the second example!

Besides more structure (nesting widgets?) it would be cool to also extend the example with an input box that can be used to update self.name. That would complete the unidirectional feedback loop touted by react-likes.