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.
Creating a Web Component
We can convert a Preact component into a web component with the preact-custom-element
package.
For example, we can write:
import { render } from "preact";
import register from "preact-custom-element";
const Greeting = ({ name = "World" }) => <p>Hello, {name}!</p>;
register(Greeting, "x-greeting", ["name"]);
export default function App() {
return <x-greeting name="Jane"></x-greeting>;
}
if (typeof window !== "undefined") {
render(<App />, document.getElementById("root"));
}
to import the register
function to register our Preact component as a web component.
We have the Greeting
component which we register as the x-greeting
custom element.
The 3rd argument has the attribute that x-greeting
takes, which is the name
attribute.
It’ll be interpolated into the p
element in Greeting
like we have with a regular Preact component.
In App
, we use th x-greeting
web component with the name
prop set.
Then we see:
Hello, Jane!
displayed.
Observed Attributes
We have to make attributes observable so that it can respond to value changes.
To make them observable, we can write:
import { Component, render } from "preact";
import register from "preact-custom-element";
class Greeting extends Component {
static tagName = "x-greeting";
static observedAttributes = ["name"];
render({ name }) {
return <p>Hello, {name}!</p>;
}
}
register(Greeting);
export default function App() {
return <x-greeting name="Jane"></x-greeting>;
}
if (typeof window !== "undefined") {
render(<App />, document.getElementById("root"));
}
We create our Greeting
component.
Then we set the tagName
static property to set its tag name.
And we set the observedAttributes
to an array of attribute names to watch.
In App
, we use the x-greeting
component the same way.
If no observableAttributes
are specified, then the data type of the attributes will be inferred from the keys of propTypes
.
Setting the propTypes
will make them observable.
For example, if we have:
import { render } from "preact";
import register from "preact-custom-element";
function FullName({ first, last }) {
return (
<span>
{first} {last}
</span>
);
}
FullName.propTypes = {
first: Object,
last: Object
};
register(FullName, "full-name");
export default function App() {
return <full-name first="Jane" last="Smith"></full-name>;
}
if (typeof window !== "undefined") {
render(<App />, document.getElementById("root"));
}
We set the first
and last
prop types to Object
and they’ll be made observable.
Server-Side Rendering
We can render Preact components to strings.
This lets us render content on the server-side, which is useful for increasing performance.
For example, we can write:
import render from "preact-render-to-string";
const App = <div class="foo">content</div>;
console.log(render(App));
render
renders the App
component to a string.
Now we should see:
<div class="foo">content</div>
logged in the console log.
Conclusion
We can create web components from Preact components.
Also, we can render components to strings.