If you want to include static html in ReactJS. You need to use html-loader plugin if you are using webpack to serve your react code.
First of all you need to install html-loader plugin. Open your terminal and run following command:
npm install --save-dev html-loader
Then open your webpack configuration file and add following code:
{
modules: {
loaders: [
{ test: /\.html$/, loader: 'html-loader' }
]
}
}
Now, in your react code do following changes:
var htmlContent = require('path/to/html/file.html');
// or you can also write
// import htmlContent from 'path/to/html/file.html');
export default function MyComponent() {
return (
<div dangerouslySetInnerHTML={ {__html: htmlContent} } />
);
}
That is it. Now you can use static html files to load your html files in react.