Using React JS for the front-end

Hello,

Is it possible to use React library for the presentation of UF’s dashboard and data? We have built custom components and now is the time to pick and integrate a user and database system.

Will React (or any JS UI library) create major problems with the way UF works? We don’t want core hacks or excessive configuration complexity.

Thank you!

At the moment, UserFrosting uses jQuery for its client-side components. However, the server-side platform is completely decoupled and should not be affected by your choice of frontend framework.

That being said, I’m not sure how easily jQuery and React can co-exist on the frontend. You’d probably be better off completely replacing the jQuery components with your React components. As long as they can generate the appropriate requests and handle the responses from UF’s API (especially the Sprunje API), then I don’t see any problems here.

Do join us in chat and let us know how it goes!

I think React and jQuery can co-exist, if necessary. Though not optimal in terms of performance.

Does the slim jquery version work? Or you require the full package?

Our aim is to use React-only components for our custom Dashboard pages. I hope I can handle the user authentication (login, permissions etc) procedure without loading jQuery?

Will report on any progress, once I have it.

Thank you

If you can send XHR requests with React, then you can handle user authentication with React. Permissions and access control are all handled server-side.

Sure. React does not care about XHR, it only deals with the view. You can use the javascript Fetch API, or perhaps the jQuery AJAX library (though this is excluded in the slim version of jQuery).

Stating this for anyone who may be curious about the topic.

Good to know about the client-server decoupling. Thanks!

1 Like

This doc might also be useful (or perhaps you’d have something to contribute to it)! Something any full-stack dev needs to consider is how to transport key pieces of information, like base URLs and API keys, to the client-side application.