2.0 KiB
2.0 KiB
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
- Step 6 explained in details in gwt-react library documentation file given at https://github.com/GWTReact/gwt-react/blob/master/DOCUMENTATION.md
- 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();
}