Getting Started with Front End Development with Preact
Tags: webdev, programming, javascript, beginners
Published: 2021-01-22 21:37:30

**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.