How to call a react deployed component in plain JavaScript (like a Partial View)

Question

I have developed some component in reactjs. Now I want to call this code in JavaScript.

I have deployed the react component at somewhere. Now I want to use in my JavaScript Code.

We can't use iframe. We want to place the reactjs component in div (quizid).

What I am trying is given below:

<div class="row clearfix">
    <div class="col-md-12" data-noedit data-module="quiz-module" data-module-desc="quiz" >
      <div id='quizid'>  
        </div>
     </div>
</div>
    <script>
            var docReady = function (fn) {
            var stateCheck = setInterval(function () {
            if (document.readyState !== 'complete') return;
            clearInterval(stateCheck);
            try { fn() } catch (e) { }
            }, 1);
            };
            docReady(function () {
            
             var xmlhttp = new XMLHttpRequest();
             xmlhttp.onreadystatechange = function() { 
             if (xmlhttp.readyState == XMLHttpRequest.DONE) {
             if (xmlhttp.status == 200) { debugger; 
             var parser = new DOMParser(); 
             var newNode = parser.parseFromString(xmlhttp.responseText, 'text/html');
             if(newNode && newNode.documentElement){ 
             document.getElementById('quizid').appendChild(newNode.documentElement);
             } 
            } else { 
            console.log("Status error: " + xmlhttp.status);
            }
            }
            };
            xmlhttp.open("GET", "http://phpstack-444580-2225309.cloudwaysapps.com/KitchenQuestionApp/", true);
            xmlhttp.send();            
            }); 
        </script>
        

In the above approach, whole html is coming in quizid div and display nothing.

I remembered, there was a Partial View term in Asp.Net MVC. Can we user something similar in it ?

The react component version is developed through (package.json)

{
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "homepage": "/KitchenQuestionApp/",
    "dependencies": {
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "bootstrap": "^4.6.0",
        "node-sass": "^4.14.1",
        "react": "^17.0.2",
        "react-bootstrap": "^1.6.1",
        "react-bootstrap-range-slider": "^2.0.2",
        "react-dom": "^17.0.2",
        "react-icons": "^4.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "react-slick": "^0.28.1",
        "slick-carousel": "^1.8.1",
        "smooth-scroll": "^16.1.3",
        "web-vitals": "^1.1.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}
  

Is there anyone who can proposed a good solution for it?

Answer 1

If you are trying to share the code between 2 repositories, I'd recommend to move the shared code into separate npm package and reuse it in both places, without fetching the scripts from another page.

So you will have 2 repositories with react application, and you will use the same npm package for the shared functionality.

If it's not your option there is a dirty hack: in your react application you check if the quizid container exists (it means scripts executing on the plain JS page) and try to mount there, otherwise you mount the app as you do now. And in your plain JS page you fetch scripts from another page as you do now.