How to Embed a React Component into a Liferay DXP 7.4 Portlet

Liferay DXP 7.4 supports modern frontend frameworks like React, Angular, and Vue. This makes it possible to build rich, interactive UIs without being locked to JSP or legacy portlets.

In this tutorial, we’ll walk through embedding a React component into a Liferay DXP portlet using the npm bundler and deploying it into your portal.

1. Create a React Portlet Module

From the terminal, run the Liferay npm generator:

yo liferay-js:react

Provide inputs:

• Project name: react-greeting
• Liferay version: 7.4
• Category: Sample

This scaffolds a React portlet inside modules/react-greeting.

2. Project Structure

You’ll see something like:

react-greeting/
 ├── package.json
 ├── src/
 │   └── ReactGreeting.js
 ├── build.gradle
 └── webpack.config.js

The entry file is src/ReactGreeting.js.

3. Writing a React Component

Edit src/ReactGreeting.js:

import React from 'react';

export default function ReactGreeting({ name }) {
  return (
    <div className="alert alert-info p-3">
      <h3>Hello, {name}!</h3>
      <p>This is a React component running inside Liferay DXP 7.4</p>
    </div>
  );
}

4. Rendering the Component

Update index.js (entry point) to render the component:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactGreeting from './ReactGreeting';

export default function ({ portletNamespace }) {
  const container = document.getElementById(`${portletNamespace}-root`);

  ReactDOM.render(<ReactGreeting name="Liferay Developer" />, container);
}

In src/index.html, add a mount point:

<div id="<%= portlet.namespace %>-root"></div>

5. Build & Deploy

Run:

npm run build
./gradlew deploy

Now, in Liferay → Site Builder → Pages → Add Application, you’ll see your React Greeting portlet under Sample.

6. Adding Props & State

You can pass data from Liferay to React with configuration JSON or props.

Example with props:

<ReactGreeting name={Liferay.ThemeDisplay.getUserName()} />

This dynamically shows the logged-in user’s name.

7. Common Issues

• React not rendering? → Ensure correct mount point ID with portlet namespace.
• Hot reload not working? → Use npm run start with proxy config.
• CSS conflicts? → Scope with .react-greeting { ... } or use CSS modules.

Conclusion

Embedding React into Liferay DXP 7.4 portlets gives you the best of both worlds:

• Liferay’s enterprise platform
• React’s modern UI power