{{html}}
<div id="like_button_container"></div>
{{/html}}
  • Edit the page with the object editor and add a JavaScriptExtension object with this content:
require.config({
 paths: {
   'react': 'https://unpkg.com/react@16/umd/react.production.min',
   'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min'
 }
})

define('likeButton', ['react'], function(React) {
 'use strict';

 class LikeButton extends React.Component {
    constructor(props) {
     super(props);
      this.state = { liked: false };
    }

    render() {
     if (this.state.liked) {
       return 'You liked this.';
      }

     return React.createElement(
       'button',
        { onClick: () => this.setState({ liked: true }) },
       'Like'
      );
    }
  }

 return LikeButton;
});

require(['react', 'react-dom', 'likeButton'], function(React, ReactDOM, LikeButton) {
 const domContainer = document.querySelector('#like_button_container');
  ReactDOM.render(React.createElement(LikeButton), domContainer);
});
  • Set the JSX object to be loaded "On this page or on demand". That's it!

Result

 Thanks to mflorea for contributing the example. 
Created by Oana Florea on 2019/01/21
   

Get Connected