Learn Reactxp - 9 Code Examples & CST Typing Practice Test

ReactXP is a library developed by Microsoft for building cross-platform apps using a single React and React Native codebase. It enables developers to target iOS, Android, and web platforms simultaneously.

View all 9 Reactxp code examples →

ReactXP Simple Todo App ReactXP Counter App ReactXP Step Counter ReactXP Dark Mode Counter ReactXP Multi Counter ReactXP Auto Increment Counter ReactXP Todo With Priority ReactXP Countdown Timer ReactXP Counter With Alert

Learn REACTXP with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

ReactXP Simple Todo App

import RX from 'reactxp';

class TodoApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { todos: [], newTodo: '' };
    }

    addTodo = () => {
        if (this.state.newTodo.trim()) {
        this.setState({ todos: [...this.state.todos, this.state.newTodo], newTodo: '' });
        }
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.TextInput
        value={this.state.newTodo}
        onChangeText={newTodo => this.setState({ newTodo })}
        placeholder='New Todo'
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        <RX.Button onPress={this.addTodo} style={{ marginBottom: 10 }}>
        <RX.Text>Add</RX.Text>
        </RX.Button>
        {this.state.todos.map((todo, index) => (
        <RX.Text key={index}>{todo}</RX.Text>
        ))}
        </RX.View>
        );
    }
}

RX.App.register('TodoApp', () => TodoApp);

Demonstrates a simple ReactXP app with a Todo list, adding tasks, and displaying them using cross-platform components.

Let’s Try →

ReactXP Counter App

import RX from 'reactxp';

class CounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

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

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('CounterApp', () => CounterApp);

A simple counter app with increment, decrement, and reset buttons.

Let’s Try →

ReactXP Step Counter

import RX from 'reactxp';

class StepCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, step: '1' };
    }

    increment = () => this.setState({ count: this.state.count + parseInt(this.state.step || '1') });
    decrement = () => this.setState({ count: this.state.count - parseInt(this.state.step || '1') });
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.TextInput
        value={this.state.step}
        onChangeText={step => this.setState({ step })}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        placeholder='Step'
        />
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('StepCounterApp', () => StepCounterApp);

Counter app with customizable step increment.

Let’s Try →

ReactXP Dark Mode Counter

import RX from 'reactxp';

class DarkModeCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.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 (
        <RX.View style={{ padding: 20, backgroundColor: this.state.isDark ? '#333' : '#fff', flex: 1 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10, color: this.state.isDark ? '#fff' : '#000' }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset} style={{ marginRight: 10 }}><RX.Text>Reset</RX.Text></RX.Button>
        <RX.Button onPress={this.toggleTheme}><RX.Text>Toggle Theme</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('DarkModeCounterApp', () => DarkModeCounterApp);

Counter app with light/dark theme toggle.

Let’s Try →

ReactXP Multi Counter

import RX from 'reactxp';

class MultiCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { counters: [0,0,0] };
    }

    increment = index => {
        const counters = [...this.state.counters]; counters[index]++; this.setState({ counters });
    };
    decrement = index => {
        const counters = [...this.state.counters]; counters[index]--; this.setState({ counters });
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        {this.state.counters.map((count, i) => (
        <RX.View key={i} style={{ marginBottom: 10 }}>
        <RX.Text style={{ fontSize: 20 }}>Counter {i+1}: {count}</RX.Text>
        <RX.Button onPress={() => this.increment(i)} style={{ marginRight: 5 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={() => this.decrement(i)}><RX.Text>-</RX.Text></RX.Button>
        </RX.View>
        ))}
        </RX.View>
        );
    }
}

RX.App.register('MultiCounterApp', () => MultiCounterApp);

Multiple independent counters in a single view.

Let’s Try →

ReactXP Auto Increment Counter

import RX from 'reactxp';

class AutoIncrementCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, isRunning: true };
    }

    componentDidMount() {
        this.timer = setInterval(() => { if(this.state.isRunning) this.setState({ count: this.state.count + 1 }); }, 1000);
    }
    componentWillUnmount() { clearInterval(this.timer); }
    toggleRunning = () => this.setState({ isRunning: !this.state.isRunning });
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.toggleRunning} style={{ marginRight: 10 }}><RX.Text>{this.state.isRunning ? 'Pause' : 'Resume'}</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('AutoIncrementCounterApp', () => AutoIncrementCounterApp);

Counter that automatically increments every second.

Let’s Try →

