Sample Project

[Nick Khoury]

Can someone point me to a sample AEM Maven project that demonstrates proper use of react-webcomponent please? I have not been able to find anything like that and I'm having trouble figuring out how to set up everything and use it properly, thanks.

[Alexandru Mirea]

Hi Nick!

I am unaware of a public AEM maven project that uses it. This library is not necessarily AEM specific. The whole idea of the project is that you can use it to expose React components as custom elements and then you can reuse these custom elements in any javascript app.

So the first thing you have to do is figure out what components you want to expose, and how you want to expose them. If you have a React project setup and you want to expose some components as custom elements, you could follow the readme add the library as a dependency and then create some custom elements. You can then create a separate build target that only builds those custom elements and generates a separate build file, let's say my-react-custom-element.js. This file will register the elements once it is included in your AEM app.

In AEM you can create a clientlib with this js file(my-react-custom-element.js) and then you can include it in your app. Once you include this in your app you should be able to use the custom elements as a regular html tag.