Am I the only one that thinks that the author is trolling? I mean, the final code has obvious flaws:

a) Difficult to read and mantain. (Compare with the version below).

b) Inefficient in a real world scenario as it has to recreate the DOM every time the model changes.

c) Difficult to test as it requires a DOM API.

d) XSS issues (Text returned from the service is not escaped in the DOM!)

e) Non isomorphic (Unless we have a DOM API in the server capable of emiting plain HTML).

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]).

My React version:

  const DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
  }

  const App = ({ profileData }) => (
    <div>
      <Profile { ...profileData } />
      <Hobbies { ...profileData } />
    </div>
  );

  const Profile = ({ name, imgURL }) => (
    <div>              
      <h3>{name}</h3>
      <img src={imgURL} />
    </div>
  );    

  const Hobbies = ({ hobbyList }) => (
    <div>
      <h5>My hobbies:</h5>
      <ul>
        { hobbyList.map( (hobby, idx) => (
          <li key={ idx }>{ hobby }</li>
        ))}
      </ul>
    </div>
  );

  ReactDOM.render(<App profileData={DATA} />, document.getElementById('content'));