I'm having an issue thinking about the best way to architect a React app with multiple pages/views (still a SAP).

Let's say we have a simple app with 4 major sections (pages): dashboard, users, stats, ments. Each section has different ponents in it (think react ponents). For example, the ments section would have a hierarchy like so:

CommentsSection
- CommentsQueue
-- Comment
--- Text
--- Buttons
- CommentsApproved
--Comment
--- Text
--- Buttons

In a framework like angular for example, the 4 main sections would be split into partials, and loaded in an ng-view upon request, with their respective ponents inside. When landing on the homepage, the app would only load the dashboard view and upon the user clicking on a nav item, the selected route (i.e. app/users or app/users/:id) would trigger and the app will load the required "template-view-partial" (without a browser refresh).

Now in terms of React, how would this occur? it seems like ALL views and ALL their ponents would need to be available in a browserified JS file and the app can then update the DOM.

This seems terribly wrong, as we'd be loading all sections in the first load, even if the user doesn't ever need to get to that section. Granted, we could split it with routes on the server, and only serve the ponents for the page based on the route, but that would require a browser refresh, where as in Angular for example, it would happen without a browser refresh as the view is loaded asynchronously.

The question is, how can this asynchronous loading happen in a React-based app?

I'm having an issue thinking about the best way to architect a React app with multiple pages/views (still a SAP).

Let's say we have a simple app with 4 major sections (pages): dashboard, users, stats, ments. Each section has different ponents in it (think react ponents). For example, the ments section would have a hierarchy like so:

CommentsSection
- CommentsQueue
-- Comment
--- Text
--- Buttons
- CommentsApproved
--Comment
--- Text
--- Buttons

In a framework like angular for example, the 4 main sections would be split into partials, and loaded in an ng-view upon request, with their respective ponents inside. When landing on the homepage, the app would only load the dashboard view and upon the user clicking on a nav item, the selected route (i.e. app/users or app/users/:id) would trigger and the app will load the required "template-view-partial" (without a browser refresh).

Now in terms of React, how would this occur? it seems like ALL views and ALL their ponents would need to be available in a browserified JS file and the app can then update the DOM.

This seems terribly wrong, as we'd be loading all sections in the first load, even if the user doesn't ever need to get to that section. Granted, we could split it with routes on the server, and only serve the ponents for the page based on the route, but that would require a browser refresh, where as in Angular for example, it would happen without a browser refresh as the view is loaded asynchronously.

The question is, how can this asynchronous loading happen in a React-based app?

• javascript
• angularjs
• reactjs

2 Answers 2

I think there's a few different ways in approaching this, I'll explain the approach that I am currently using for my work and side projects.

Instead of using browserify, we use a module-bundler called webpack (https://github./webpack/webpack). What's great about webpack is that it's like Browserify but can split your app into multiple 'bundles'. This is great because if we have multiple ponents/views, the user would just download the features they need for that particular view without having to download everything initially. It allows react-ponents and their dependencies to be downloaded on demand.

Pete Hunt wrote an article that goes into depth on the benefits of webpack when using it with React (including how to async load react ponents), and how it is similar/different to Browserify and modern build tools like Grunt/Gulp: https://github./petehunt/webpack-howto

I have described one solution using webpack here : http://bloggusto./asynchronous-reactjs-ponent-loading-with-webpack/

In essence :

1. use require.ensure([], cbk) to define code chunks; in the cbk, load your packages synchronously using require()
2. in your host ponent, load your asynchronous ponent in ponentWillMount(), and set in in the host ponent state.
3. use it in the host ponent render, when defined on the state