Migrating to ReactJS one step at a time


(Ben Carp) #1

Our current web-app is build mostly in JSP with Struts at the back-end, and a bit of JQuery in the front end.
We plan to transition to ReactJS one step at a time. I am aware of ways to incorporate React components into JSP. However, we consider doing it the other way around. So some new pages will be build in React, and some components (header and footer for instance) will be loaded from a dedicated URL build by struts+JSP. This way we can build new clean and organized code build around React, and still use our previous JSP code for certain components.

  1. Are there any aspects we should consider before going on with this plan?
  2. How can we add a component in React from an external html source? I this SOF thread which is quite relevant. Acctoding to the thread I should use a method which uses a dangerouslySetInnerHTML property in a component. The property’s name makes me a bit uncomfortable. Is there another method? I guess there is no reason to avoid this method when we know when the HTML code comes from.

(Mikayel) #2

Instead of getting html from jsp try to get json if possible and render header and footer in react, otherwise you need to update html on most state changes.
Try to use composite view pattern, and split code per each page.


(Ben Carp) #3

This is not the case at the moment. At the moment the header has the menu, and all it can do is change the url. it can’t change the state of a specific component.
I have experience in ReactJS, but I don’t understand what you mean by “Try to use composite view pattern, and split code per each page.” Can you please clarify?


(Mikayel) #4
  1. Header may need to show selected page and when you switch between react pages how are you going to show right selected page?
  2. “composite view pattern” is just software development pattern, it is not connected with React.
  3. And for code splitting, you just need to configure your webpack and use “import”

(Ben Carp) #5

As for topic 1 - I understand. But this is not how that menu is build. The menu doesn’t need to change the state of the react component at all, as all menu buttons, at least for now, should lead to different pages.