Getting Started with Front End Development with Preact

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Preact is a front end web framework that’s similar to React.

It’s smaller and less complex than React.

In this article, we’ll look at how to get started with front end development with Preact.

Getting Started

We can import the Preact module and call render to render the content we want.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>app</title>
  </head>
  <body>
    <script type="module">
      import { h, Component, render } from "https://unpkg.com/preact?module";
      const app = h("h1", null, "Hello World");
      render(app, document.body);
    </script>
  </body>
</html>

We call the h method from the preact module to render an element.

The first argument of h is the tag name.

The 2nd argument is the element attributes.

The 3rd argument is the content.

Then we call render with the app and document.body to render app in the body .

Alternatives to JSX

We can also use template strings to render elements.

To do this, we write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>app</title>
  </head>
  <body>
    <script type="module">
      import { h, Component, render } from "https://unpkg.com/preact?module";
      import htm from "https://unpkg.com/htm?module";
      const html = htm.bind(h);
      function App(props) {
        return html`<h1>Hello ${props.name}!</h1>`;
      }

      render(html`<${App} name="james" />`, document.body);
    </script>
  </body>
</html>

We import the html function and bind the this value in html to the h function.

Then we can use that to render our content with a template string.

We pass in the props to App just like we do with React.

Then we call render with the html tag again with the template string for App .

Preact CLI

We can use the Preact CLI to create a production-ready Preact project.

To install it globally, we run:

npm install -g preact-cli

Then we can make a production build with:

npm run build

Preact X

Preact X comes with many new features.

One feature includes fragments. It’s a container component that lets us add multiple components in one root container.

For example, we can write:

import { Component, render, Fragment } from "preact";

export default class App extends Component {
  render(props, { results = [] }) {
    return (
      <>
        <div>foo</div>
        <div>bar</div>
      </>
    );
  }
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

We import the Fragment component, then we can use the <> and </> symbols to add our fragment.

This works like how it is in React.

componentDidCatch

We can catch errors with the componentDidCatch method.

For example, we can write:

import { Component, render } from "preact";

export default class App extends Component {
  state = { errored: false };

  componentDidCatch(error) {
    this.setState({ errored: true });
  }

  render(props, state) {
    if (state.errored) {
      return <p>error</p>;
    }
    return props.children;
  }
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

to catch any errors that are raised in the render or other lifecycle methods.

Conclusion

We can create simple apps with Preact easily.