How to integrate React and XWiki?

Last modified by Simon Urli on 2024/10/29

  • 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

Bonus

Add styling using Bootstrap to the react components.

Bootstrap provides mostly CSS (class names that work when used along with a specific HTML structure) but it also has some JavaScript (behavior).

Bootstrap's CSS is loaded by the XWiki skin, so we can assume it's already available. We just need to use the Bootstrap CSS classes in the React component, making sure you produce the expected HTML structure, as indicated in their documentation : https://getbootstrap.com/docs/3.3/ .

For the JavaScript part, best is to declare the "bootstrap" module as a dependency of your React component. Ideally we should use RequireJS: https://requirejs.org/ , as this is what we use in XWiki to define JavaScript modules (AMD) and to declare the dependencies between them.
Here's an example:

require(['bootstrap'], function() {
// Code that depends on Bootstrap here (e.g. work with Bootstrap modals).
})

Thanks to mflorea for contributing the example. 

Get Connected