React Rendering Portlets.

[Max Widmaier]

Hello community,

I am building a portlet that requires the use of using React (AFL and MDA are too restricting for what we’re trying to build). I am using webpack to package the portlet, but I was/am running into issues, so I decided to just try a Hello World. I basically copy-pasted the code from training and still nothing renders.
Project structure:

└─ config/    └─ webpack.js └─ mod/    └─   react-dom.js    └─ react.js    └─  src/    └─ libexport.js    └─ app/      └─ hello.js    └─ portlets/      └─  Hello.js    └─ ext/ui/react      └─ hello.js

1 2 3 4 5 6 7 8 9 10 11 12 13

└─ config/    └─ webpack.js └─ mod/    └─   react-dom.js    └─ react.js    └─  src/    └─ libexport.js    └─ app/      └─ hello.js    └─ portlets/      └─  Hello.js    └─ ext/ui/react      └─ hello.js

My Code:

src/portlets/Hello.js

JavaScript

import React from 'react'; function Hello(props) { const {} = props; return (<div>Hello World</div>); } Hello.propTypes = { }; Hello.defaultProps = { }; export default Hello;

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import React from 'react';    function Hello(props) {     const {} = props;     return (<div>Hello World</div>); }    Hello.propTypes = { };    Hello.defaultProps = { };    export default Hello;

src/app/hello.js

JavaScript

define("app/hello", ["nexj/ui", "ext/ui/react/hello" , "nexj/ui/core"], function( ui, training ) {"use strict"; return function() { console.log("about to create Hello portlet/table views"); return ui("Portlet", {children: [ ui(training.Hello) ]}); }; });

1 2 3 4 5 6 7 8 9 10

define("app/hello", ["nexj/ui", "ext/ui/react/hello"             , "nexj/ui/core"],     function( ui, training ) {"use strict";     return function() {         console.log("about to create Hello portlet/table views");         return ui("Portlet", {children: [             ui(training.Hello)         ]});     }; });

src/ext/…/hello.js

define("ext/ui/react/hello", ["nexj/sys", "nexj/ui", "exports", "nexj/ui/core"], function(sys, ui, training) {"use strict"; training.Hello = sys.derive(ui.View, [ui.ModelHelper], {}); });

1 2 3 4

define("ext/ui/react/hello", ["nexj/sys", "nexj/ui", "exports", "nexj/ui/core"], function(sys, ui, training) {"use strict"; training.Hello = sys.derive(ui.View, [ui.ModelHelper], {}); });

src/libexport.js

JavaScript

export {default as Hello} from './portlets/Hello';

1	export {default as Hello} from './portlets/Hello';

 

It is really odd as to what’s happening. There are no errors but the portlet just doesn’t render. I don’t know if I’m missing something or what.

0

• This topic was modified 1 year, 9 months ago by Max Widmaier.

[Max Widmaier]

SOLVED!

I found my solution to this issue! After a lot of digging and experimentation, I found that I need to add a dom.js(x) to my file structure with the same name as my portlet. Specifically, ext/ui/react/hello/dom.js. This I assume handles the actual rendering. That’s why things wouldn’t render.

0

[Author]

Posts