How to migrate JSP pages to React?

However thanks to time and changing trends approach to creating layout shifted towards React. So how do you migrate existing JSP pages to React? In my experience I settled on a hybrid approach that combines these two technologies. We can create components using React and then inject that component into an existing JSP file. This solution seems like a half measure – why not just replace everything with React? But in reality pages don’t exist in a vacuum – they are a part of an ecosystem where they are referenced in other applications and have their own authentication. This approach can help us with quickly reverting changes to the old way if such need would appear.  

Also it solves another crucial issue: if you are just starting your work on redesigning all those pages you can’t do everything at once. This approach allows us to substitute only a part of given page while leaving other parts intact. Thanks to that our work can be divided into smaller chunks and users don’t have to wait for everything to be finished to start seeing results and giving you feedback. Thanks to our approach we can still work on other parts of the application and leave unaffected JSP elements of the layout alone until they are ready to be remade

1. Creating your React component

Your component structure should look like this:

This will render your component in a specified element with a given id that we will add to the JSP file.

2. Adding webpack entry points

We need to add our component to the webpack definition so that it will generate a bundle for our component. We just need to add our component to the existing entry points definition:

We also need to generate a jsp file containing this newly generated Javascript file. To do that we will use a webpack plugin: 

 Now you can add an element with your unique id for your component that you defined in the first step (note that this path is the output path form generating webpack files from the previous step) 

Some people might think that When recreating code from JSP we can have problems with the Java code imbedded inside HTML but you might notice that this sounds awfully familiar to JSX from react – HTML code combined with JavaScript. Therefore we should not have any problems with recreating most of the existing logic. However one problem arises when there are any interactions between the rest of JSP elements and the one you just replaced. There is however one trick we can use here – we can make use of event listeners and events to send data between those two technologies. To send data create a custom event and fill it with data you need 

To receive this data you must just add an event listener where you need to receive data – React or a JavaScript file attached to the JSP HTML code: 

Just remember to remove those listeners in the useEffect if you add them in React! 

I hope this article explained some of the problems you might encounter when working with JSP and React, however I hope it also showed that working with legacy code can be a great learning experience where you are tested on your knowledge and are forced to come up with creative ideas to your problems – and that’s what’s programming is all about!