Using Static HTML with React

Question

I'm learning how to use React and, so far, I am very much enjoying it. However, I am running into a bit of a problem.

As practice with React, I'm trying to build a navigation menu that shows different content based on the active item or tab. These different views will, for my purposes, be static in nature, mainly informative with maybe some embedded audio or video. But there may be a lot of content in each view. To me, it makes the most sense to create separate HTML files and use their content in these different views. However, the only way I can see to do this without the use of an external library is to put the static content for each view in its own React component that does nothing but render that static content.

This seems silly to me. Is there some way to accomplish what I'm trying to do in React? If not, is there a lightweight or widely-used library out there that will allow me to accomplish this? Thanks in advance!

Answer 1

If you would like to load all of the html at page load time, you should dynamically create a script in your build process or server:

var PAGE_HTML={"page1.html": "...","page2.html":"..."};

You can do this in node for a directory like this:

var readAll = require('read-dir-files').read;
readAll('./pages', 'utf-8', false, function(err, files){
    if (err) return doSomething(err);

    fs.writeFile('dist/pages.js', "var PAGE_HTML=" + JSON.stringify(files), function(err){
        // ...
    });
});

In React you can then have a structure like this:

var App = React.createClass({
    getInitialState: function(){ return {page: "page2.html"} },
    navigate: function(toPage){
        this.setState({page: toPage})
    },
    render: function(){
        return <div>
            <ul>
                <li onClick={this.navigate.bind(null, "page1.html")}>Page 1</li>
            </ul>
            <div dangerouslySetInnerHTML={{__html: PAGE_HTML[this.state.page]}} />
        </div>;
    }
});

Side note: there's nothing wrong with having React components for page content, it's just not the best format for all types of content. If you need a page where you'll have lots of interactive components, then it might make sense to represent it as a component.

Answer 2

We recently had a similar issue of trying to integrate static HTML into our React application (In this case the HTML was a template which would have React components 'injected' into it, so it was potentially a little more complex than your situation). Like you, we wanted to be able to create raw HTML (So that it could be generated by standard tools).

A colleague created this library to accomplish the task:

https://github.com/mikenikles/html-to-react

It parses the HTML tree, converting it into a 'React tree' which you can embed into a React component. This avoids the use of dangerouslySetInnerHtml and doesn't require any build-time pre-processing on the HTML.