Blogs

Back

Create Liferay 7 React Portlet

 

ReactJS is an open-source JavaScript library for building user interfaces. It’s maintained by Facebook and a community of individual developers and companies. 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 a react-portlet.

We will use “npm-react-portlet” for creating react module project. There are two ways to create react portlet:

1. Create React portlet with Blade Cli:

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.themeray.project.react -c ThemerayReactProject themeray-project-react-portlet
  • -t: Template Type (npm-react-portlet: needed to create react portlet)
  • -p: package name for the module project
  • -c: Class name for the module project
  • themeray-project-react-portlet: Name of the project

All necessary react files will be created automatically

 

2. Create React portlet with Eclipse IDE:

You can follow the below steps in Eclipse to create npm-react-portlet:

- Go to File →New→Liferay Module Project.

 

- Add your module project name

- Select the Project template name as npm-react-portlet.

 

 

- Click on the Next button.

- Add the Component Class Name (ThemerayReactProject) and Package name (com.themeray.project.react).

- Click on the Finish button

 

 

All necessary react files will be created automatically

 

 

3. 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 another react component you must have to register the component in project dependency.

You need to navigate to the directory of your Liferay-module-project in the terminal.

Then fire the below command:


  npm install [--save] [packagename]
  • packagename: name for the package you needed
  • --save: Package will appear in your dependencies

Example:


  npm install --save react-router-dom