Prototype: React-enabled XBlocks

Background

See https://github.com/openedx/XBlock/issues/635

Goals

• On branches of edx-platform, frontend-app-learning, and any existing xblock:
  • Add a React-based student view to the XBlock.
  • Get it to render in the Learning MFE.
• Write up a recommendation for how this could be generalized for all XBlocks & all views (student, public, author, and studio) and implemented.

Suggested approach

Here's how I would do it, but that doesn't mean it's the only way it could be done!

Choose an XBlock, ideally one of the ones that is defined in its own respository. Make these changes:

• Add a student_view_data method, which will return a JSON representation of the block's student view. Example that exists in master today (it was used by alternative block frontends for the LabXChange project).
• In the same repo, create an NPM package containing a new student view as a React component named StudentView. The student_view_data should be expected to be passed in via the component's props.
• Publish the NPM package to a user account.
• Add a new class-level field to the XBlock:

  class SomeBlock(XBlock):
      react_views = "someblock/path/to/view/module.js"
  

  where "path/to/view/module.js" is replaced by a path that the Learning MFE can dynamically import(...) in order to load this block's StudentView component.

In edx-platform:

• Enhance the MFE Configuration API (defined in lms/djangoapps/mfe_config) to also return a dictionary of all "React-enabled" XBlocks, mapping from the XBlock tag to the React module path:

 {
     "someblock":  "someblock/path/to/view/module.js"
     ...
 }

This will allow the Learning MFE to dynamically discover the full list of React-enabled blocks.

In the Learning MFE:

• Install the new NPM package.
• Upon initialization, look at the list of React-enabled XBlocks returned by the MFE Config API. Load the StudentView of each block.
• In courseware, if a unit is comprised entirely of React-enabled blocks, then render each block's StudentView component instead of rendering the standard iframe to edx-platform.

Notes

See parent issue for more ideas and discussion.

Start with the parent issue 635 and the XBlock student_view_data example linked in the issue. Then inspect lms/djangoapps/mfe_config, the Learning MFE courseware path, and the XBlock React-enabled field described here. Done means a working prototype across the named branches plus a recommendation for generalizing React views across XBlock types and views.