Libraries vs Pure Javascript

I'm studying React and trying see what the benefits to using this library versus using straight HTML and javascript. So in the tutorial they offer up this simple example:

var CommentBox = React.createClass({
  render: function() {
    retu (
      <div className="commentBox">

          <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    retu (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});
var CommentForm = React.createClass({
  render: function() {
    retu (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('container') 
);

https://jsfiddle.net/znibble/mvf6vr9k/

Which create3 3 elements. All that code above, just to create what is essentially a legacy HTML!!??:

<div id="commentBox">   
        <h1>Comments</h1>
        <input>CommentList</input>
        <form>CommentForm </form>
      </div>

So I'm really asking myself what is the real benefit to having/using such a library?... it's NOT like using the simplicity jQuery:

var div = $("<div id="commentBox"></div>");
$("#commentBox").append(h1).(input).(form)....//or something like that

Some might say well, as your legacy HTML code gets bigger it's harder to control via script. I find this not true, as var el = document.getElementById() gives you all the script control you need.

So my question is, what's the real story with libraries such as React? what benefit does it really provide?... because less code writing isn't one of them, as you can see above!

Opinions please. Good, bad or indifferent, all are welcome.

* Note: I'm not talking about react-native (That's different) *