diff --git a/cms/static/js/features_jsx/studio/index.jsx b/cms/static/js/features_jsx/studio/CourseOrLibraryListing.jsx
similarity index 66%
rename from cms/static/js/features_jsx/studio/index.jsx
rename to cms/static/js/features_jsx/studio/CourseOrLibraryListing.jsx
index 0ba7b2d705..ef925419ef 100644
--- a/cms/static/js/features_jsx/studio/index.jsx
+++ b/cms/static/js/features_jsx/studio/CourseOrLibraryListing.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-function CourseOrLibraryListing(props) {
+export function CourseOrLibraryListing(props) {
   const allowReruns = props.allowReruns;
   const linkClass = props.linkClass;
   const idBase = props.idBase;
@@ -75,57 +75,3 @@ CourseOrLibraryListing.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   linkClass: PropTypes.string.isRequired,
 };
-
-export class StudioCourseIndex {
-  constructor(selector, context, allowReruns) {
-    // The HTML element is only conditionally shown, based on number of courses.
-    const element = document.querySelector(selector);
-    if (element) {
-      ReactDOM.render(
-        <CourseOrLibraryListing
-          items={context}
-          linkClass="course-link"
-          idBase="course"
-          allowReruns={allowReruns}
-        />,
-        element,
-      );
-    }
-  }
-}
-
-export class StudioArchivedIndex {
-  constructor(selector, context, allowReruns) {
-    // The HTML element is only conditionally shown, based on number of archived courses.
-    const element = document.querySelector(selector);
-    if (element) {
-      ReactDOM.render(
-        <CourseOrLibraryListing
-          items={context}
-          linkClass="course-link"
-          idBase="archived"
-          allowReruns={allowReruns}
-        />,
-        element,
-      );
-    }
-  }
-}
-
-export class StudioLibraryIndex {
-  constructor(selector, context) {
-    // The HTML element is only conditionally shown, based on number of libraries.
-    const element = document.querySelector(selector);
-    if (element) {
-      ReactDOM.render(
-        <CourseOrLibraryListing
-          items={context}
-          linkClass="library-link"
-          idBase="library"
-          allowReruns={false}
-        />,
-        document.querySelector(selector),
-      );
-    }
-  }
-}
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 7a81afdfdb..ff2b595167 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -324,7 +324,18 @@ from openedx.core.djangolib.js_utils import (
       % endif
 
       %if len(courses) > 0 or optimization_enabled:
-      <div class="courses courses-tab react-course-listing active"></div>
+      <div class="courses courses-tab react-course-listing active">
+        ${static.renderReact(
+          component="CourseOrLibraryListing",
+          id="react-course-listing",
+          props={
+            'items': sorted(courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else ''),
+            'linkClass': 'course-link',
+            'idBase': 'course',
+            'allowReruns': allow_course_reruns and rerun_creator_status and course_creator_status=='granted'
+          }
+        )}
+      </div>
 
       %else:
       <div class="notice notice-incontext notice-instruction notice-instruction-nocourses list-notices courses-tab active">
@@ -442,11 +453,33 @@ from openedx.core.djangolib.js_utils import (
       % endif
 
       %if archived_courses:
-      <div class="archived-courses react-archived-course-listing archived-courses-tab"></div>
+      <div class="archived-courses react-archived-course-listing archived-courses-tab">
+        ${static.renderReact(
+          component="CourseOrLibraryListing",
+          id="react-archived-course-listing",
+          props={
+            'items': sorted(archived_courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else ''),
+            'linkClass': 'course-link',
+            'idBase': 'archived',
+            'allowReruns': allow_course_reruns and rerun_creator_status and course_creator_status=='granted'
+          }
+        )}
+      </div>
       %endif
 
       %if len(libraries) > 0 or optimization_enabled:
-      <div class="libraries react-library-listing libraries-tab"></div>
+      <div class="libraries react-library-listing libraries-tab">
+        ${static.renderReact(
+          component="CourseOrLibraryListing",
+          id="react-library-listing",
+          props={
+            'items': sorted(libraries, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else ''),
+            'linkClass': 'library-link',
+            'idBase': 'library',
+            'allowReruns': allow_course_reruns and rerun_creator_status and course_creator_status=='granted'
+          }
+        )}
+      </div>
 
       %else:
       <div class="notice notice-incontext notice-instruction notice-instruction-nocourses list-notices libraries-tab">
@@ -552,22 +585,4 @@ from openedx.core.djangolib.js_utils import (
 
   %endif
 </div>
-
-<%static:webpack entry="StudioIndex">
-    var enableReruns = ${allow_course_reruns and rerun_creator_status and course_creator_status=='granted' | n, dump_js_escaped_json};
-    new StudioCourseIndex(
-        ".react-course-listing",
-        ${sorted(courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else '') | n, dump_js_escaped_json},
-        enableReruns
-    );
-    new StudioArchivedIndex(
-        ".react-archived-course-listing",
-        ${sorted(archived_courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else '') | n, dump_js_escaped_json},
-        enableReruns
-    );
-    new StudioLibraryIndex(
-        ".react-library-listing",
-        ${sorted(libraries, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else '') | n, dump_js_escaped_json}
-    );
-</%static:webpack>
 </%block>
diff --git a/webpack.common.config.js b/webpack.common.config.js
index 28acec7e60..5afbd2f9df 100644
--- a/webpack.common.config.js
+++ b/webpack.common.config.js
@@ -19,7 +19,7 @@ module.exports = {
         // Studio
         AssetsPage: './node_modules/@edx/studio-frontend/src/index.jsx',
         Import: './cms/static/js/features/import/factories/import.js',
-        StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',
+        CourseOrLibraryListing: './cms/static/js/features_jsx/studio/CourseOrLibraryListing.jsx',
         AccessibilityPage: './node_modules/@edx/studio-frontend/src/accessibilityIndex.jsx',
 
         // LMS