JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/jstree.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css">
<div id="tree"></div>

JavaScript

var files = [
    {webkitRelativePath: "Simple Root Node"},
    {webkitRelativePath: "Root Node 2"},
    {webkitRelativePath: "Root Node 2/Child 1"},
    {webkitRelativePath: "Root Node 2/Child 2"}
];
var idcount = 0;
var treeJSON = [];
var idmap = {};

function add(dirs) {
    if (!dirs.length) return "#";
    var name = dirs.join("/");
    if (name in idmap) return idmap[name];
    var dir = dirs.pop();
    var parent = add(dirs);
    var id = "ajson" + ++idcount;
    treeJSON.push({
        id: id,
        parent: parent,
        text: dir
    });
    return idmap[name] = id;
}
for (var i = 0; i < files.length; ++i) {
    var name = files[i].webkitRelativePath;
    add(name.split("/"));
}
console.log(treeJSON);
$('#tree')
    .jstree({
    'core': {
        'check_callback': true,
            'data': function (node, cb) {
            cb.call(this, treeJSON);
        }
    }
});
var tree = $('#tree').jstree(true);
tree.refresh();