Welcome to Preact: A Fast 3kB Alternative to React

Preact is a fast, lightweight JavaScript library that offers the same modern API as React, but is considerably smaller in size. It is designed for building high-performance applications, with a focus on speed and minimal footprint. In this blog post, we’ll introduce Preact, detail its useful APIs, and provide practical examples to help you get started.

What is Preact?

Preact is a JavaScript library developed as an alternative to React, with a size of only 3kB. Despite its small size, Preact provides the same core features and API as React, making it a perfect choice for building fast, efficient, and high-performing web applications.

Core Features of Preact

• Lightweight: Only 3kB, making it ideal for performance-critical applications.
• Fast Virtual DOM: Efficient updates and rendering.
• Compatibility: Works seamlessly with React’s ecosystem and components.
• ES6+ Features: Modern JavaScript syntax support.

Getting Started

To get started with Preact, you can include it via a CDN or install it using npm:

npm install preact

For CDN:

<script src="https://unpkg.com/preact@latest"></script>

Preact APIs and Examples

Rendering Components

Rendering components in Preact is similar to React. Here is a basic example:

 
 import { h, render } from 'preact';

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

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

Component State

Preact also supports state management via hooks:

 
 import { h, render } from 'preact';
 import { useState } from 'preact/hooks';

 const Counter = () => {
   const [count, setCount] = useState(0);

   return (
     <div>
       <p>Count: {count}</p>
       <button onClick={() => setCount(count + 1)}>Increment</button>
     </div>
   );
 };

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

Using Props

Passing props to components is straightforward:

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

 render(<Greeting name="Preact" />, document.getElementById('root'));
 

Effect Hook

Performing side effects is possible using the useEffect hook:

 
 import { h, render } from 'preact';
 import { useState, useEffect } from 'preact/hooks';

 const Timer = () => {
   const [time, setTime] = useState(new Date().toLocaleTimeString());

   useEffect(() => {
     const interval = setInterval(() => {
       setTime(new Date().toLocaleTimeString());
     }, 1000);

     return () => clearInterval(interval);
   }, []);

   return <p>Current time: {time}</p>;
 };

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

Event Handling

Handling events in Preact is similar to React:

 
 const Button = () => {
   const handleClick = () => alert('Button clicked!');

   return <button onClick={handleClick}>Click me!</button>;
 };

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

Practical App Example

Below is a simple Todo app example that demonstrates the use of Preact’s APIs:

 
 import { h, render } from 'preact';
 import { useState } from 'preact/hooks';

 const TodoApp = () => {
   const [todos, setTodos] = useState([]);
   const [inputValue, setInputValue] = useState('');

   const addTodo = () => {
     setTodos([...todos, inputValue]);
     setInputValue('');
   };

   return (
     <div>
       <h1>Todo App</h1>
       <input
         type="text"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
       <button onClick={addTodo}>Add Todo</button>
       <ul>
         {todos.map(todo => (
           <li>{todo}</li>
         ))}
       </ul>
     </div>
   );
 };

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

Now you have a basic understanding of Preact and some useful APIs to get started with your own applications. Happy coding!

Hash: 234cfe6067bef0e317c606c4114ca55ea9e18b5e1afb24a656599d575c1e3d6a