Does React.js require app to be a single page

Question

I am going around React.js and my question is simple: does my app have to be a single page app if I use React?

If no then how do I control components outside of them? By FLUX? Any other standard methods?

If yes then are there any libraries to perform permissions/access validation on the client side for React?

Thanks a lot!

Battista

What do you mean "permissions/access validation on the client side"? You want any user authentication to be done server side. – Thearchy

Also what do you mean "control components outside of them"? – Thearchy

And no, the app does not have to be single page. – Thearchy

Sorry, permissions/access means authorization. Basically, when you go to page and you are not allowed to see it then you are redirected to a login page or see "access denied" page - something like this for angular: github.com/Illniyar/visor. By controlling from outside I mean API which I can use to do something with these control in a page scope if it is not the SPA. – Battista

Answer 1

A react application need not be a single page application. React provides you with a way model HTML in terms of classes with specific render logic, but doesn't impose any sort of specific application logic like single vs multi page.

I'm not quite sure I understand the rest of your questions, but I think you are essentially asking how to model a react application as a multi page app. There are many ways, however, one would be to structure your files like so:

./app --> main page for your app
    ./app/page1/ --> page 1 of your app
    ./app/page2/ --> page 2 of your app
    ...

In this way, each 'page' would contain a self contained react project. Your main application page could contain hyperlinks that load these pages, or you could load them asynchronously in your javascript code.

EDIT: The question as clarified in the comment is how does one make a react component change due to some action on the page:

Say react component B is contained within react component A. A user presses button B which is contained in react component B, and when pressed, invokes callback B in react component B, and this click should trigger some action in react component A. callback B should somehow notify react component A that things have changed.

This is where you have some choice about what to do. You could have react component B emit a change that react component A listens for (and re-renders accordingly), or you could use the FLUX model. In the FLUX model, react component B would emit a state change to some state store, which would trigger an event to be emitted. react component A will have needed to set an event callback for this event, and when react component B emits it, react component A can react to it.

Graybeard

Thanks for the response. Let me clarify what I mean. As I don't have much experience with React I think about a component like a jQuery plugin which has API. If my page is assembled on a back-end and, let's say, I press a button then how do I ask a React component to do something for me? It cannot expose API as jQuery plugin does. I know that it may be possible by FLUX but is it the only way. I am sure that I don't understand something here but I am not sure what... – Battista

Do you mean that each page has it's own component? Do I understand you right? – Battista

Yes, in this model each page would have its own component (most likely with multiple sub components). I'll answer your second question about how to get react to 'react' to things as an edit to my original answer – Graybeard