React in Liferay 7?

[Dasha Arias, modificado hace 6 años.]

Hi all,
I'm a newbie in Liferay. I'm using Liferay 7 DXP and I want to include a portlet using React v15.6.0 in a module. This app is already done and it works well on node. How can I include the React 15.6.0 library in Liferay?

My first attempt is to render just one <div> tag, and then I'll try to include the entire react app I made. Currently I'm trying to make this work:

In my view.jsp file I have:

<%@ include file="/init.jsp" %>

<div id="root"></div>

<script type="text/babel" src="<%=request.getContextPath()%>/js/index.js"></script>

Meanwhile in my /js/index.js file:

"use strict";

ReactDOM.render(
<div>Does this work?</div>
  document.getElementById('root')
);

This does not work for me, and actually there's no error messages at all in Liferay or the console. I think it is because the <script> tag does not work. Does anyone know how can I fix this?

Any help or advice will be usefull! Thank you!!

[Jamie Sammons, modificado hace 6 años.]

Have a look at: https://github.com/mthadley/dxp-react-workshop.git. It has a working example of using React with Liferay 7.

[Andrew Jardine, modificado hace 6 años.]

That is a good example of how to using the service builder template (service/api/web modules) and to connect to the JSON WS api -- it looks like the one that I saw at the conference last year. I'm still working through all the new features in Liferay 7, but if you want to simply include your React Library at a higher level (not necessarily in a portlet -- in case you have more than one portlet on a page you don't want to load the same thing over and over) I think you would want to include it in your theme.

If you don't have your own theme but you still want to have the resources available across the site, I think you would use the new Theme Contributor https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/theme-contributors. The contributor as I understand it would contain the react stuff you need and would allow you to load them without having to create a whole theme yourself.

If I have that wrong, someone please correct me

[Chema Balsas, modificado hace 6 años.]

Hey Dasha, Andrew,

We are still putting the final touches, so take this as an early Spoiler... we are planning to push some changes soon that will make using frontend frameworks (React, Vue.js, Angular...) closer to what is usually expected.

You can play around with the currently existing implementations and ideas, but eventually, these examples are what we're aiming for: https://github.com/izaera/liferay-npm-examples/tree/master/modules

We'll announce it properly once all the pieces are in place, but just thought you might like to know ;)

[Andrew Jardine, modificado hace 6 años.]

Awesome! I can think of a lot of people I will share this with when it's ready. Thanks for sharing

[Jack Bakker, modificado hace 6 años.]

Chema Balsas:

We are still putting the final touches, so take this as an early Spoiler... we are planning to push some changes soon that will make using frontend frameworks (React, Vue.js, Angular...) closer to what is usually expected.

You can play around with the currently existing implementations and ideas, but eventually, these examples are what we're aiming for: https://github.com/izaera/liferay-npm-examples/tree/master/modules

We'll announce it properly once all the pieces are in place, but just thought you might like to know ;)

is a polymer-example feasible ?

[David H Nebinger, modificado hace 6 años.]

Jack Bakker:

is a polymer-example feasible ?

My good friend Jack is obsessed with Polymer right now. All I hear about is how great polymer is, polymer this and polymer that.

I think he's busy teaching his kids to interface with him using Polymer or something.



Just kidding, Jack, as they say it is still a work in progress, I wonder though if it wouldn't be easy to adapt on your own? They provide a lot of the bridging code, so it might be enough to clue in for polymer integration...








Come meet me at the 2017 LSNA!

[Jack Bakker, modificado hace 6 años.]

David H Nebinger:

Jack Bakker:

is a polymer-example feasible ?

My good friend Jack is obsessed with Polymer right now. All I hear about is how great polymer is, polymer this and polymer that.
I think he's busy teaching his kids to interface with him using Polymer or something.

Just kidding, Jack, as they say it is still a work in progress, I wonder though if it wouldn't be easy to adapt on your own? They provide a lot of the bridging code, so it might be enough to clue in for polymer integration...

I'm obsessing over golang, Polymer, webcomponents while connecting to Liferay api/jsonws.

As for how my kids interface with me, it is more like how you and I interface David.

Darmok and Jalad at Tanagra

[David H Nebinger, modificado hace 6 años.]

Chema Balsas:

You can play around with the currently existing implementations and ideas, but eventually, these examples are what we're aiming for: https://github.com/izaera/liferay-npm-examples/tree/master/modules

Great work Chema. If you guys want help testing this, I'm sure we can get some community help.

I've already banged into issues where local gulp is not installed, local npm modules were not installed, gradlew build fails with obtuse (at least to me) error messages, ...

Most were resolved by running "npm install --save" in each of the module directories, but there was no note of this in any of the markdown files. I'm guessing some assumptions were made about available global npm modules...





Come meet me at the 2017 LSNA!

[Dasha Arias, modificado hace 6 años.]

Thank you for your feedback you all!!

Jamie Sammons:

Have a look at: https://github.com/mthadley/dxp-react-workshop.git. It has a working example of using React with Liferay 7.

Chema Balsas:

You can play around with the currently existing implementations and ideas, but eventually, these examples are what we're aiming for: https://github.com/izaera/liferay-npm-examples/tree/master/modules

Thank you Jamie,Chema I will definitely try these examples right now!
I'll update this board as soon as possible in case anyone is having the same issues ;)

[Dasha Arias, modificado hace 6 años.]

Hi all!
I've managed to compile the React App in Liferay DXP by changing a couple of lines in build.gradle:

task gulp(type: Exec) {
	environment( "npm",  "System.getenv('PATH')")
	commandLine 'cmd', '/c',  'npm run build'
}
jar.dependsOn(gulp)

Meanwhile in my index.es.js file I have the whole React code and at the end I export the function with the component to be rendered after:

export default function renderGame(){
	ReactDOM.render(
			<game />,
			document.getElementById('root')
		);
}

Unfortunately I'm still not able to call the React App to be shown in the browser. Currently in my view.jsp file I'm calling it as:

<div id="root"></div>
<script src="/o/liferay-npm-example-react-old/lib/index.es.js">
renderGame();
</script>

I expect to import the index.es.js file and then call the function that was being exported to see the React in the browser, but I'm getting the error that states the renderGame() is undefined. I've tried several ways to get that but nothings seems to work. Does anyone have any ideas to try this work?

Thanks!