JSX process in Custom Widget

[remkonoteboom]

I just commit an experimental feature which takes the javascript in a custom widget and process it as JSX.  

https://github.com/Southpaw-TACTIC/TACTI...20deb4ab7a

What I am trying to do is have the ability to use React within a TACTIC widget so it is easier and more familiar to build better interfaces.  While you could build a standalone React App and interact with TACTIC through the API (which is perfectly valid way to deploy), this will allow you to integrate React behavior inside TACTIC widgets in a single deployment.  This means that you can put in a component such as this:

Code:

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
 
  button_press = () => {
      this.setState( {liked: true} )
  }
 
 
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return (
      <div class="display: flex">
        <div class="button" onClick={ () => {this.button_press() } }
            className="btn btn-primary">Like</div>
      </div>
    );
  }
}
ReactDOM.render(React.createElement(LikeButton), bvr.src_el);

I won't get into too much detail in this post.  Suffice to say that this seems to work.  I will try building some real widgets with this and see if having hybrid TACTIC React widgets work well.