So, I'm doing something like this in one of my react.js files:

 render: function() { 
    var stuff = this.props.stuff;

    function getHtmlForKey(key_name, title) {
        var key_name = key_name.toLowerCase();
            return Object.keys(thing).filter(function(key) {
                return key && key.toLowerCase().indexOf(key_name) === 0;
            }).map(function(key, index) {
                var group_title = index === 0 ? title : '';
                if(profile[key] != null && thing[key] != "") {
                    return (
                        <span>
                        {group_title ? (
                            <li className="example-group-class">{group_title}</li>
                        ) : null }
                        <li key={key} className="example-class">
                            {thing[key]}
                        </li>
                        </span>
                    );
                }    
            }, this);
    }

    /** Grouping by keyword **/
    var group1 = getHtmlForKey('stuff1', 'Group Title 1');

    /** Return Facecards **/
    if (stuff) {
        return (
            <div className="col-md-6">
                <div className="media">
                    <div className="pull-left">
                        <a href="#" onClick={this.open}>
                            <img src={this.props.stuff} className="media" />
                        </a>
                    </div>
                    <div className="top">
                        {group1}
                    </div>
       }
}

When this renders it outputs something like:

  <li class="example-group-title" data-reactid=".0.0.2.0.$2083428221.0.1.0:0.0">Group Title</li>

In my other react.js file, i've got:

    var StuffApp = require('./components/StuffApp.react');

    ReactDOM.render(
    <StuffApp />,
     document.getElementById('main-content')
    );

How do I render the HTML so it doesn't include all the extra DOM attribute markup (that is, the data-reactid)? I just want to try and save some bits, ya know? I've been reading this related to .html the ReactDomServer, but was wondering if there is an even easier way? If not, how would I integrate that?

So, I'm doing something like this in one of my react.js files:

 render: function() { 
    var stuff = this.props.stuff;

    function getHtmlForKey(key_name, title) {
        var key_name = key_name.toLowerCase();
            return Object.keys(thing).filter(function(key) {
                return key && key.toLowerCase().indexOf(key_name) === 0;
            }).map(function(key, index) {
                var group_title = index === 0 ? title : '';
                if(profile[key] != null && thing[key] != "") {
                    return (
                        <span>
                        {group_title ? (
                            <li className="example-group-class">{group_title}</li>
                        ) : null }
                        <li key={key} className="example-class">
                            {thing[key]}
                        </li>
                        </span>
                    );
                }    
            }, this);
    }

    /** Grouping by keyword **/
    var group1 = getHtmlForKey('stuff1', 'Group Title 1');

    /** Return Facecards **/
    if (stuff) {
        return (
            <div className="col-md-6">
                <div className="media">
                    <div className="pull-left">
                        <a href="#" onClick={this.open}>
                            <img src={this.props.stuff} className="media" />
                        </a>
                    </div>
                    <div className="top">
                        {group1}
                    </div>
       }
}

When this renders it outputs something like:

  <li class="example-group-title" data-reactid=".0.0.2.0.$2083428221.0.1.0:0.0">Group Title</li>

In my other react.js file, i've got:

    var StuffApp = require('./components/StuffApp.react');

    ReactDOM.render(
    <StuffApp />,
     document.getElementById('main-content')
    );

How do I render the HTML so it doesn't include all the extra DOM attribute markup (that is, the data-reactid)? I just want to try and save some bits, ya know? I've been reading this related to https://facebook.github.io/react/docs/top-level-api.html the ReactDomServer, but was wondering if there is an even easier way? If not, how would I integrate that?

• javascript
• reactjs

• You are rendering the page using react on the server and then transfer it? Why do you? – Qwertiy Commented Feb 8, 2016 at 16:17
• Hey @Qwertiy - I'm a total newb to react.js, so I'm not sure what you mean - could you elaborate? – Michael Sebastian Commented Feb 8, 2016 at 16:17
• Your rendering is server-side or client-side? – Qwertiy Commented Feb 8, 2016 at 16:18
• we are rendering Client-side – Michael Sebastian Commented Feb 8, 2016 at 16:22
• Than what's the problem with these ids? – Qwertiy Commented Feb 8, 2016 at 16:55

2 Answers 2

The method you're looking for is ReactDOM.renderToStaticMarkup.

From the docs:

Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

This only makes a difference if you're rendering on the server. Also, this markup won't be compatible with React, so it's really only useful for display only Components.

However, this statement you made confuses me:

How do I render the HTML so it doesn't include all the extra DOM attribute markup (that is, the data-reactid)? I just want to try and save some bits, ya know?

If you're trying to save bits, you don't do it on the client (which is where React runs), you do it on the server so that you transfer fewer bits down to the client. Once the app is running on the client's browser, you don't really need to worry about the extra memory that those DOM attributes take up (which are literally the only bits you'd be saving).

Don't worry about it - as of React version 0.15.0-alpha.1, there's only data-reactroot attribute on root node.