Question 312438 in Html Question posted in
Some basic documentation can be found here.

JS: how can i run React Js in a simple html/css/js code editor made in Javascript?

I would like to create a small and minimal code editor (in Javascript) to use React Js. I’m creating the code editor from scratch. I will need the code editor for educational reasons, only for simple online exercises in a free course site.

enter image description here

I would like to get this like w3schools. I created a code editor that reads html, css and js code, but of course it doesn’t read React code. I would like to try to view the Previews of a simple only Hello World! (without import, function, etc.). How can I make my code editor read React code? I know, I could use ready-made code editors, but I would like to try to create one from scratch considering that i only need them for teaching exercises in a free course site.

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>;
}

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()
Tags:

2

Answers


  1. 0

    you can apply React to your project with CDN.

    Here is the URL: https://legacy.reactjs.org/docs/cdn-links.html

    Login or Signup to reply.
  2. 0

    We need to use a compiler like babel to render the jsx and tsx components into js.

    In this case, we can use babel standalone.

    I created a variable with code equivalent to a html page with the react code from the editor and loaded it to the iframe.

    I needed to do couple of things to make this work

    1. used <script data-plugins='transform-modules-umd' type='text/babel'> around the react code
    2. Replaced the import header with equivalent CDN like react and react-dom.

    To run the code, Just copy the code, paste it in a text editor and save it as .html and open in any recent browser.

    Code:

    <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>

    This can be used as a building block to build complex use cases.

    Seems like i cannot preview the code here because some security warning(probably iframe), So attaching a screenshot.
    Sample output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search