How can i use html file in react.js?

by

I have a react project where I used react-router-dom. Now I have an html file with script tags in it and I want to use it in react but I don’t know how to do it. I put the code of the html file below:

<!DOCTYPE html>
<html>
<head>
    <title>Grapheditor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="./styles/grapheditor.css">
    <script type="text/javascript">
        var urlParams = (function(url)
        {
            var result = new Object();
            var idx = url.lastIndexOf('?');
    
            if (idx > 0)
            {
                var params = url.substring(idx + 1).split('&');
                
                for (var i = 0; i < params.length; i++)
                {
                    idx = params[i].indexOf('=');
                    
                    if (idx > 0)
                    {
                        result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
                    }
                }
            }
            
            return result;
        })(window.location.href);
    
        // Default resources are included in grapheditor resources
        mxLoadResources = false;
    </script>
    <script type="text/javascript" src="./js/Init.js"></script>
    <script type="text/javascript" src="./deflate/pako.min.js"></script>
    <script type="text/javascript" src="./deflate//base64.js"></script>
    <script type="text/javascript" src="./jscolor/jscolor.js"></script>
    <script type="text/javascript" src="./sanitizer/sanitizer.min.js"></script>
    <script type="text/javascript" src="../../../mxClient.js"></script>
    <script type="text/javascript" src="./js/EditorUi.js"></script>
    <script type="text/javascript" src="./js/Editor.js"></script>
    <script type="text/javascript" src="./js/Sidebar.js"></script>
    <script type="text/javascript" src="./js/Graph.js"></script>
    <script type="text/javascript" src="./js/Format.js"></script>
    <script type="text/javascript" src="./js/Shapes.js"></script>
    <script type="text/javascript" src="./js/Actions.js"></script>
    <script type="text/javascript" src="./js/Menus.js"></script>
    <script type="text/javascript" src="./js/Toolbar.js"></script>
    <script type="text/javascript" src="./js/Dialogs.js"></script>
</head>
<body class="geEditor">
    <script type="text/javascript">
        // Extends EditorUi to update I/O action states based on availability of backend
        (function()
        {
            var editorUiInit = EditorUi.prototype.init;
            
            EditorUi.prototype.init = function()
            {
                editorUiInit.apply(this, arguments);
                this.actions.get('export').setEnabled(false);

                // Updates action states which require a backend
                if (!Editor.useLocalStorage)
                {
                    mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
                    {
                        var enabled = req.getStatus() != 404;
                        this.actions.get('open').setEnabled(enabled || Graph.fileSupport);
                        this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
                        this.actions.get('save').setEnabled(enabled);
                        this.actions.get('saveAs').setEnabled(enabled);
                        this.actions.get('export').setEnabled(enabled);
                    }));
                }
            };
            
            // Adds required resources (disables loading of fallback properties, this can only
            // be used if we know that all keys are defined in the language specific file)
            mxResources.loadDefaultBundle = false;
            var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
                mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

            // Fixes possible asynchronous requests
            mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
            {
                // Adds bundle text to resources
                mxResources.parse(xhr[0].getText());
                
                // Configures the default graph theme
                var themes = new Object();
                themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement(); 
                
                // Main
                new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
            }, function()
            {
                document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
            });
        })();
    </script>
    <script type="module" src="/src/pages/Mxgraph.jsx"></script>
</body>
</html>

And this is my routes:

import { Route, Routes as Switch } from "react-router-dom";
import Layout from "./layout";
import Mxgraph from "../pages/Mxgraph";

const Routes = () => {

  return (

    <Switch>
      <Route element={<Layout />}>
        <Route path="/" element={()=>{}} />
        <Route path="/diagram" element={<Mxgraph />} />
      </Route>
    </Switch>
  );
};
export default Routes;

And my Mxgraph component that need somehow use html file in it:

import React from 'react';

const Mxgraph = () => {
  return (
    <div>
      
    </div>
  );
};

export default Mxgraph;

I used dangerouslySetInnerHTML and the iframe tag but I got a lot of errors. If anyone knows, please help me.

  • are you asking how to include a javascript file for react.js?

    – 




  • Almost yes! When I tried to convert this file into a component or use it directly, I encountered a lot of problems with its script tags.

    – 

  • I don’t think React-Router is relevant here. Can you edit to clarify what exactly you are trying to accomplish?

    – 




  • where is the react.js located with respect to the root of your web app directory? the script tag should simply map to that file.

    – 




  • 1

    @ImanRh: What specifically are you trying to do then? Or, alternatively, what specifically did you try and how specifically did it fail?

    – 

Though it technically can be done, I would be very concerned that any HTML page with non-trivial JavaScript will not run cleanly inside a React app. The issue will come down to there being 2 different code bases messing around with the browser’s DOM, and one of those code bases is not doing it the “React way”…working with React’s virtual DOM, interacting with React’s globals, etc.

Rather than spend time trying to jam an HTML+JS page into a React app, I would suggest looking for a way to convert the HTML+JS functionality into React functionality. That HMTL page seems to be some type of editor. There are lots of editor components available as React components.

So maybe take a step back from “here is the engineering approach I want to take” and look at the broader “here is the (business? user?) requirement I am trying to satisfy” (which would NOT be “get HTML running in my React code”) 😁

Leave a Comment