如何在一个用JavaScript制作的简单HTML/CSS/JS代码编辑器中运行React.js？

ttcibm8c 于 5个月前发布在 Java

关注(0)|答案(1)|浏览(74)

我想创建一个小而最小的代码编辑器（在JavaScript中）来使用React.js。我从头开始创建代码编辑器。出于教育原因，我需要代码编辑器，仅用于免费课程网站中的简单在线练习。
x1c 0d1x的数据
我想得到this like w3schools.我创建了一个代码编辑器，读取HTML，CSS和JS代码，但当然它不读取React代码.我想尝试查看一个简单的预览只 Hello World！（没有import，function等）.如何让我的代码编辑器读取React代码？我知道，我可以使用现成的代码编辑器，但我想尝试从头开始创建一个考虑到我只需要他们在一个免费的课程网站教学练习。
联系我们

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

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

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>

字符串
中文（简体）

#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()

型

JavaScript

来源：https://stackoverflow.com/questions/77744381/how-can-i-run-react-js-in-a-simple-html-css-js-code-editor-made-in-javascript

1条答案

按热度按时间

jexiocij1#

我们需要使用像Babel这样的编译器来将JSX和TSX组件渲染成JS。
在本例中，我们可以使用babel standalone。
我用编辑器中的react代码创建了一个与html页面等效的变量，并将其加载到iframe中。
"我需要做几件事才能成功“
1.在react代码周围使用了<script data-plugins='transform-modules-umd' type='text/babel'>
1.将导入头替换为等效的CDN，如react和react-dom。
要运行代码，只需复制代码，将其粘贴到文本编辑器中，并将其保存为.html，然后在任何最近的浏览器中打开。

产品代码：

<html>
   <div id="htmlCode" contenteditable="true" oninput="showPreview()">
      import React from "react";
      import ReactDOM from "react-dom/client";
      function Hello(props) {
        return &lt;h1>Hello World!&lt;/h1>;
      };
      React.createElement('div', {id: "root"}, "root");
      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>
   <style>
      #htmlCode {
      width: 600px;
      height: 160px;
      padding: 10px;
      background-color: #444;
      color: white;
      font-size: 14px;
      font-family: monospace;
      white-space: pre;
      }
   </style>
   <script>
      //PREVIEW
      function showPreview() {
        // babel - JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into backwards-compatible JavaScript
        let headerTag = '<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></sc'+'ript>';
        const htmlCode = "<div id='root'></div>";

        // read the react component from UI
        let reactCode = document.getElementById("htmlCode").textContent;

        // react and react dom import command
        const react_import_cmd = 'import React from "react";';
        const react_dom_import_cmd = 'import ReactDOM from "react-dom/client";';

        // remove the import and add cdn alternative 
        if(reactCode.includes(react_import_cmd)) {
          reactCode = reactCode.replace(react_import_cmd, "");
          headerTag = headerTag + '<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></sc'+'ript>';
        }
        if(reactCode.includes(react_dom_import_cmd)) {
          reactCode = reactCode.replace(react_dom_import_cmd, "");
          headerTag = headerTag + '<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></sc'+'ript>';
        }
        
        // css tag code
        const cssCode = "<style>" + document.getElementsByTagName("style")[0].textContent + "</style>";
        
        // Add react code to script tag with babel type 
        const jsCode = "<script data-plugins='transform-modules-umd' type='text/babel'>"+reactCode+"</sc"+"ript>";
      
        var frame = document.getElementById("preview-window").contentWindow.document;
        document.getElementById("preview-window").srcdoc = htmlCode;
        frame.open();
        frame.write("<html>" + headerTag + "<body>" + htmlCode + "</body>" + cssCode + jsCode + "</html>");
        frame.close();
      }
      
      showPreview();
   </script>
</html>

字符串
这可以用作构建复杂用例的构建块。
似乎我不能预览这里的代码，因为一些安全警告（可能是iframe），所以附上一个截图. x1c 0d1x

赞(0）回复(0）举报 5个月前

我来回答

如何在一个用JavaScript制作的简单HTML/CSS/JS代码编辑器中运行React.js？

1条答案

相关问题

热门标签

最新问答