How to integrate React and XWiki?
- 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:
- https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-search/xwiki-platform-search-ui/src/main/resources/XWiki/QuickSearchUIX.xml#L120, :
- another example:
https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-edit/xwiki-platform-edit-ui/src/main/resources/XWiki/InplaceEditing.xml#L326
// Code that depends on Bootstrap here (e.g. work with Bootstrap modals).
})