Include HTML content without adding it in REACT classes

What you can do is what is known as a Stateless Component which is used to display HTML or Components that are children of other State Components and are created like this:

EDITED
I forgot to add import React from "react"

//Header.js

import React from 'react'

const Header = () => 
<header>
Soy Header
</header>

export default Header

if you are going to add props and logic to your component then

//Footer.js
import React from 'react'

const Footer = (props) => {
 if (!props.year) {
  return ( <footer>MiApp todos los derechos reservados 2017</footer>)
 } else {
  return (<footer>{'MiApp todos los derechos reservados ${props.year}'}</footer>
 }
}

export default Footer

And in the end you use them like any React component

//MiApp

import React, {Component} from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import {render} from 'react-dom'

class MiApp extends Component {
 render() {
  return (
   <Header/>
    <h1> La mejor App del mundo </h1>
   <Footer year="2017"/>
  )
 }
}

render(<MiApp/>; document.querySelector('#app');

You can use external html, this is practical for cases in which you want to show, for example, a help. In the following code 'Loading' is a component that shows a gif and a text to choice. we use a fetch to load the html file, while the html file is being loaded, we show the 'Loading' component when the load finishes, we replace it with our html. We use dangerouslySetInnerHTML to display it.

import React from 'react';
import {Logo,Toolstrip,Loading} from '../util/Controles.jsx';
import 'whatwg-fetch';
export default class Visor extends React.Component {
    constructor(props) {
        super(props);
        this.state={html:null};

    }
    render() {
        if(!this.state.html){
            return (<div>
                    <Logo />
                    <Toolstrip>
                   <Loading span="Obteniendo ayuda..." />
                   </Toolstrip>
                    </div>)
        };
        var htm={__html:this.state.html};
         return (<div>
                    <Logo />
                    <Toolstrip>
                    <div dangerouslySetInnerHTML={htm} ></div>

            </Toolstrip>
         </div>);

    }
    componentDidMount() {
        var me=this;
        fetch('ayuda.html')
        .then(function(response) {
            return response.text();
        }).then(function(data) {
          me.setState({html:data});
        }).catch(function(ex) {
            me.setState({html:(<h3>{ex}</h3>)});
        });

    }

 }