Learn DOJO with Real Code Examples

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const Counter = factory(function Counter() {
    const state = { count: 0, isDark: false };
    return (
        <div classes={[state.isDark ? 'dark-theme' : 'light-theme']}>
        <h2>Counter: {state.count}</h2>
        <div>
        <button onclick={() => state.count++}>+</button>
        <button onclick={() => state.count--}>-</button>
        <button onclick={() => state.count = 0}>Reset</button>
        </div>
        <button onclick={() => state.isDark = !state.isDark}>
        Switch to {state.isDark ? 'Light' : 'Dark'} Theme
        </button>
        </div>
    );
});
export default Counter;

Basic Dojo counter with dark/light theme toggle.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const StepCounter = factory(function StepCounter() {
    const state = { count: 0, step: 2 };
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <button onclick={() => state.count += state.step}>+</button>
        <button onclick={() => state.count -= state.step}>-</button>
        <button onclick={() => state.count = 0}>Reset</button>
        </div>
    );
});
export default StepCounter;

Counter increments/decrements by a step value.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const MaxCounter = factory(function MaxCounter() {
    const state = { count: 0, max: 5 };
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <button onclick={() => { if(state.count < state.max) state.count++; }}>+</button>
        <button onclick={() => state.count--}>-</button>
        <button onclick={() => state.count = 0}>Reset</button>
        </div>
    );
});
export default MaxCounter;

Stops incrementing after a maximum value is reached.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const AutoResetCounter = factory(function AutoResetCounter() {
    const state = { count: 0, threshold: 10 };
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <button onclick={() => state.count = (state.count + 1 > state.threshold ? 0 : state.count + 1)}>+</button>
        <button onclick={() => state.count--}>-</button>
        <button onclick={() => state.count = 0}>Reset</button>
        </div>
    );
});
export default AutoResetCounter;

Automatically resets when counter exceeds threshold.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const HistoryCounter = factory(function HistoryCounter() {
    const state = { count: 0, history: [] };
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <div>History: {state.history.join(', ')}</div>
        <button onclick={() => { state.count++; state.history.push('Increment'); }}>+</button>
        <button onclick={() => { state.count--; state.history.push('Decrement'); }}>-</button>
        <button onclick={() => { state.count=0; state.history.push('Reset'); }}>Reset</button>
        </div>
    );
});
export default HistoryCounter;

Tracks increment/decrement history.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const DarkModeCounter = factory(function DarkModeCounter() {
    const state = { isDark: false };
    return (
        <div classes={[state.isDark ? 'dark-theme' : 'light-theme']}>
        <h2>Counter: 0</h2>
        <button onclick={() => state.isDark = !state.isDark}>Toggle Theme</button>
        </div>
    );
});
export default DarkModeCounter;

Static counter with only theme toggle.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const AutoIncrementCounter = factory(function AutoIncrementCounter() {
    const state = { count: 0 };
    setInterval(() => state.count++, 1000);
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        </div>
    );
});
export default AutoIncrementCounter;

Automatically increments counter every second.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const ConditionalThemeCounter = factory(function ConditionalThemeCounter() {
    const state = { count: 0 };
    return (
        <div classes={[state.count % 2 === 0 ? 'dark-theme' : 'light-theme']}>
        <h2>Counter: {state.count}</h2>
        <button onclick={() => state.count++}>+</button>
        <button onclick={() => state.count--}>-</button>
        <button onclick={() => state.count=0}>Reset</button>
        </div>
    );
});
export default ConditionalThemeCounter;

Theme changes automatically based on even/odd counter value.

import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create();
const FullCounter = factory(function FullCounter() {
    const state = { count: 0, history: [], isDark: false, step: 2, max: 10 };
    setInterval(() => { let n = state.count + state.step; if(n>state.max) n=0; state.count=n; state.history.push('Auto Increment'); }, 1000);
    return (
        <div classes={[state.isDark ? 'dark-theme' : 'light-theme']}>
        <h2>Counter: {state.count}</h2>
        <div>History: {state.history.join(', ')}</div>
        <button onclick={() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Increment'); }}>+</button>
        <button onclick={() => { state.count-=state.step; state.history.push('Decrement'); }}>-</button>
        <button onclick={() => { state.count=0; state.history.push('Reset'); }}>Reset</button>
        <button onclick={() => state.isDark=!state.isDark}>Toggle Theme</button>
        </div>
    );
});
export default FullCounter;

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