ReactXP Todo With Priority

import RX from 'reactxp';

class PriorityTodoApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { todos: [], task: '', priority: '' };
    }

    addTodo = () => {
        if(this.state.task.trim()) {
        this.setState({ todos: [...this.state.todos, {task: this.state.task, priority: this.state.priority}], task:'', priority:'' });
        }
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.TextInput placeholder='Task' value={this.state.task} onChangeText={task => this.setState({ task })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
        <RX.TextInput placeholder='Priority' value={this.state.priority} onChangeText={priority => this.setState({ priority })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
        <RX.Button onPress={this.addTodo}><RX.Text>Add</RX.Text></RX.Button>
        {this.state.todos.map((todo,i) => <RX.Text key={i}>{todo.task} (Priority: {todo.priority})</RX.Text>)}
        </RX.View>
        );
    }
}

RX.App.register('PriorityTodoApp', () => PriorityTodoApp);

Todo app where each task has a priority and displays it.

Let’s Try →

ReactXP Countdown Timer

import RX from 'reactxp';

class CountdownApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 10 };
    }

    componentDidMount() {
        this.timer = setInterval(() => { if(this.state.count > 0) this.setState({ count: this.state.count - 1 }); }, 1000);
    }
    componentWillUnmount() { clearInterval(this.timer); }
    render() {
        return (
        <RX.View style={{ padding:20 }}>
        <RX.Text style={{ fontSize:24, marginBottom:10 }}>Time: {this.state.count}</RX.Text>
        <RX.Button onPress={() => this.setState({ count: 10 })}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('CountdownApp', () => CountdownApp);

Countdown timer starting from 10 seconds.

Let’s Try →

ReactXP Counter With Alert

import RX from 'reactxp';

class AlertCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        const newCount = this.state.count + 1;
        if(newCount === 10) RX.Alert.show('Count reached 10!');
        this.setState({ count: newCount });
    };
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('AlertCounterApp', () => AlertCounterApp);

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Reactxp

What is Reactxp?

What are the primary use cases for Reactxp?

Cross-platform mobile apps for iOS and Android. Web apps sharing the same codebase. Rapid prototyping of multi-platform applications. Enterprise apps requiring uniform UI across devices. Integration with React ecosystem libraries and tooling

What are the strengths of Reactxp?

Single codebase for web and mobile. Consistency in UI/UX across platforms. Leverages React and React Native knowledge. Supports TypeScript for type safety. Strong Microsoft backing and use in enterprise apps

What are the limitations of Reactxp?

Smaller community than React Native. Less frequent updates and ecosystem growth. Some platform-specific features still require custom code. Not as performant as fully native apps in extreme cases. Limited third-party library compatibility in some scenarios

How can I practice Reactxp typing speed?

CodeSpeedTest offers 9+ real Reactxp code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

ReactXP Simple Todo App

import RX from 'reactxp';

class TodoApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { todos: [], newTodo: '' };
    }

    addTodo = () => {
        if (this.state.newTodo.trim()) {
        this.setState({ todos: [...this.state.todos, this.state.newTodo], newTodo: '' });
        }
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.TextInput
        value={this.state.newTodo}
        onChangeText={newTodo => this.setState({ newTodo })}
        placeholder='New Todo'
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        <RX.Button onPress={this.addTodo} style={{ marginBottom: 10 }}>
        <RX.Text>Add</RX.Text>
        </RX.Button>
        {this.state.todos.map((todo, index) => (
        <RX.Text key={index}>{todo}</RX.Text>
        ))}
        </RX.View>
        );
    }
}

RX.App.register('TodoApp', () => TodoApp);

Demonstrates a simple ReactXP app with a Todo list, adding tasks, and displaying them using cross-platform components.

Let’s Try →

ReactXP Counter App

import RX from 'reactxp';

class CounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

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

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('CounterApp', () => CounterApp);

A simple counter app with increment, decrement, and reset buttons.

Let’s Try →

ReactXP Step Counter

import RX from 'reactxp';

class StepCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, step: '1' };
    }

    increment = () => this.setState({ count: this.state.count + parseInt(this.state.step || '1') });
    decrement = () => this.setState({ count: this.state.count - parseInt(this.state.step || '1') });
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.TextInput
        value={this.state.step}
        onChangeText={step => this.setState({ step })}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        placeholder='Step'
        />
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('StepCounterApp', () => StepCounterApp);

Counter app with customizable step increment.

Let’s Try →

