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>
);
}
}