Expert Insights Hub

Overview:

A React portlet in Liferay 7.4 enables developers to build modern, interactive user interfaces by leveraging React’s capabilities within the Liferay DXP platform. These portlets enhance user experience through dynamic and reusable components, optimized performance, and seamless integration with Liferay's backend services and APIs. With support for modern front-end technologies, react portlets provide flexibility, efficiency, and maintainability, making them a popular choice for web application development. This blog explores how to implement CRUD (Create, Read, Update, Delete) operations using a React portlet in Liferay 7.4. 

Prerequisite:

• JDK 11 
• Liferay Server: liferay-dxp-tomcat-2024.q4.0 
• Liferay Developer Studio:  3.9.7.202207131011-ga8 
• Node.js 
• React

Steps to Perform CRUD Operations Using a React Portlet in Liferay 7.4:

1. Create a Workspace Project:

• Open Liferay Developer Studio and start the server. 
• Navigate to File → New → Liferay Workspace Project 
• Provide a project name (e.g., global-workspace) and click Finish.

2. Create a Service Builder Module

• Go to File → New → Liferay Module Project. 
• Choose the Service Builder template, enter the project name (e.g., react-crud-service), and click Next. 
• Enter the class name and package name, then click Finish. 
• The necessary file structure for Service Builder will be automatically created.

3. Add a Student Entity in service.xml 

• Modify the service.xml file to include the Student entity definition. This will enable the automatic generation of service layers for handling CRUD operation.
  

4. Build the ServiceBuilder Module

• Open Gradle Task Executor in Liferay Developer Studio. 
• Navigate to Modules → react-crud-service.
• Under the Build section, click on Build Service to execute the build task.
• Under the react-crud-service module, go to the Build section. 
• Click on Build Service to execute the build task.

• ​​Refresh the Gradle project to generate necessary packages and classes.
  

5. Implement the business logic for Create, Read, Update, and Delete (CRUD) operations in the remote service layer of the Service Builder.

• Create: Add logic to save a new student entity to the database.

• ​​​​​​Read: Fetch all students from the database.

• Update: Modify an existing student.

• Delete: Remove a student by studentId.
  

6. Create a React Portlet:

• Navigate to File → New → Liferay Module Project. 
• Provide a project name (e.g., student-react-portlet) and click Finish. 
• Select Project Template Name as react-portlet and click Next. 
• Enter the class name and package name, then click Finish. 
• The necessary file structure for the React portlet will be created.
  
  

7. Rendering Your Component:

Index.js file: Modify the index.js file to render your React component within the Liferay framework.

• App.js (Main Application Component): This file serves as the root of your React application and can manage routing, state, and global context.
  
   

8. Create Individual CRUD Components 

AddStudent.js: Create the AddStudent.js component to handle adding new students.

Output of addStudent.js Component:

• StudentList.js: Create the StudentList.js component to display the list of students.
  
  
  
  
  
  

 Output of StudentList.js Component:

• UpdateStudent.js: Create the UpdateStudent.js component to update existing student records.
  
  
  
  ​​​​

Output of update action

• Delete Student: Add a delete functionality that allows users to remove students from the list.
  
  

Output of delete action

9. Deploy the React Portlet and Test

• Deploy the React portlet  
• Navigate to Liferay's control panel and add the React portlet to a page. 

Test the CRUD operations to ensure data is being created, retrieved, updated, and deleted correctly.