Simple Todo App - Reactxp Typing CST Test

Simple Todo App — Reactxp Code

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

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

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