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
