I’ll also demonstrate how Preact works with external APIs by building a Preact app that shows the most recent debut shots from Dribbble.
Introduction to Preact
Preact is fast, and not just because of its size. It’s one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.
Preact aims to deliver on a few key goals:
- Performance: Render quickly & efficiently
- Size: Small size, lightweight
- Efficiency: Effective memory usage
- Understandability: Understanding the codebase should take no more than a few hours
- Compatibility: Preact aims to be largely compatible with the React API. preact-compat attempts to achieve as much compatibility with React as possible. More on
Preact is now being used by companies like Lyft, Housing.com and m.uber.com. Uber’s engineering team recently wrote an article that highlighted how Preact was used to build the mobile version of Uber which in turn led to a better performance largely due to its very minimal size.
What makes Preact different from React?
Preact itself is not intended to be a reimplementation of React. There are differences. Many of these differences are trivial, or can be completely removed by using preact-compat, which is a thin layer over Preact that attempts to achieve 100% compatibility with React. — Preactjs.com
Well for starters, there is a huge gulf in file size. Preact’s 3kb against React’s 45kb is a no brainer. The reason Preact does not attempt to include every single feature of React is in order to remain small and focused.
class vs className
When using React, if you wanted to add a class to a
div you’d have to do something like this.
# React code <div className="class-here">Content Here</div>
In Preact, you can just use
class for CSS classes.
className is still supported, but Preact encourages you to use
# Preact code <div class="class-here">Content Here</div>
this.state are passed to
render() for you. What does this mean? Take a look at the code below.
As you can see above, in Preact, we can make the code look cleaner by removing the
this and if you even want to go a step further, you can use destructuring. See an example below.
Removal of PropTypes
Not everyone uses PropTypes, so they aren’t part of Preact’s core, hence the removal from Preact. If you’d still like to use PropTypes in your project, you can do so with the help of
preact-compat or use them manually.
Using preact-compat for compatibility between Preact and React
Preact has this package called “preact-compat” which works as a compatibility layer between Preact and React. Using
preact-compat makes it easy to switch from React to Preact. Switching to Preact can be as easy as installing and aliasing
preact-compat in your code.
This lets you continue writing React/ReactDOM code without any changes to your workflow or codebase.
preact-compat gives you the advantage of supporting the vast majority of existing React modules you might find on npm. So how do you add
preact-compat to your existing React code?
preact-compat with npm.
npm i preact-compat
The next step is to alias preact-compat. You can do that by adding the following resolve.alias configuration to your
The code block above basically translates to this — If I try to import a module called React or ReactDOM, don’t give me those modules, but instead give me what’s provided on the right hand side.
Getting started with Preact
The Preact API and developer experience is largely similar to that of React, but there are a few important differences developers should be aware of.
Here, I’ll point out a few of the key differences that developers should be aware of when building with Preact.
To build the Preact app, we’ll be making use of the Preact CLI. Preact CLI is a project by the Preact team that helps developers get started with Preact easily. The Preact CLI helps you to generate a Progressive Web App and ships with features like:
- Auto-generated Service Workers for offline caching powered by sw-precache
- Automatic code splitting for routes.
- PRPL pattern support for efficient loading.
- Support for CSS Modules, LESS, Sass, Stylus; with Autoprefixer.
- Automatic app mounting, debug helpers & Hot Module Replacement.
- Zero-configuration pre-rendering / server-side rendering hydration
preact-cli tool is intended to help you start writing Preact code with little or no build configuration. Install
preact-cli on your computer by running the command below.
npm install -g preact-cli
Once the CLI has been installed successfully, go ahead and create a new app by running the command below in your terminal.
preactdribbble is the name of the app to be created and can be called anything, the app’s name does not have to prefixed with
preact create preactdribbble
This should create a new folder named
preactdribble with all the files needed for the Preact app in it. Navigate into the
preactdribbble folder as we’ll be working from there now. Let’s start the app and see what it looks like.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to use the React children prop with TypeScript
- Explore creating a custom mouse cursor with CSS
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
# start a live-reload/HMR dev server: npm start