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.

Hooks

Just like React, Preact has hooks, and they work the same way.

For example, we can write:

import { render } from "preact";
import { useState, useCallback } from "preact/hooks";

export default function App() {
  const [value, setValue] = useState(0);
  const increment = useCallback(() => setValue(value + 1), [value]);

  return (
    <div>
      <p>count: {value}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

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

We call the useState hook to create the value state.

And we can set that with the setValue function.

And we create the function to increment the value state with the useCallback hook.

We pass in the function we want to call inside it to cache it until value changes.

And finally, we render the count and the increment button.

When we click it, we see the count increase.

createContext

The React Context API is also adopted to Preact.

The Context API lets us share data between different components.

To us it, we write:

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

const Theme = createContext("light");

function ThemedButton() {
  return (
    <Theme.Consumer>
      {(theme) => <div>Active theme: {theme}</div>}
    </Theme.Consumer>
  );
}

function SomeComponent({ children }) {
  return <>{children}</>;
}

export default function App() {
  return (
    <div>
      <Theme.Provider value="dark">
        <SomeComponent>
          <ThemedButton />
        </SomeComponent>
      </Theme.Provider>
    </div>
  );
}

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

We called the createContext function with the value 'light' .

In the ThemeButton component, we render the ThemeConsumer component so we can get the theme data in the function.

In SomeComponent , we render the child elements.

And in App , we add the Theme.Provider component so that we can set the value in it.

Then anything inside the Theme.Provider component will get the value.

CSS Custom Properties

We can add CSS custom properties in our Preact components.

For example, we can write:

import { render } from "preact";

export default function App() {
  return (
    <div style={{ "--theme-color": "lightblue" }}>
      <div style={{ backgroundColor: "var(--theme-color)" }}>hello world</div>
    </div>
  );
}

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

We defined the --theme-color CSS variable.

Then we used it in the inner div to set the background color of it.

Components

Like React, Preact has many components.

We can use functional components as we do with React.

For example, we can write:

import { render } from "preact";

function MyComponent(props) {
  return <div>My name is {props.name}.</div>;
}

export default function App() {
  return <MyComponent name="Jane" />;
}

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

We create the MyComponent component and used it in App .

Conclusion

Preact X comes with many features that are available with React.