Get started with Preact


  Hey there! This article is being published a "work in progress," which means that it is not done. So take everything with a grain of salt.

I may or may not come back and finish this article. Regardless, I hope that it's helpful in its current state.

Preact is a lightweight alternative to React. It provides the same[1] modern API but at only 3kB minified and gzipped. For comparison, bundlephobia has react and react-dom at 38.5kB.

With many of the same features at a fraction of the size, Preact might be a better alternative for your simple client-side React app.

Sandbox #

REPL #

The Preact website has a REPL where you can test drive the library. The example as of writing using state and effect hooks and makes a request to the GitHub API with fetch:

const [items, setItems] = useState([]);

useEffect(() => {
fetch('https://api.github.com/search/repositories?q=preact')
.then(res => res.json())
.then(data => setItems((data && data.items) || []));
}, []);

CodeSandbox.io #

CodeSandbox has 54,000+ templates[2] for Preact, including a starter template from the CodeSandbox Team. The code is similar to the official REPL, but with a class component:

export default class App extends Component {
componentDidMount() {
fetch(`https://api.github.com/search/repositories?q=preact`)
.then(r => r.json())
.then(json => {
this.setState({
results: (json && json.items) || []
});
});
}

render(props, { results = [] }) {
return (
<div>
<h1>Example</h1>
<div class="list">
{results.map(result => <Result result={result} />)}
</div>
</div>
);
}
}

Footnotes

  1. Mostly. ↩︎

  2. Based on a template search for “preact”. I did not verify this count. ↩︎

About

My name is Sean McPherson (SeanMcP), and I am a software engineer based in Pittsburgh, PA. Here I write articles about programming for developers of all levels.