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
