Best Practices : When using React with Liferay DXP

React has been a popular platform which has been in demand now a days .

React is popular for several reasons, which have contributed to its widespread adoption among developers:

  1. Efficiency and Performance: React’s virtual DOM and efficient rendering algorithms make it highly performant. Component Reusability: React’s component-based architecture promotes reusability, allowing developers to create modular and independent components.
  2. Declarative Syntax: React uses a declarative syntax, which means developers describe what they want the UI to look like based on the current state.
  3. Large Ecosystem and Community: React has a thriving ecosystem with a wide range of libraries, tools, and resources available.
  4. React Native: React Native, built on top of React, allows developers to build mobile applications using JavaScript.
  5. Backed by Facebook and Community Trust: React was developed by Facebook, one of the world’s leading technology companies. Its association with a major industry player has instilled trust and confidence in React’s stability, reliability, and ongoing support. The backing of Facebook, along with the active community and continuous development, has solidified React’s position as a reliable and widely adopted technology.
  6. Ease of Learning and Adoption: React has a gentle learning curve compared to other frameworks, making it accessible to developers of various skill levels.
  7. Compatibility and Integration: React can be easily integrated with other libraries and frameworks.

Different ways of React and Liferay DXP Integration

Liferay provides 3 major ways how  React can be used with it . Following are the 3 ways

  1. Adapting the SPA into a single Widget
  2. Connecting the External React Apps with Liferay Headless APIs
  3. Extracting React components into different Liferay Widgets

Different scenarios when each integration way can be used

Following are the various scenarios when you can use each method of Integration.

  1. Adapting the SPA into a single Widget – This is the easiest way of integration of React Applications within Liferay DXP . Advantages of this method is that its very simple to integrate as we could add the external React application as a Remote app within a single widget of Liferay . Disadvantage being it may not be very Design friendly and Flexibility in terms of UI is reduced drastically
  2. Connecting the External React Apps with Liferay Headless APIs – This method of integration could be used when the requirement is to use an existing or external React application need to use the Liferay DXP platform and its features. For example we need an independent React application to use the Liferay User accounts data for login and then may be to read and updates the CMS data .
  3. Extracting React components into different Liferay Widgets – While this way may be the best way of integration in terms of Design and Flexibility but it may be a Labor Intensive process. In this process the react components can be divided logically into components which could be displayed individually in different widgets . This gives good presentability and the most preferred way for a complex applications .

 

Language
Scroll to Top