58 lines
2.0 KiB
Markdown
58 lines
2.0 KiB
Markdown
## 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
|
||
|
||
```Java
|
||
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
|
||
|
||
```Java
|
||
ScriptInjector.fromString(JsClientBundle.INSTANCE.gwtreactbundlejs().getText()).inject();
|
||
ScriptInjector.fromString(JsClientBundle.INSTANCE.gwtreactrouterbundlejs().getText()).inject();
|
||
```
|
||
in `onModuleLoad()`
|
||
|
||
```Java
|
||
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();
|
||
}
|
||
```
|
||
|