How to parse data using React.js?

Question

JavaScript

The following data comes from the server: html (to display tags, I wrote div in Russian): "div{{name}}/div" and json {"name": "Vasya"} comes in Question: how can I parse these data and display div Vasy /div? I do it like this:

module.exports = React.createClass({
     getInitialState: function () {
         return {
            previewData: {}, // здесь приходит {"name":"Vasya"}
            previewHtml: {}  // здесь html "<div>{{name}}</div>"
    },
    getTemplateDataStore: function (event, previewData) {
        this.setState({
            previewData: previewData
        });
    },

    getTemplateHTMLStore: function (event, previewHtml) {
        this.setState({
            previewHtml: previewHtml
        });
    },
    render: function () {
        return // ?????????? как отоброазить <div>Vaysa</div>? 
    }
    },
});

Answer 1

In general, dynamic templates and react are not very compatible. React uses a virtual DOM and doesn't expect you to change anything in the real DOM
Apparently one of the possible ways is to rewrite templates for react-style and compile them into js code. The code will look something like this:

function template() {
              return react.createElement(
                  'div',
                  null,
                  react.createElement(
                      'h1',
                      { className: 'text-danger' },
                      'Page not found'
                  ),
                  react.createElement(
                      'p',
                      null,
                      'This page does not exist'
                  )
              );
          }

Then load it dynamically and execute it, and insert the result somewhere inside the normal components.
But this, as I see it, is just a hell of a hemorrhoid, at least all dependencies (react, etc.) should somehow be visible from your template, most likely they will have to be pulled into global variables.