loading...

create react app + preact = 💖

shilangyu profile image Marcin Wojnarowski ・1 min read

TL;DR: cra-preact

Preact is a popular alternative to React. It provides most features that React does in a much smaller package:

2.6kB + 35.9kB vs 3.7kB!

But you want to use Create React App (CRA) for the ease of development.

What to do then? Well, Preact gives a CRA alternative: preact-cli. It is great (it prerenders your routes!), I recommend using it. However it is not ideal in every situation. Let's say you already have a project using CRA and don't to deal with migration to preact-cli. Another thing is that the configuration is exposed and can sometimes be overwhelming.

Here's where cra-preact comes to rescue us! The idea is simple: I want to use CRA but I want to have preact instead of react. No problem:

"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "cra-preact start",
+ "build": "cra-preact build",
+ "test": "cra-preact test",
  "eject": "react-scripts eject"
}

Yep, that's it. Now watch the bundle size go down. Here's the bundle size of an initial project created with create-react-app myapp, with react and preact respectively:

Get started now!
https://github.com/shilangyu/cra-preact

Posted on by:

shilangyu profile

Marcin Wojnarowski

@shilangyu

Typescript | Rust | Golang | Python Love creating modern PWAs. Undergrad student. Machine learning. Open source 💛

Discussion

markdown guide