Preact — Preact X Features
Tags: webdev, programming, javascript, beginners
Published: 2021-01-22 21:37:51

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