Update the DOM Easily with the Re:dom Library — Placeholders and Routes

Photo by Johan Mouchet on Unsplash

We can update the DOM with the Re:dom library in a way easier than plain JavaScript.

In this article, we’ll look at how to use the library to diff the DOM and patch it.

Place

We can create or destroy a component or element and reserve its place with the place method.

For example, we can write:

import { place, mount, el } from "redom";
class Top {
  constructor() {
    this.el = el("p", "top");
  }
}
class Menu {
  constructor() {
    this.el = el("div", "menu");
  }
  update(visible, data) {
    if (visible) {
      this.el.textContent = data;
    }
  }
}
class Content {
  constructor() {
    this.el = el("div", "content");
  }
}
class App {
  constructor() {
    const app = el(
      ".app",
      (this.top = new Top()),
      (this.menu = place(Menu)),
      (this.content = new Content())
    );
    this.menu.update(true, "foo");
    this.menu.update(true, "bar");
    this.menu.update(false);
    return app;
  }
}
mount(document.body, new App());

We call the place function to reserve place for the menu.

Router