userdashboard: add skeleton of react component

adhocracy-plus/assets/js/app.js

@@ -24,6 +24,7 @@ import * as ReactDocuments from '../../../apps/documents/assets/react_documents.
 import * as ReactPolls from '../../../apps/polls/assets/react_polls.jsx'
 import * as ReactInteractiveEvents from 'a4_candy_interactive_events'
 import * as ReactLanguageChoice from '../../../apps/organisations/assets/react_language_choice.jsx'
+import * as ReactModerationProjects from 'a4_candy_userdashboard/react_moderation_projects.jsx'
 
 function init () {
   ReactWidget.initialise('a4', 'comment', ReactComments.renderComment)
@@ -39,6 +40,8 @@ function init () {
   ReactWidget.initialise('aplus', 'questions', ReactInteractiveEvents.renderLiveQuestions)
   ReactWidget.initialise('aplus', 'present', ReactInteractiveEvents.renderLiveQuestionsPresent)
 
+  ReactWidget.initialise('aplus', 'moderation_projects', ReactModerationProjects.renderModerationProjects)
+
   ReactWidget.initialise('euth', 'language-choice', ReactLanguageChoice.renderLanguageChoice)
 
   $('.timeline-carousel__item').slick({

apps/userdashboard/assets/js/a4_candy_userdashboard/react_moderation_projects.jsx

@@ -0,0 +1,22 @@
+var React = require('react')
+var ReactDOM = require('react-dom')
+
+class ModerationProjects extends React.Component {
+  render () {
+    return (
+      <div className="row mb-2">
+        <div className="col-12">
+          <h2>Projects</h2>
+          <span>project</span>
+        </div>
+      </div>
+    )
+  }
+}
+
+module.exports.renderModerationProjects = function (el) {
+  ReactDOM.render(
+    <ModerationProjects />,
+    el
+  )
+}

apps/userdashboard/templates/a4_candy_userdashboard/userdashboard_moderation.html

@@ -1,3 +1,8 @@
 {% extends "a4_candy_userdashboard/base_userdashboard.html" %}
 
-{% block dashboard_content %}{% endblock %}
+{% block dashboard_content %}
+<div class=""
+     id=""
+     data-aplus-widget="moderation_projects" >
+</div>
+{% endblock %}