How to integrate React and XWiki?

Version 7.1 by Camelia Andrei on 2020/04/24

  • Create a new wiki page and add this in its content (see also https://reactjs.org/docs/add-react-to-a-website.html):
    {{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

Information

Thanks to mflorea for contributing the example. 

Get Connected