add an intert react app to lms view

openassessment/templates/openassessmentblock/oa_base.html

@@ -47,5 +47,7 @@ <h4 class="step__title">
         </div>
     </div>
     <div class="sr reader-feedback" aria-live="polite"></div>
+    <div id="openassessment-reactapp"></div>
+    <div id="openassessment-react-{{ block_location }}"></div>
 </div>
 {% endspaceless %}

openassessment/xblock/openassessmentblock.py

@@ -525,6 +525,7 @@ def student_view(self, context=None):  # pylint: disable=unused-argument
             "prompts_type": self.prompts_type,
             "rubric_assessments": ui_models,
             "show_staff_area": self.is_course_staff and not self.in_studio_preview,
+            "block_location": str(self.location),
         }
         template = get_template("openassessmentblock/oa_base.html")
         return self._create_fragment(template, context_dict, initialize_js_func='OpenAssessmentBlock')
@@ -629,7 +630,8 @@ def _create_fragment(self, template, context_dict, initialize_js_func, additiona
             "FILE_EXT_BLACK_LIST": self.FILE_EXT_BLACK_LIST,
             "FILE_TYPE_WHITE_LIST": self.white_listed_file_types,
             "MAXIMUM_FILE_UPLOAD_COUNT": self.MAX_FILES_COUNT,
-            "TEAM_ASSIGNMENT": self.is_team_assignment()
+            "TEAM_ASSIGNMENT": self.is_team_assignment(),
+            "XBLOCK_LOCATION": self.location
         }
         fragment.initialize_js(initialize_js_func, js_context_dict)
         return fragment

openassessment/xblock/static/js/src/lms/oa_base.js

@@ -10,6 +10,10 @@ import MessageView from './oa_message';
 import StaffAreaView from './oa_staff_area';
 import StudentTrainingView from './oa_training';
 import PeerView from './oa_peer';
+
+// react-specific
+import initReactView from './oa_react';
+
 /**
 Interface for student-facing views.
 
@@ -39,8 +43,10 @@ export class BaseView {
       this.runtime = runtime;
       this.element = element;
       this.server = server;
-      this.fileUploader = new FileUploader();
 
+      initReactView(runtime, element, data);
+
+      this.fileUploader = new FileUploader();
       this.responseView = new ResponseView(this.element, this.server, this.fileUploader, this, data);
       this.trainingView = new StudentTrainingView(this.element, this.server, this);
       this.selfView = new SelfView(this.element, this.server, this);

openassessment/xblock/static/js/src/lms/oa_react.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+
+export class App extends React.Component {
+  render() {
+    return (
+      <div className="webpack-react-app">
+        ORA REACT APP!
+      </div>
+    );
+  }
+}
+
+App.propTypes = {
+  data: PropTypes.object,
+};
+
+/* Javascript for webpack_xblock. */
+export class SimpleReactView {
+  constructor(runtime, element, data) {
+    this.runtime = runtime;
+    this.element = element;
+    this.data = data;
+    this.initializeReact = this.initializeReact.bind(this);
+    this.initializeReact();
+  }
+
+
+  initializeReact() {
+    console.log("Initialize React!");
+    const rootElement = document.getElementById(
+      `openassessment-react-${this.data.XBLOCK_LOCATION}`
+    );
+    console.log({
+      rootElement,
+      location: this.data.XBLOCK_LOCATION,
+      oraReactData: this.data
+    });
+    ReactDOM.render(
+      <div className="webpack-xblock-react-wrapper">
+        <App data={this.data}/>
+      </div>,
+      rootElement
+    )
+  }
+}
+
+export const initReactView = (runtime, element, data) => {
+  $(($) => {
+    const xblock = new SimpleReactView(runtime, element, data);
+  });
+}
+
+export default initReactView;

package.json

@@ -12,6 +12,9 @@
     "edx-ui-toolkit": "1.5.3",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.28",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "requirejs": "~2.3.2",
     "underscore": "^1.11.0"
   },