React integration in NexJ portlets

[Paolo Aparo]

Hello,

I would like to know how exactly will React js be implemented inside NexJ.
How will our React code interact with NexJ, will we be able to use React within the portlet view, will we be able to implement custom node modules (Redux, etc..), for exemple to implement a widget?

Are there some APIs already available in order to use React?

Thanks,

Paolo.

0

[Ed Shaw]

Paolo, we will be publishing documentation on how this works shortly.  I will update this post when it is up.  In the initial implementation, react components can be used for rendering the dom of a portlet.  Thanks, Ed

0

[Paolo Aparo]

Thanks for the answer, but just to be sure:

1. Will we able to install node-modules through the use of npm (so by using json packages like the example one attached)?
2. In the example.png file, the first 4 lines are node-modules. Will we be able to import node-modules, similarly to how we are doing in the image?
3. Always  in the example.png file, the 5 line after are custom components. Will we be able to import them similarly to how we are doing in the image?

Thanks,

Paolo

0

Attachments:

You must be logged in to view attached files.

[Ed Shaw]

Paolo,

The short answer is yes, with a few differences.  Our approach supports the use of npm and package.json for getting your dependencies in place.  We are experimenting with webpack to extract any required dist files and put them in the right place.

Importing libraries is supported.  We use AMD (Asynchronous Module Definition) for this so instead of using an inline import statement as you have above…

JavaScript

import React from 'react';

1	import React from 'react';

… the imports happen in the module definition at the top of your component.

JavaScript

define("MyModule", ["nexj/sys", 'react', 'someOtherComponent'],  function(sys, React, someOther) { ... React.createElement(... ...someOther.doSomething(...

1 2 3 4 5

define("MyModule", ["nexj/sys", 'react', 'someOtherComponent'],       function(sys, React, someOther) {           ... React.createElement(...          ...someOther.doSomething(...

Additionally, we are mainly using React for rendering portlet components, so the example you have above that uses routes for displaying different components won’t be needed and will be handled by the portal server.

Our best practices will evolve over time and will be reflected in the documentation.

Thanks,

Ed

 

 

0

[Paolo Aparo]

ok, so will we also be able to import third party React Widgets as node-modules (setting the urls to install them in the package.json file) and use them without problems?

0

[Ed Shaw]

Yes.  That’s the idea.  That said, the third-party React components need to be well behaved 🙂  It will be more clear once we get you the training material (which I’m trying to get you as quickly as possible).  Ciao, Ed

0

[Paolo Aparo]

Thank you for your answers,

Paolo

0

[Author]

Posts