Try our conversational search powered by Generative AI!

Embed a React widget from a third party React SDK within a Page and/or Block

Vote:
 

Hello all,

We have a portion of our content housed in a third party system (for a mobile app).  The UI is React based with React widgets available from the third party's React SDK.  Currently the content is duplicated manually, and we need to address that.

I've been tasked with having the React widgets display directly in our Opti-based sites (.NET Core 6 / CMS-12).  This is not a push of Opti CMS content to headless, but a pull of a dynamic UI from the React SDK.  I've had little luck finding any info on doing something similar.

I have no experience with React or any other JS-based UI library, and it's making my research more difficult.  I did find a mention of ReactJS.NET but that hasn't been updated since 2020, and likely is not supported anymore.

Any suggestions on how to approach this?

Thanks, Kevin

#316554
Edited, Feb 02, 2024 13:54
Vote:
 

Yes, React.NET is not maintained anymore so I wouldn't go this road. I didn't get fully what you are trying to do - is Opti CMS the master source for the content? Or you are trying to pull content from a different source to Opti CMS?

#316619
Feb 03, 2024 11:52
Vote:
 

Thanks for the reply Bartosz.

Opti is neither the source of the raw content or its UI code.  We want to wrap a React widget inside a block or page.  The vendor's devs noted that it would not be simple to pull in these widgets to a ASP.NET project.

#316621
Edited, Feb 03, 2024 12:39
Vote:
 

Hi
Not sure if this answers you question but this is what I do when I need React in MVC website.

  • The index.cshtml for this block should be something like this
<div id="some_unique_name"></div>
  • then you include all the scripts generated by your React app to the page (either globally or just in this view)
  • then you need some code to initialize the React 
const domNode = document.getElementById('some_unique_name');
const root = createRoot(domNode);
root.render(<YourReactComponent />);

As a result separate React App will be rendered wherever you put this block.

This is also described here: https://react.dev/learn/add-react-to-an-existing-project

#316693
Feb 05, 2024 9:14
Vote:
 

You could use something like React Abode (which replaced the excellent React Habitat) - https://github.com/labd/react-abode (It's not been touched for a while, but should do the job)

#317758
Edited, Feb 26, 2024 16:24
Vote:
 

Also check out https://github.com/DaniilSokolyuk/NodeReact.NET but might be overkill for a single react island

#317759
Feb 26, 2024 16:26
Vote:
 

https://github.com/DaniilSokolyuk/NodeReact.NET looks very promising but they do not have on the fly jsx to js so you would still have to configure transpilation/bundling etc. but probably if you have those react widgets library then you must have some kind build/test tools for those right? What is that widget library you mentioned? Is that an npm package or you were just given source code or dist?

#317806
Feb 27, 2024 13:12
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.