How to integrate React and XWiki?

Last modified by Camelia Andrei on 2020/04/24

  • Create a new wiki page and add this in its content (see also
    <div id="like_button_container"></div>
  • Edit the page with the object editor and add a JavaScriptExtension object with this content:
     paths: {
       'react': '[email protected]/umd/react.production.min',
       'react-dom': '[email protected]/umd/react-dom.production.min'

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

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

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

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

     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!


Thanks to mflorea for contributing the example. 

Created by Oana Florea on 2019/01/21

Get Connected