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