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
