How to transpile React objects to DOM nodes?

Question

Problem and question

I'll made this code:

let el = (
  <div class="form-group">
    <label class="control-label col-md-4">Username</label>
    <div class="col-md-8">
      <input type="text" name="username" class="form-control" placeholder="username" />
    </div>
  </div>
);

document.body.append(el);

How could I convert this to this code:

let el = document.createElement('div');
el.classList.append('form-group');

let el1 = document.createElement('label');
// ... all attributes
el.appendChild(el1);

// ... Same with the div and the input tag inside the div.

document.body.append(el);

I'm using webpack and gulp in combination with Babel.

What I've tried

If the configuration of webpack is oke, I've got problems because webpack transpiles everything to this code:

var el = 
  React.createElement("div", { class: "form-control" },
    React.createElement("label", { class, "col-md-4" }), // ...
    React.createElement("div", { class, "col-md-8" }) // ...
      // ...
);

document.body.append(el); // <-- error happens on this line

This doesn't work because I don't use React and el is not a type of a Node and so the error is thrown.

Uncaught TypeError: Failed to execute appendChild on Node: parameter 1 is not of type Node.

I just like the syntax of it. Same issue when I'm using it with a gulp task