掲示板
React in Liferay 7?
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:
Meanwhile in my /js/index.js file:
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!!
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!!
Have a look at: https://github.com/mthadley/dxp-react-workshop.git. It has a working example of using React with Liferay 7.
6年前 に Andrew Jardine によって更新されました。
RE: React in Liferay 7?
Liferay Legend 投稿: 2416 参加年月日: 10/12/22 最新の投稿
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
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
6年前 に Chema Balsas によって更新されました。
RE: React in Liferay 7?
Regular Member 投稿: 127 参加年月日: 13/02/25 最新の投稿
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 ;)
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 ;)
6年前 に Andrew Jardine によって更新されました。
RE: React in Liferay 7?
Liferay Legend 投稿: 2416 参加年月日: 10/12/22 最新の投稿
Awesome! I can think of a lot of people I will share this with when it's ready. Thanks for sharing
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 ?
6年前 に David H Nebinger によって更新されました。
RE: React in Liferay 7?
Liferay Legend 投稿: 14914 参加年月日: 06/09/02 最新の投稿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!
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
6年前 に David H Nebinger によって更新されました。
RE: React in Liferay 7?
Liferay Legend 投稿: 14914 参加年月日: 06/09/02 最新の投稿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!
Thank you for your feedback you all!!
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 ;)
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 ;)
Hi all!
I've managed to compile the React App in Liferay DXP by changing a couple of lines in build.gradle:
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:
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:
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!
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!