The intention of this blog is to give information on using React.js for ICN plugin development.

Prerequisite:

• Developer has knowledge on ICN plugin framework, more details on ICN frame work is available at http://www.redbooks.ibm.com/redbooks/pdfs/sg248055.pdf
• Developer has knowledge on React.js UI framework.
• Developer has Java knowledge.
• Eclipse with IBM Content Navigator plugin added.
• IBM Content Navigator instance to add the plugin.

these information are available IBM knowledge center or please go through redbook mention above.

Step 1: Download code from this github repo https://github.ibm.com/wangweiu/ICNReactPlugin.
      This repo is an utility which generates the skeleton code for React based UI plugin, where later we can add our own react code for UI and backend code in Java. Please go through steps mentioned in readme of this repo to generate skeleton code, Once we generate plugin using this utility, the structure of the project looks like this, our react code has to be written inside SampleFeature.jsx file.

Step 2: Now a create a new service with name ServicePluginService which can be called from web browser.

Add that service in SamplePlugin as follows,

public PluginService[] getServices() {
		if (pluginServices.length == 0) {
			pluginServices = new PluginService[] {
					new P8SampleService(),
					new SamplePluginService()
					};
		}
		return pluginServices;
	}

Now as you would be aware that once this service is invoked from frontend , control comes to execute method inside any service, so write your backend logic in SamplePluginService, a sample looks like below code

@Override
	public void execute(PluginServiceCallbacks callbacks,HttpServletRequest request, HttpServletResponse response) throws Exception {
		// Log execution
		PluginLogger logger = callbacks.getLogger();
		String methodName = "execute";
		logger.logDebug(this, methodName, request, "message = " + request.getParameter("message"));
		
		try {
				JSONObject jsonResult = new JSONObject();
				PrintWriter printWriter = response.getWriter();
				printWriter.write("Response from server");
				printWriter.close();

		}
		catch (Exception e) {
			logger.logError(this, methodName, request, e);
		}

		logger.logExit(this, methodName, request);
	 }
	
	}

Here I am just printing the message sent from frontend and sending a string message 'Response from server' as response.

Step 3: Invoking the above service from react code
Following is the sample code which has just one button , and on click of that button ‘sendmessagetoservice’ method is invoked, which in turn calls the backend service SamplePluginService. 
Add this code in SampleFeature.jsx file

class SampleFeature extends React.Component {
    constructor(props) {
        super(props);
    
    }

    sendmessagetoservice =(message)=> {
	    console.log("message", message);
	    ecm.model.Request.invokePluginService(
	      "SamplePlugin",
	      "SamplePluginservice",
	      {
	        requestParams: { message: message },
	        requestCompleteCallback: (response) => {
	          console.log("response ", response);
	            alert("response from server”, response")
	        },
	        requestFailedCallback : (error) =>{
	          console.log("request failed with error : ", error);
	        },
	        requestHeaders: { "Cache-Control": "no-cache" },
	      }
	    );
	    console.log("rbDocumentTypes", this.state.rbDocumentTypes);
	  };


    render() {
        return (
            <Button
          className="btn"
          onClick={this.sendmessagetoservice}
        >
         Click Me;
        </Button>
        )
    }
}

This above react method invokes SamplePluginService execute method.
SamplePlugin --- is your plugin name
SamplePluginservice – is your service where you would have written backend logic.

Note:Details of how to build the plugin and add it to ICN is available in the Readme.md of repo link which I shared above, adding same here for reference, please go through readme
https://github.ibm.com/wangweiu/ICNReactPlugin