Learn INFERNO with Real Code Examples

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch to {this.state.isDark ? 'Light' : 'Dark'} Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Basic counter with increment, decrement, reset, and theme toggle.

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, step: 5, isDark: false };

    increment = () => this.setState({ count: this.state.count + this.state.step });
    decrement = () => this.setState({ count: this.state.count - this.state.step });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+{this.state.step}</button>
        <button onClick={this.decrement}>-{this.state.step}</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter increments/decrements by a custom step value.

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, min: 0, max: 10, isDark: false };

    increment = () => this.setState({ count: Math.min(this.state.count + 1, this.state.max) });
    decrement = () => this.setState({ count: Math.max(this.state.count - 1, this.state.min) });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter with maximum and minimum limits.

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false, auto: false, timer: null };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });
    toggleAuto = () => {
        if (!this.state.auto) {
        const timer = setInterval(this.increment, 1000);
        this.setState({ auto: true, timer });
        } else {
        clearInterval(this.state.timer);
        this.setState({ auto: false, timer: null });
        }
    };

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.toggleAuto}>{this.state.auto ? 'Stop Auto' : 'Start Auto'}</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter that automatically increments every second.

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    doubleIncrement = () => this.setState({ count: this.state.count + 2 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.doubleIncrement}>++</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter increments by 2 with a special button.

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count} ({this.state.count % 2 === 0 ? 'Even' : 'Odd'})</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Shows whether the current count is even or odd.

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: parseInt(localStorage.getItem('count') || 0), isDark: false };

    increment = () => { const count = this.state.count + 1; localStorage.setItem('count', count); this.setState({ count }); };
    decrement = () => { const count = this.state.count - 1; localStorage.setItem('count', count); this.setState({ count }); };
    reset = () => { localStorage.setItem('count', 0); this.setState({ count: 0 }); };
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Persists counter value in localStorage.

import { render, Component } from 'inferno';

const themes = ['light-theme','dark-theme','blue-theme'];

class Counter extends Component {
    state = { count: 0, current: 0, theme: themes[0] };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => { const next = (this.state.current + 1) % themes.length; this.setState({ current: next, theme: themes[next] }); };

    render() {
        return (
        <div className={this.state.theme}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Cycles through multiple color themes.