React Global Components

RE: React Global Components

2025-01-13T16:32:36Z

To reuse a React component like Footer in multiple React portlets, you can define the Footer component in a shared or common directory that is accessible to both portlets. Typically, you would create a separate folder, such as src/components, and place the Footer.js component there. Both portlets can then import the Footer component from this centralized location. For instance, in both portlet files, you would import the Footer component using a relative path like import Footer from '../components/Footer'. This allows both portlets to use the same Footer component without duplicating code. Additionally, if your application is large or uses micro-frontends, you might consider a package manager or module bundler that handles dependencies across different portlets, ensuring the component remains consistent across them.

RE: React Global Components

2020-01-13T10:18:42Z

@Vahid, Were you able to achieve that, I am also trying to do that. I followed the link provided by Ivan, my .npmbundlerrc of module (test-react-portlet) is as below
"config": {
       "imports": {
           "react-provider": {
                       "prop-types": "15.6.2",
                       "react": "16.8.6",
                   "react-dom": "16.8.6"
           },
               "common-component": {
                       "/": "1.0.0"
           },
               "redux-store": {
                   "/": "1.0.0"
               }
       }
   }my common-component module contains one Button.js component and I am trying to use this Button component into test-react-portlet as import Button from 'common-component' but I am not able to do this. I am getting below error on browser console while going to use test-react-portlet in the page.Liferay AMD Loader: Unhandled failure : <script src="http://localhost:8080common-component@1.0.0/src/index.js?languageId=en_US"> while resolving modules.see the src url inside script http://localhost:8080 missing slash(/o/resolved-module/) , I think it should be http://localhost:8080/o/js/resolved-module/common-component@1.0.0/src/index.js?languageId=en_US.Now what I have to do.

RE: React Global Components

2019-12-14T20:59:33Z

No, a component can't be imported from another portlet, I think their scopes are separate,
And as David said the best solution is creating npm package and importing it into various portlet.

RE: React Global Components

2019-12-14T20:25:52Z

Thanks my friend for all of your solutions

RE: React Global Components

2019-12-10T09:20:38Z

You can see an example application with two widget portlets and three shared bundles that export React and Redux for the other two to consume here:
https://github.com/izaera/liferay-js-toolkit-showcase/tree/react
That may inspire you on how to structure your solution.

RE: React Global Components

2019-12-09T15:04:03Z

I think so.
Liferay has put a lot of effort in their loader to support things like that. You should be able to export your component in one bundle and require/import it in another module (or portlet). I have never tried it, but it should be possible.
https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/referencing-an-npm-modules-package
https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/obtaining-dependency-npm-package-descriptors

RE: React Global Components

2019-12-08T14:22:19Z

You can't and you shouldn't do this.

Each portlet, by definition, should be able to render itself regardless of the page that it gets dropped on. There should be no dependencies on other portlets or even the global context because there is always a possibility those things won't be there.

A portlet is still just a portlet, even if it is written in React. Give them both the same footer component and let them render it.

That said, you're free to use your own NPM repository, build React components and publish them into your NPM repo, then each React portlet could depend upon that component from your repo, but that's compile-time management of your components, not runtime management.

React Global Components

2019-12-08T13:34:47Z

Hello
How can I reuse a React Component in separate React portlets?
for more detail, assume I have two react portlet and they import the same Component named Footer,
How and Where can I define Footer that can be used in both?