Hi
I wondered if anyone has any thoughts or advice on writing Umbraco back office components (dashboards, content apps sections etc.) in React. The reason being is that we have React developer skills in house but not angular js which I feel would be a big learning curve for complex custom UI.
I have done a proof of concept using a UI component library called Prime React (this is just an example to prove we could leverage from the large choice of 3rd party react libraries) and it seems to work.
The approach is as follows:
- Build the react to create the js file. I have used a Create React Application example and ejected it so I can control the js file names and add multiple entry points but there are various ways of achieving this outside the scope of this discussion. The js would be built to a subfolder in the wwwroot folder.
- Add a html div tag and script reference to the compiled js in the html file used to extend the Umbraco back office. Referencing it in the html rather than the package.manifest ensures its loaded after the div tag has been created on the page
- reference the css if any in the package.manifest as usual
- use an UmbracoAuthorizedApiController in react to get data, as would be used by the angular js
As can be seen in the screenshot, it provides a quick way of writing UI in the back office. Is there any reason why this would be a bad idea from an Umbraco point of view?
Any feedback would be welcome.
Thanks
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/107974-writing-umbraco-back-office-components-in-react