Get started with Preact

By Sean McPhersonAug 18, 2020

Preact is a lightweight alternative to React. It provides the same¹ 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² 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>
    );
  }
}