I recently heard about Preact and learned that high-traffic sites like IKEA, Bing, Etsy, and others use Preact, so I got curious about it. I wanted to know how Preact works under the hood and the similarities and differences between react and preact, so I decided to learn it. This series is my journey learning preact and my thoughts on it.

I recommend signing up and creating a preact code in nexuscode.online to follow along.

Like React, Preact uses virtual DOM. A Virtual DOM is a simple description of a tree structure using objects:

let vdom = {
  type: 'p',         // a <p> element
  props: {
    class: 'big',    // with class="big"
    children: [
      'Hello World!' // and the text "Hello World!"
    ]
  }
}

Preact provides a way to construct these descriptions, which can then be compared against the browser's DOM tree. Each part of the tree is compared, and the browser's DOM tree is updated to match the structure described by the Virtual DOM tree.

Instead of describing how to update the DOM in response to things like keyboard or mouse input, we only need to describe what the DOM should look like after that input is received. It means we can repeatedly give Preact descriptions of tree structures, and it will update the browser's DOM tree to match each new description – regardless of its current structure.

There are three ways to create Virtual DOM trees with Preact.

createElement(): a function provided by Preact
HTM: HTML-like syntax you can write directly in JavaScript
JSX: HTML-like syntax that can be compiled into JavaScript

createElement

The simplest approach would be calling Preact's createElement() function directly.

import { createElement, render } from 'preact';

let vdom = createElement(
  'p',              // a <p> element
  { class: 'big' }, // with class="big"
  'Hello World!'    // and the text "Hello World!"
);

render(vdom, document.body);

The code above creates a Virtual DOM "description" of a paragraph element. The first argument to createElement is the HTML element name. The second argument is the element's "props" - an object containing attributes (or properties) to set on the element. Any additional arguments are children for the element, which can be strings (like 'Hello World!') or Virtual DOM elements from additional createElement() calls.

The last line tells Preact to build a real DOM tree that matches our Virtual DOM "description" and to insert that DOM tree into the body of a web page.

JSX

JSX lets us describe our paragraph element using HTML-like syntax. JSX must be compiled by a tool like Babel or you can use nexuscode.online to compile JSX inside your browser and see the result instantly. Let’s rewrite the previous example using JSX without changing its functionality.

import { createElement, render } from 'preact';

let vdom = <p class="big">Hello World!</p>;

render(vdom, document.body);

HTM

HTM is an alternative to JSX that uses standard JavaScript-tagged templates, removing the need for a compiler. If you haven't encountered tagged templates, they're a special type of String literal that can contain ${expression} fields.

import { h, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

function App() {
  return html`
    <p class="big">Hello World!</p>
  `;
}

render(html`<${App} />`, document.body);

All of these examples produce the same result: a Virtual DOM tree that can be given to Preact to create or update an existing DOM tree.
In the next chapter, we’re going to learn about components and events.

Please share your ideas and ask any questions you have or share your code via nexuscode.online in the comments section below.