feat: working react page with implementation of _render_react_page

[leangseu-edx]

TL;DR - React on ORA

What work?

• npm run start hot reload the change (still need to refresh the page manually)
• npm run build with production build
• all build are working for both lms and studio
• dynamic loading react component
• intl should also work

What not work?

• paragon styling mostly it got override from lms-course and lms-main which came from edx-platform. I don't expect to use it in a long while.
  • SOLVED: Added style disable flag feat: add flag to stop using default css edx-platform#32810
• A bit slower. This is an example implementation. It is still using mostly the existing code OpenAssessmentBlock specifically. Once we rewrite it, it should be faster.

What changed?

• openassessment/xblock/openassessmentblock.py:: _render_react_page that we will use to render react page.
• It takes 3 arguments page_name, props, on_mount_func
• page_name the react component/page .jsx that should locate in openassessment/xblock/static/js/src/react/. All of the .jsx file that create here will be parse accordingly.
• props are the property that will show up in the react component. We definitely need some clean up about how to lint props type later. Right now it is arbitrary.
• on_mount_func this is require at the moment because I am trying to piggy back on the existing behavior. Once we reimplement everything, we won't need to use this anymore.

How it work?

• When you invoke return self._render_react_page('oa_base', context_dict, on_mount_func='OpenAssessmentBlock')
• The method will use openassessment/templates/openassessmentblock/react_template.html as the template.
• And openassessment/xblock/static/js/src/react_base.js as default javascript file.
• Then RenderReact will import page openassessment/xblock/static/js/src/react/oa_base.jsx dynamically and render it. (if you look openassessment/xblock/static/js/src/react/oa_base.jsx and openassessment/templates/openassessmentblock/oa_base.html, the file should be almost identical. This will make updating the existing pattern much faster)
• RenderReact will parse the props correctly will onMount function to run in useEffect. We need this right now because OpenAssessmentBlock is quite complex to rewrite with limited time. But it should be possible in the future.

Reason

• The reason I go with path openassessment/xblock/static/js/src/react/ because I want to make sure future implementation of react will be simple. No need to worry about intl provider or reactdom rendering.
• I want to make sure we are not swaying too far from what we already have.

Future?

• migrate all of the existing .html to .jsx
• We should architecture the existing pattern a bit more. example: Component vs Page or just all the same. Do we need more entries point than just react_render
• How can we depreciate or remove opinionated styling from lms and studio that propagate to xblock and overwrite paragon?