npm i pug-to-react-element

import React, { Component } from "react";
import pre from "pug-to-react-element";
 
// config indentation size in range from 2 (default) to 4 if it needs
// pre.tabSize = 4;
 
const markup = `
 
div() 0#[span() 1]2#[span() 3]4
div()
  div() 5
    6
    span() 7
    8
div() 9
    div() 10
      div() 11
    input(type="tel" required)
 
`;
 
class MyComponent extends Component {
    render() {
        return pre(markup);
    }
}
 
export default MyComponent;

import ReactDOM from "react-dom";
import React, { Component } from "react";
import MyComponent from "./components/MyComponent.js";
 
const   root = document.querySelector("#root"),
        myComponent = new MyComponent().render();
 
ReactDOM.render(myComponent, root);

// creates <div></div>
div()
 
// creates <input id="id0" className=".div" required>
input(id="id0" className=".div" required)
 
// creates <p>Lorem ipsum</p>
p() Lorem ipsum
 
// creates <div></div><p></p>
div()
p()
 
// creates <div><p></p></div>
div()
    p()
 
// creates <div>0<span>1</span>2</div>
div() 0#[span() 1]2