How to integrate React and XWiki?

Version 1.2 by Oana Florea on 2019/01/21

  • 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

{{/html}}

Get Connected