Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Prototype: React-enabled XBlocks

Đang mở
  • Có gì không ổn?
#634 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
18/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
python, react
Lĩnh vực
api, backend, documentation, frontend

Hướng nghiên cứu

Bắt đầu với issue cha 635 và ví dụ XBlock student_view_data được liên kết trong issue. Sau đó kiểm tra lms/djangoapps/mfe_config, đường dẫn courseware của Learning MFE và trường React-enabled của XBlock được mô tả ở đây. Hoàn thành nghĩa là có một prototype hoạt động trên các branch đã nêu, cùng với một đề xuất để khái quát hóa các React view trên các loại và view của XBlock.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
Python
Star
471
Fork
231
Merge trung bình
2 ngày 20 giờ
Pull request đã merge (30 ngày)
9

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của openedx/XBlock

Tất cả issue của openedx/XBlock

Issue tương tự

Thêm issue về Python

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.