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!

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!

• javascript
• html
• reactjs

• You could just use jQuery's load function if you consider jQuery lightweight... This function allows to load external HTML and inject it into the page. – Becojo Commented Dec 14, 2014 at 20:57
• Unless I'm wrong, jQuery's load function uses AJAX to retrieve the HTML in question, right? A pretty good solution, but it would be even better if I could compose it in place without more web traffic involved. Seems like it might have to be a build step involving some sort of HTML strings being created and sent across with the scripts. – SethGunnells Commented Dec 14, 2014 at 21:56
• Looks like there may be some gulp plugins to do what I want, but they're barely used which always makes me wonder if nobody is running into the same problem as me or if I'm going about it the wrong way. – SethGunnells Commented Dec 14, 2014 at 22:03

2 Answers 2

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.

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.