React: how to load and render external html file?

Question

I building a small blog app using React and Redux. The blog show Posts page with title, author, tags and description of a post. When clicking on title or \"read more\" butt

Answer 1

While Chris's answer was good, some more digging was required to make it work. Here are the steps that you need to take:

Add html loader to your project:

npm i -D html-loader

Add the following rule to your webpack.config file:

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

Now you can import your html file as follow:

import React, { Component } from 'react';
import Page from './test.html';
var htmlDoc = {__html: Page};

export default class Doc extends Component {
  constructor(props){
    super(props);
  }

  render(){
     return (
)
}}