ReactXP Dark Mode Counter

import RX from 'reactxp';

class DarkModeCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.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 (
        <RX.View style={{ padding: 20, backgroundColor: this.state.isDark ? '#333' : '#fff', flex: 1 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10, color: this.state.isDark ? '#fff' : '#000' }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset} style={{ marginRight: 10 }}><RX.Text>Reset</RX.Text></RX.Button>
        <RX.Button onPress={this.toggleTheme}><RX.Text>Toggle Theme</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('DarkModeCounterApp', () => DarkModeCounterApp);

Counter app with light/dark theme toggle.

Let’s Try →

ReactXP Multi Counter

import RX from 'reactxp';

class MultiCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { counters: [0,0,0] };
    }

    increment = index => {
        const counters = [...this.state.counters]; counters[index]++; this.setState({ counters });
    };
    decrement = index => {
        const counters = [...this.state.counters]; counters[index]--; this.setState({ counters });
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        {this.state.counters.map((count, i) => (
        <RX.View key={i} style={{ marginBottom: 10 }}>
        <RX.Text style={{ fontSize: 20 }}>Counter {i+1}: {count}</RX.Text>
        <RX.Button onPress={() => this.increment(i)} style={{ marginRight: 5 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={() => this.decrement(i)}><RX.Text>-</RX.Text></RX.Button>
        </RX.View>
        ))}
        </RX.View>
        );
    }
}

RX.App.register('MultiCounterApp', () => MultiCounterApp);

Multiple independent counters in a single view.

Let’s Try →

ReactXP Auto Increment Counter

import RX from 'reactxp';

class AutoIncrementCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, isRunning: true };
    }

    componentDidMount() {
        this.timer = setInterval(() => { if(this.state.isRunning) this.setState({ count: this.state.count + 1 }); }, 1000);
    }
    componentWillUnmount() { clearInterval(this.timer); }
    toggleRunning = () => this.setState({ isRunning: !this.state.isRunning });
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.toggleRunning} style={{ marginRight: 10 }}><RX.Text>{this.state.isRunning ? 'Pause' : 'Resume'}</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('AutoIncrementCounterApp', () => AutoIncrementCounterApp);

Counter that automatically increments every second.

Let’s Try →

ReactXP Todo With Priority

import RX from 'reactxp';

class PriorityTodoApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { todos: [], task: '', priority: '' };
    }

    addTodo = () => {
        if(this.state.task.trim()) {
        this.setState({ todos: [...this.state.todos, {task: this.state.task, priority: this.state.priority}], task:'', priority:'' });
        }
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.TextInput placeholder='Task' value={this.state.task} onChangeText={task => this.setState({ task })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
        <RX.TextInput placeholder='Priority' value={this.state.priority} onChangeText={priority => this.setState({ priority })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
        <RX.Button onPress={this.addTodo}><RX.Text>Add</RX.Text></RX.Button>
        {this.state.todos.map((todo,i) => <RX.Text key={i}>{todo.task} (Priority: {todo.priority})</RX.Text>)}
        </RX.View>
        );
    }
}

RX.App.register('PriorityTodoApp', () => PriorityTodoApp);

Todo app where each task has a priority and displays it.

Let’s Try →

ReactXP Countdown Timer

import RX from 'reactxp';

class CountdownApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 10 };
    }

    componentDidMount() {
        this.timer = setInterval(() => { if(this.state.count > 0) this.setState({ count: this.state.count - 1 }); }, 1000);
    }
    componentWillUnmount() { clearInterval(this.timer); }
    render() {
        return (
        <RX.View style={{ padding:20 }}>
        <RX.Text style={{ fontSize:24, marginBottom:10 }}>Time: {this.state.count}</RX.Text>
        <RX.Button onPress={() => this.setState({ count: 10 })}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('CountdownApp', () => CountdownApp);

Countdown timer starting from 10 seconds.

Let’s Try →

ReactXP Counter With Alert

import RX from 'reactxp';

class AlertCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        const newCount = this.state.count + 1;
        if(newCount === 10) RX.Alert.show('Count reached 10!');
        this.setState({ count: newCount });
    };
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('AlertCounterApp', () => AlertCounterApp);

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Reactxp

What is Reactxp?

What are the primary use cases for Reactxp?

What are the strengths of Reactxp?

What are the limitations of Reactxp?

How can I practice Reactxp typing speed?

CodeSpeedTest offers 9+ real Reactxp code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.