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.
2 replies on “Getting Started with Front End Development with Preact”
Interesting! Why is the function just called h? That name seems very confusing to me. Thanks for the nice examples!
Thanks for reading, Derek!
It’s just convention to call the render function h. There’s no reason for it.