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!