Include html file in React

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.

↑