title: How to render a static html page in ReactJS?
body: <p>I am trying to render an html page in react. I have tried multiple solutions but still, I am getting an error. Yes I know there are many questions similar to this one but none of those solutions has worked for me. I am using reactjs as front-end and simply trying to show a static html page.</p>
  
  <p>html file is below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Ably WebRTC Video call Demo&lt;/title&gt;
  
      &lt;link
        rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
      /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdn.ably.io/lib/ably.min-1.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.1.2/simplepeer.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="ably-screenshare.js"&gt;&lt;/script&gt;
  
      &lt;script src="connection-helper.js"&gt;&lt;/script&gt;
  
      &lt;div class="container-fluid" style="margin-top: 5em;"&gt;
        &lt;div class="container" id="join"&gt;
          &lt;h4 id="online"&gt;Users online (0)&lt;/h4&gt;
  
          &lt;ul id="memberList"&gt;&lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;div class="container" id="call" style="display:none;"&gt;
          &lt;video width="320" height="240" id="local" controls&gt;&lt;/video&gt;
  
          &lt;video width="320" height="240" id="remote" controls&gt;&lt;/video&gt;
  
          &lt;button class="btn btn-xs btn-danger" onclick="handleEndCall()"&gt;
            End call
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
    &lt;style&gt;
      small {
        border-bottom: 2px solid black;
      }
  
      li {
        list-style: none;
      }
    &lt;/style&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the solution that I tried is </p>
  
  <pre><code>import React, { Component } from "react";
  var __html = require("./screen.html");
  var template = { __html: __html };
  
  class ScreenShare extends Component {
    render() {
      return (
        &lt;div className="screen-share"&gt;
          &lt;span dangerouslySetInnerHTML={template} /&gt;
        &lt;/div&gt;
      );
    }
  }
  export default ScreenShare;
  </code></pre>
  
  <p>Even using the above solution, I am getting this error</p>
  
  <pre><code>./src/components/screenShare/screen.html
  Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  | &lt;!DOCTYPE html&gt;
  | 
  | &lt;html&gt;
  </code></pre>
  
  <p>is there something wrong that I am doing? I know dangerouslySetInnerHTML is not the best way to solve the issue but I tried to change the above html code into react component and it didn't help. So I tried dangerouslySetInnerHTML to convert it but it is still giving error.</p>