Learn REMIX with Real Code Examples

import { useState, useEffect } from 'react';

export default 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>
    );
}

Demonstrates a simple counter component in Remix using React hooks with client-side interactivity.

import { useState } from 'react';

export default function MaxCounter({ max = 5 }) {
    const [count, setCount] = useState(0);
    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>
    );
}

Counter stops incrementing after reaching a specified maximum value.

import { useState } from 'react';

export default function StepCounter({ step = 2 }) {
    const [count, setCount] = useState(0);
    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>
    );
}

Counter increments or decrements by a custom step value.

import { useState, useEffect } from 'react';

export default function AutoSaveCounter() {
    const [count, setCount] = useState(0);
    useEffect(() => { localStorage.setItem('count', count.toString()); }, [count]);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Automatically saves the counter value to localStorage on every change.

import { useState } from 'react';

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

Tracks a history of all increment/decrement actions.

import { useState } from 'react';

export default function DarkOnlyCounter() {
    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>
    );
}

A static counter with only theme toggle functionality.

import { useState, useEffect } from 'react';

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

Automatically increments the counter every second using useEffect.

import { useState } from 'react';

export default 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>
    );
}

Automatically switches theme based on even/odd count.

import { useState } from 'react';

export default function LambdaCounter() {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(c => c + 1)}>+</button>
        <button onClick={() => setCount(c => c - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Uses inline arrow functions for counter actions.

import { useState, useEffect } from 'react';

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

Combines step increment, history, auto-save, auto-increment, and theme toggle.