Skip to content

Instantly share code, notes, and snippets.

@dittos
Last active December 6, 2015 12:15
Show Gist options
  • Save dittos/f159d8437bc17bf3a2d6 to your computer and use it in GitHub Desktop.
Save dittos/f159d8437bc17bf3a2d6 to your computer and use it in GitHub Desktop.
Possibility of React + GWT?
import static react.ReactDOM.*;
class TodoList extends ReactComponent {
public static final ReactProp<List<TodoItem>> ITEMS = ReactProp.create();
public static ReactElement.Builder<TodoList> builder() {
return ReactElement.builder(TodoList.class);
}
public ReactElement render() {
ReactElement.Builder builder = ul();
for (TodoItem item : get(ITEMS)) {
builder.add(li()
.key(item.id())
.add(item.text())
.build());
}
return builder.build();
}
}
class TodoApp extends ReactComponent {
public static ReactElement.Builder<TodoApp> builder() {
return ReactElement.builder(TodoApp.class);
}
private static final ReactState<List<TodoItem>> ITEMS = ReactState.create();
private static final ReactState<String> TEXT = ReactState.create();
private final EventListener onChange = (e) -> {
setState(TEXT.to(InputElement.as(e.getEventTarget()).getValue()));
};
private final EventListener handleSubmit = (e) -> {
e.preventDefault();
List<TodoItem> nextItems = Lists.newArrayList(get(ITEMS));
nextItems.add(new TodoItem(System.currentTimeMillis(), get(TEXT)));
setState(
ITEMS.to(nextItems),
TEXT.to("")
);
};
@Override
public ReactElement render() {
return div()
.add(h3().add("TODO").build())
.add(TodoList.builder()
.prop(TodoList.ITEMS, get(ITEMS))
.build())
.add(form()
.prop("onSubmit", handleSubmit)
.add(input()
.prop("onChange", onChange)
.prop("value", get(TEXT))
.build())
.add(button()
.add("Add #" + (get(ITEMS).size() + 1))
.build())
.build())
.build();
}
}
ReactDOM.render(TodoApp.builder().build(), DOM.getElementById("container"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment