如何将React对象转换为DOM节点？

Question

问题和疑问

我会制作这段代码：

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);

我怎样才能将此转换为此代码：

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);

我正在使用webpack和gulp与Babel结合使用。

我尝试了什么

如果configuration of webpack是oke，我遇到了问题，因为webpack会将所有内容转换为此代码：

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

这不起作用，因为我不使用React而el不是Node的类型，因此会抛出错误。

  

未捕获的TypeError：无法在appendChild上执行Node：参数1的类型不属于Node。

我只是喜欢它的语法。与a gulp task

一起使用时出现同样的问题