Examples

Here are a few examples on how React Bridge can be used.

Facebook's timer example

Taken from https://facebook.github.io/react/

TimerState.java

@SyntheticType
@STJSBridge
public class TimerState extends State {
	public Integer secondsElapsed;
}

Timer.java

@IsReactClass
public class Timer extends ReactClass<Props, TimerState> {

	public String displayName = "Timer";

	private TimeoutHandler interval;

	@Override
	public ReactElement<?> render() {
		return div(null, this.state.secondsElapsed + " seconds elapsed");
	}

	@Override
	public TimerState getInitialState() {
		return new TimerState() { {
			secondsElapsed = 0;
		} };
	}

	@Override
	public void componentDidMount(Element element) {
		this.interval = setInterval(this::tick, 1000);
	}

	@Override
	public void componentWillUnmount() {
		clearInterval(this.interval);
	}

	public void tick() {
		TimerState state = new TimerState();
		state.secondsElapsed = this.state.secondsElapsed + 1;

		setState(state);
	}
}

Usage

ReactDOM.render(React.createElement(Timer.class, null), document.getElementById("root"));

Facebook's small application example

Taken from https://facebook.github.io/react/

TodoAppState.java

@SyntheticType
@STJSBridge
public class TodoAppState extends State {
	public Array<String> items;
	public String text;
}

TodoApp.java

@IsReactClass
public class TodoApp extends ReactClass<Props, TodoAppState> {

	@Override
	public TodoAppState getInitialState() {
		return new TodoAppState() {
			{
				items = $array();
				text = "";
			}
		};
	}

	@Override
	public ReactElement<?> render() {

		TodoListProps todo = new TodoListProps();
		todo.items = this.state.items;

		return React.DOM.div(//
				null, //
				h3(null, "TODO"), //
				React.createElement(TodoList.class, todo), //
				React.createElement(//
						"form", //
						$map("onSubmit", (Consumer<Event>) this::handleSubmit), //
						React.createElement("input", $map("onChange", (Consumer<Event>) this::onChange, "value", this.state.text))
						button(null, "Add #" + (this.state.items.$length() + 1)) //
				) //
		);
	}

	public void handleSubmit(Event e) {
		e.preventDefault();
		Array<String> nextItems = this.state.items.concat($array(this.state.text));
		String nextText = "";
		this.setState(new TodoAppState() {
			{
				items = nextItems;
				text = nextText;
			}
		});
	}

	public void onChange(Event e) {
		this.setState(new TodoAppState() {
			{
				text = ((Input) e.target).value;
			}
		});
	}
}

TodoListProps.java

@SyntheticType
@STJSBridge
public class TodoListProps extends Props {
	public Array<String> items;
}

TodoList.java

@IsReactClass
public class TodoList extends ReactClass<TodoListProps, State> {

	public String displayName = "String";

	@Override
	public ReactElement<?> render() {
		Array<ReactElement<?>> elements = $array();

		for (String key : this.props.items) {
			elements.push(React.createElement("li", $map("key", key + this.props.items.$get(key)), this.props.items.$get(key)));
		}

		return React.createElement("ul", null, elements);
	}
}

Usage

ReactDOM.render(React.createElement(TodoApp.class, null), document.getElementById("root"));