Learn PREACT with Real Code Examples

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

function Counter() {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    useEffect(() => {
        const savedCount = localStorage.getItem('count');
        if (savedCount) setCount(parseInt(savedCount, 10));
    }, []);

    useEffect(() => {
        localStorage.setItem('count', count.toString());
    }, [count]);

    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
        <button onClick={() => setIsDark(!isDark)}>Switch to {isDark ? 'Light' : 'Dark'} Theme</button>
        </div>
    );
}

export default Counter;

Basic Preact counter with dark/light theme toggle.

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

function StepCounter() {
    const [count, setCount] = useState(0);
    const step = 2;
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default StepCounter;

Counter increments/decrements by a step value using Preact.

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

function MaxCounter() {
    const [count, setCount] = useState(0);
    const max = 5;
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => count < max && setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default MaxCounter;

Stops incrementing after a maximum count is reached.

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

function AutoResetCounter() {
    const [count, setCount] = useState(0);
    const threshold = 10;
    const increment = () => setCount(c => (c + 1 > threshold ? 0 : c + 1));
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={increment}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default AutoResetCounter;

Automatically resets when counter exceeds threshold.

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

function HistoryCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const increment = () => { setCount(count + 1); setHistory([...history,'Increment']); };
    const decrement = () => { setCount(count - 1); setHistory([...history,'Decrement']); };
    const reset = () => { setCount(0); setHistory([...history,'Reset']); };
    return (
        <div>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        </div>
    );
}

export default HistoryCounter;

Tracks increment/decrement history.

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

function DarkModeCounter() {
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

export default DarkModeCounter;

Static counter with only dark/light theme toggle.

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

function AutoIncrementCounter() {
    const [count, setCount] = useState(0);
    useEffect(() => { const interval = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(interval); }, []);
    return <h2>Counter: {count}</h2>;
}

export default AutoIncrementCounter;

Automatically increments counter every second.

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

function ConditionalThemeCounter() {
    const [count, setCount] = useState(0);
    const isDark = count % 2 === 0;
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default ConditionalThemeCounter;

Theme changes automatically based on even/odd counter value.

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

function FullCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const [isDark, setIsDark] = useState(false);
    const step = 2, max = 10;
    useEffect(() => { const interval = setInterval(() => { setCount(c => { let n = c + step; if(n > max) n = 0; setHistory(h => [...h,'Auto Increment']); return n; }); },1000); return () => clearInterval(interval); }, []);
    const increment = () => { setCount(c => c + step); setHistory(h => [...h,'Increment']); };
    const decrement = () => { setCount(c => c - step); setHistory(h => [...h,'Decrement']); };
    const reset = () => { setCount(0); setHistory(h => [...h,'Reset']); };
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

export default FullCounter;

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.