Introduction:
ReactJS is an open-source JavaScript library for building user interfaces. It’s maintained by Facebook and a community of individual developers and companies. It allows us to create reusable UI components. ReactJS can be used as a base in the development of single-page or mobile applications. Nowadays, ReactJS become the most popular JavaScript framework to create web apps which is integrate with Liferay to create react-portlet.This blog post describes how to create an npm-react-portlet which can be deployed as a Liferay OSGi module.
Prerequisites
- Java
- Liferay Portal 7/7.x
- React
Environment Requirement
- JDK 8
- Eclipse
- Liferay Portal
- Blade CLI (read more)
- Node.Js (read more)
Create React-Portlet in Liferay
Assuming that you have already created a Liferay-workspace project in eclipse IDE.
In Liferay Development, “npm-react-portlet” is a template for creating react module project. There are two ways to create react portlet:
1) Using Blade CLI:
You can use below blade command to create react portlet:
blade create -t npm-react-portlet [-p packageName] [-c className] projectName
| -t | Template type (it must be npm-react-portlet to create react-portlet) |
| -p | Package name for the module project |
| -c | Class name for the portlet |
| projectName | Name of Liferay module project |
For example,
- Navigate to the directory of your Liferay-workspace-project in the terminal.
- Then fire the below command:
blade create -t npm-react-portlet -p com.ignek.npm.react -c IgnekNpmReact ignek-npm-react-portlet
The necessary file structure for react-portlet will automatically be created.
2) Using Eclipse IDE:
You can follow the below steps in Eclipse to create npm-react-portlet:
- Import or create the Liferay-workspace-project in which you want to create react-portlet (Liferay-workspace look like below image).
- Go to File →New→Liferay Module Project.
- Enter the Project name.
- Select the Project template name as npm-react-portlet.
- Click on Next button.
- Enter the Component Class Name & Package name.
- Click on Finish button.
The necessary file structure for react-portlet will automatically be created.
Add the dependency in react-portlet
By default, the dependencies for React and Liferay module being added in package.json when you have created the react-portlet. If you want to use other react component you must have to register the component in project dependency. You can add the dependency in the react/react-portlet by below step:
npm install [--save] [packagename]
Note: This command is fired where the package.json file is located.
| packagename | Name of the package |
| −−save | Package will appear in your dependencies |
For example,
- Navigate to the directory of your Liferay-module-project in the terminal.
- Then fire the below command to add react-router-dom:
npm install --save react-router-dom
Elevate the user experience with ReactJS Single Page Development services. Craft dynamic, responsive apps for seamless navigation and engagement. Drive conversions and stand out in the digital realm. Let’s build your next-gen SPAs! Check out our “Hire Us” services to get started.
