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?
I think that in that manner you lost the "memory" ( store ) of react application if you pass to another tab.
It need that the root of react application will be at the base of the Umbraco backoffice.
I'm interested too.
At the moment, the backoffice is currently being rewritten and is scheduled for Umbraco 13 (end 2023). One of the reasons to do this, is to get rid of angular, because this version of angular is also end-of-life.
The new backoffice will use WebComponents and not a framework (like angular or react) to make sure not to have the same issues again later.
However, I believe that because the backend will be easy to extend with any framework to your liking, it should also be possible to use react:
Although we have chosen Lit and TypeScript to build the new backoffice, developers are free to use any framework and libraries of their choice to implement backoffice extensions. We will be building an extension API that is framework agnostic as stated in an earlier RFC.
So it doesn't really help you at this moment, but on the other hand, hacking react into Umbraco might not be the best thing to do when there are changes coming that probably provide the framework for what you need.
Writing Umbraco back office components in React
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:
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
Hi Sue,
Has anyone fed back to you on this, i am currently researching doing this too as Angular 1 is problematic.
I think that in that manner you lost the "memory" ( store ) of react application if you pass to another tab. It need that the root of react application will be at the base of the Umbraco backoffice. I'm interested too.
May I ask how you used
UmbracoAuthorizedApiController?I have just tried to use similar approach.
I am trying to do a request from react to the api controller but getting invalid JSON response from api as described here: https://github.com/umbraco/Umbraco-CMS/issues/12656
It is apparently intended so am wondering what was your exact approach? Thanks
At the moment, the backoffice is currently being rewritten and is scheduled for Umbraco 13 (end 2023). One of the reasons to do this, is to get rid of angular, because this version of angular is also end-of-life.
The new backoffice will use WebComponents and not a framework (like angular or react) to make sure not to have the same issues again later.
However, I believe that because the backend will be easy to extend with any framework to your liking, it should also be possible to use react:
So it doesn't really help you at this moment, but on the other hand, hacking react into Umbraco might not be the best thing to do when there are changes coming that probably provide the framework for what you need.
See this RFC for more details: https://github.com/umbraco/rfcs/blob/main/cms/0024-implement-the-new-backoffice.md
is working on a reply...