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!

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.