render CommentForm.js below existing form

lib/views/layout-growi/widget/comments.html

@@ -45,6 +45,7 @@
         </div>
       </div>
     </form>
+    <div id="page-comment-write"></div>
     <div id="page-comment-form-behavior"></div>
     {% endif %}
 

resource/js/app.js

@@ -14,6 +14,7 @@ import Page             from './components/Page';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
 import PageComments     from './components/PageComments';
+import CommentForm from './components/PageComment/CommentForm';
 import PageCommentFormBehavior from './components/PageCommentFormBehavior';
 import PageAttachment   from './components/PageAttachment';
 import SeenUserList     from './components/SeenUserList';
@@ -127,6 +128,12 @@ Object.keys(componentMappings).forEach((key) => {
   }
 });
 
+// render comment form
+const writeCommentElem = document.getElementById('page-comment-write');
+if (writeCommentElem) {
+  ReactDOM.render(<CommentForm />, writeCommentElem);
+}
+
 // render components with refs to another component
 const elem = document.getElementById('page-comment-form-behavior');
 if (elem) {

resource/js/components/PageComment/CommentForm.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ *
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ *
+ * @export
+ * @class Comment
+ * @extends {React.Component}
+ */
+export default class CommentForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      <h1>CommentForm.js</h1>
+    );
+  }
+}
+
+CommentForm.propTypes = {
+};