Am I the only one that thinks that the author is trolling? I mean, the final code has obvious flaws:<p>a) Difficult to read and mantain. (Compare with the version below).<p>b) Inefficient in a real world scenario as it has to recreate the DOM every time the model changes.<p>c) Difficult to test as it requires a DOM API.<p>d) XSS issues (Text returned from the service is not escaped in the DOM!)<p>e) Non isomorphic (Unless we have a DOM API in the server capable of emiting plain HTML).<p>Nevertheless, I agree that using React for such a trivial project would be too much, but there are
other alternative frameworks that would fit for this kind of task (e.g. riot.js, Cycle.js, [Insert here
your favourite one]).<p>My React version:<p><pre><code>  const DATA = {    
    name: &#x27;John Smith&#x27;,
    imgURL: &#x27;http:&#x2F;&#x2F;lorempixel.com&#x2F;100&#x2F;100&#x2F;&#x27;,
    hobbyList: [&#x27;coding&#x27;, &#x27;writing&#x27;, &#x27;skiing&#x27;]
  }

  const App = ({ profileData }) =&gt; (
    &lt;div&gt;
      &lt;Profile { ...profileData } &#x2F;&gt;
      &lt;Hobbies { ...profileData } &#x2F;&gt;
    &lt;&#x2F;div&gt;
  );

  const Profile = ({ name, imgURL }) =&gt; (
    &lt;div&gt;              
      &lt;h3&gt;{name}&lt;&#x2F;h3&gt;
      &lt;img src={imgURL} &#x2F;&gt;
    &lt;&#x2F;div&gt;
  );    

  const Hobbies = ({ hobbyList }) =&gt; (
    &lt;div&gt;
      &lt;h5&gt;My hobbies:&lt;&#x2F;h5&gt;
      &lt;ul&gt;
        { hobbyList.map( (hobby, idx) =&gt; (
          &lt;li key={ idx }&gt;{ hobby }&lt;&#x2F;li&gt;
        ))}
      &lt;&#x2F;ul&gt;
    &lt;&#x2F;div&gt;
  );

  ReactDOM.render(&lt;App profileData={DATA} &#x2F;&gt;, document.getElementById(&#x27;content&#x27;));</code></pre>