Preact: The Lightweight Alternative to React

On By joseph
Time to read: 4 minutes

When it comes to building fast and lightweight JavaScript applications, Preact emerges as a standout option. With its small size and compatibility with React, Preact is a fantastic choice for developers looking to optimize performance without sacrificing functionality. In this article, we’ll explore what Preact is, how it compares to React, how to get started with it, and how to use it without build tools.

What is Preact?

Preact is a fast 3kB alternative to React with the same modern API. Built for speed, it’s perfect for applications where every kilobyte counts. While it shares much of React’s ecosystem and functionality, its smaller footprint makes it ideal for mobile-first and performance-critical applications.

Why Choose Preact Over React?

FeatureReactPreact
Size~45KB gzipped~3KB gzipped
EcosystemVastCompatible via preact/compat
PerformanceExcellentOptimized for speed

For projects where size and speed are priorities, Preact can be a game-changer. However, for larger applications requiring advanced state management or server-side rendering, you may still opt for React.

Using Preact Without Build Tools

One of Preact’s standout features is that you can use it directly in the browser without any build tools like Webpack or Vite. Here’s how:

Step 1: Include Preact via a CDN

Add the following script tag to your HTML file:

<script type="module">
  import { h, render } from 'https://cdn.skypack.dev/preact';

  const App = () => (
    <div>
      <h1>Hello, Preact!</h1>
    </div>
  );

  render(<App />, document.getElementById('app'));
</script>

Step 2: Create an HTML File

Here’s a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preact Without Build Tools</title>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { h, render } from 'https://cdn.skypack.dev/preact';

    const App = () => (
      <div>
        <h1>Hello, Preact Without Build Tools!</h1>
      </div>
    );

    render(<App />, document.getElementById('app'));
  </script>
</body>
</html>

Advantages of This Approach

  • No setup required: Perfect for small demos or experiments.
  • Faster prototyping: No build process needed.
  • CDN hosting ensures the library is up-to-date.

Getting Started with Preact

Let’s walk through how to set up a full Preact project for larger-scale applications.

Step 1: Install Preact

Install via npm or yarn:

npm install preact

Or:

yarn add preact

Step 2: Create a Simple Component

Here’s a basic component:

import { h } from 'preact';

const Greeting = ({ name }) => (
  <div>
    <h1>Hello, {name}!</h1>
  </div>
);

export default Greeting;

Step 3: Set Up preact/compat for React Compatibility

If you’re migrating from React or using React-based libraries, alias React to Preact:

npm install preact preact/compat

Then, update your webpack.config.js:

resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  }
}

Step 4: Create Your First App

import { h, render } from 'preact';
import Greeting from './Greeting';

const App = () => (
  <div>
    <Greeting name="Preact Developer" />
  </div>
);

render(<App />, document.getElementById('root'));

Preact CLI for Quick Development

For a quick setup:

npm install -g preact-cli
preact create my-preact-app
cd my-preact-app
npm start

SEO Tips for Preact Applications

To optimize your Preact app for search engines:

  1. Use Server-Side Rendering (SSR):
    Pre-render content with preact-render-to-string.
  2. Add Dynamic Meta Tags:
    Utilize react-helmet (compatible with Preact via preact/compat) to manage meta tags.
  3. Optimize Core Web Vitals:
    Leverage Preact’s lightweight nature to improve performance metrics like LCP, FID, and CLS.

Outbound Links

Conclusion

Preact’s lightweight design and compatibility make it a powerful choice for developers who value performance. Whether you’re building a new app or migrating an existing one, Preact simplifies the process while keeping the experience fast and user-friendly.

What’s your favorite feature of Preact? Share in the comments below!

Don’t forget to share this article and subscribe for more development tips!

Checkout our frontend category here !

Post Views: 52