Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Prototype: React-enabled XBlocks

未关闭
  • 哪里不对？
#634 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
18/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
python, react
领域
api, backend, documentation, frontend

调研方向

从父 issue 635 以及 issue 中链接的 XBlock student_view_data 示例开始。然后检查 lms/djangoapps/mfe_config、Learning MFE 的 courseware 路径，以及此处描述的 XBlock React-enabled 字段。完成的标准是在所列分支中实现一个可工作的原型，并提出一项关于跨 XBlock 类型和视图通用化 React 视图的建议。

由索引模型根据 Issue 内容生成。

描述

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.

主要语言
Python
星标
470
派生
231
平均合并
2 天 14 小时
30 天内合并 PR
7

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

openedx/XBlock 的其他 Issue

查看 openedx/XBlock 的全部 Issue

相似的 Issue

更多 Python Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。