Synopsis

The project shows how to integrate React components into GWT application. GWT backend consists of Login service which allows users to create login sessions.

Adding React component

EmbeddedReact.ReactComponentProps componentProps = new EmbeddedReact.ReactComponentProps();
componentProps.onGoToGWTAppClicked = new MouseEventHandler() {
	@Override
	public void onMouseEvent(MouseEvent event) {
		setReactComponentVisibility(false);
		String sessionID = Cookies.getCookie("sid");
		if (sessionID == null)
			setLoginFormVisibility(true);
		else
			checkWithServerIfSessionIdIsStillLegal(sessionID, false);

	}
};
componentProps.currentLoggedUser = result.getUserName();
ReactDOM.render(React.createElement(EmbeddedReact::loggedInComponent, componentProps), Document.get().getElementById("reactAppDiv"));

Build and run solution

In Eclipse go to Build Path -> Configure Build Path, select Java Build Path on the right and Libraries in top panel. Select Add JARS and add

• gwt-interop-utils-0.4.0.jar
• gwt-react-0.6.0.jar
• gwt-servlet.jar

Libraries are located in /GWTReactApp/war/WEB-INF/lib/ folder.

Right click on project folder and select Run As -> Web Application (GWT Super Dev Mode)

Adding additional React modules

1. Step 6 explained in details in gwt-react library documentation file given at https://github.com/GWTReact/gwt-react/blob/master/DOCUMENTATION.md
2. Add updated .js file to the project, add it as static <script> tag to project’s html, or inject it on run time using

ScriptInjector.fromString(JsClientBundle.INSTANCE.gwtreactbundlejs().getText()).inject();
ScriptInjector.fromString(JsClientBundle.INSTANCE.gwtreactrouterbundlejs().getText()).inject();

in onModuleLoad()

public interface JsClientBundle extends ClientBundle {
	final JsClientBundle INSTANCE = GWT.create(JsClientBundle.class);
 	@Source("resources/gwt-react-bundle.min.js")
	TextResource gwtreactbundlejs();
 	@Source("resources/gwt-react-router-bundle.min.js")
	TextResource gwtreactrouterbundlejs();
}