Step Counter - Reactxp Typing CST Test

Step Counter — Reactxp Code

Counter app with customizable step increment.

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);

Reactxp Language Guide

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.

More Reactxp Typing Exercises

Practice Other Languages