create react app + preact = 💖

#preact #react #createreactapp #javascript

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

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Top comments (0)

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.