How to use React to reconstruct serialized DOM in JSON?
<p>In my application, I serialize DOM into JSON and send it back to server. </p>

<p>I need help finding an efficient way to later reconstruct the DOM from this serialized JSON using React.</p>

<p>To share a concrete example, let's start with this DOM:</p>

<pre><code>    &lt;div id="parent"&gt;
      &lt;div id="one"&gt;&lt;/div&gt;
      &lt;span id="two"&gt;&lt;/span&gt;
    &lt;/div&gt;
</code></pre>

<p>This will get serialized into following JSON:</p>

<pre><code>    [
      {
        "index": 0,
        "tagName": "DIV",
        "attributes": {"id": "parent"}
      },
      {
        "index": 1,
        "parent": 0,
        "tagName": "DIV",
        "attributes": {"id": "one"}
      },
      {
        "index": 2,
        "parent": 0,
        "tagName": "SPAN",
        "attributes": {"id": "two"}
      }
    ]
</code></pre>

<p>Now, in vanilla Javascript, I can re-build DOM like following:</p>

<pre><code>    var nodes = {};
    for (var i = 0; i &lt; json.length; i++) {
        var node = json[i];

        // Create element
        var element = document.createElement(node.tagName);

        // Add attributes
        for (var attribute in node.attributes) {
            element.setAttribute(attribute, node.attributes[attribute]);
        }

        // Add parent-child association
        if (node.parent != undefined) nodes[node.parent].appendChild(element);

        // Cache it for later reference
        nodes[node.index] = element;
    }        
</code></pre>

<p>I'm new to React, and so far I haven't figured out a way to establish dynamic parent-child relationship between components that I can change later. What would be a good way to accomplish this using React, or may be, is it even a good application of React?</p>

<p>The example above is a reduced example, but you can imagine the complexity can increase as different JSON instructions are introduced to re-parent, add or remove a particular DOM node.</p>