如何在自制简易HTML/CSS/JS编辑器中运行React.js？

我要从零开发一个极简JavaScript代码编辑器，用于免费课程网站的React.js教学练习，目标是实现类似W3School的React预览功能。目前已经完成支持HTML、CSS、JS代码的编辑器，但无法解析React代码。想要实现仅包含简单Hello World的React代码预览（无需import、function等复杂语法），且不想使用现成编辑器，请问该如何改造现有编辑器使其支持React代码？

现有代码 #

HTML代码 #

<div id="htmlCode" contenteditable="true" oninput="showPreview()">import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props) {
  return &lt;h1&gt;Hello World!&lt;/h1&gt;;
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(&lt;Hello /&gt;);

  </div>
    
    <h3>PREVIEW</h3>
    <div class="preview-area">
      <iframe id="preview-window"></iframe>
    </div>

CSS代码 #

#htmlCode {
  width: 456px;
  height: 165px;
  padding: 10px;
  background-color: #444;
  color: white;
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}

JS代码 #

//PREVIEW
function showPreview() {
    var htmlCode = document.getElementById("htmlCode").innerText;
  
    var cssCode =
    "<style>" + document.getElementById("cssCode").value + "</style>";
    var jsCode =
    "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";
    
    var frame = document.getElementById("preview-window").contentWindow.document;
    document.getElementById("preview-window").srcdoc = htmlCode;
    frame.open();
    frame.write(htmlCode + cssCode + jsCode);
    frame.write(editor);
    frame.close();
  }
  
  showPreview()

1. 自动引入依赖资源 #

浏览器无法直接识别React语法和JSX，需要在预览iframe中自动注入React、ReactDOM的CDN包，以及用于转译JSX的Babel脚本，无需用户手动写import语句。

2. 简化用户输入逻辑 #

让用户只需要编写纯JSX内容（比如<h1>Hello World!</h1>），编辑器自动帮用户补全React渲染的核心逻辑（创建根节点、调用root.render），不需要用户写组件定义、DOM节点获取等代码。

3. 改造预览函数处理JSX转译 #

将用户输入的JSX代码包裹在type="text/babel"的script标签中，让Babel自动完成JSX到原生JS的转译，确保浏览器能执行。

4. 调整初始编辑器内容 #

把原有的复杂代码替换成极简的JSX示例，降低用户学习门槛。

改造后的完整代码示例 #

改造后的HTML #

<div id="htmlCode" contenteditable="true" oninput="showPreview()">
<h1>Hello World!</h1>
</div>
    
<h3>PREVIEW</h3>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>
<!-- 保留原有的CSS输入框（如果需要） -->
<textarea id="cssCode" oninput="showPreview()" placeholder="输入CSS代码..."></textarea>

改造后的JS #

function showPreview() {
  // 获取用户输入的极简JSX代码
  const userJsx = document.getElementById("htmlCode").innerText;
  // 获取用户输入的CSS代码
  const userCss = document.getElementById("cssCode").value;
  
  // 构造预览iframe的完整内容
  const frameContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <style>${userCss}</style>
    </head>
    <body>
      <div id="root"></div>
      <script type="text/babel">
        // 自动补全React渲染逻辑
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(${userJsx});
      </script>
    </body>
    </html>
  `;
  
  const frame = document.getElementById("preview-window").contentWindow.document;
  frame.open();
  frame.write(frameContent);
  frame.close();
}

// 页面加载时初始化预览
showPreview();

额外优化说明 #

• 若用户需要渲染多个JSX元素，可提示用空标签<>包裹，比如<><h1>Hello</h1><p>React</p></>
• 保留原有CSS输入功能，样式会直接作用于预览页面
• 如果需要支持简单的JS逻辑，可让用户在JSX中直接写表达式（比如<h1>{2+3}</h1>），Babel会自动处理

内容的提问来源于stack exchange，提问作者Nodigap