Reaction, asynchronous loading for multiple sections / views with various components

Question

I am having a problem thinking about how best to create a React application with multiple pages / views (still SAP).

Let's say we have a simple application with 4 main sections (pages): panel, users, statistics, comments. Each section has different components in it (think about the components of the reaction). For example, the comment section will have this hierarchy:

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

Within the framework of, for example, angular, the 4 main sections will be divided into partial and loaded into the ng-view upon request with their corresponding components inside. When landing on the home page, the application will download only the control panel view and when the user clicks on the navigation element, the selected route (for example, application / users or application / users /: id) will be launched, and the application will load the required “with partial display of the template” (without browser updates).

Now, from a React perspective, how will this happen? it seems that ALL views and ALL their components should be available in a JS file being viewed, and the application can then update the DOM.

This seems terribly wrong as we load all partitions into the first boot, even if the user no longer needs to get into that section. Of course, we could divide it into routes on the server and serve only the components for the page based on the route, but this will require updating the browser, for example, in angular, for example, this will happen without updating the browser, as the view loads asynchronously.

The question is, how can this asynchronous download happen in a React-based application?

Answer 1

I think that there are several different ways to approach this, I will explain the approach that I now use for my work projects and parties.

Instead of using a browser, we use a package module called webpack ( https://github.com/webpack/webpack ). What's great about webpack is that it is like Browserify, but it can split your application into several “packages”. This is great, because if we have several components / views, the user will simply load the functions necessary for this particular view, without having to load everything from the very beginning. This allows you to download the reaction components and their dependencies on demand.

Pete Hunt wrote an article detailing the benefits of webpack when using it with React (including how to respond asynchronously to components), and how it is similar / different from Browserify and modern build tools like Grunt / Gulp: https://github.com/petehunt/webpack-howto

Answer 2

I described one solution using webpack here: http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/

Essentially:

• use require.ensure([], cbk) to define code fragments; in cbk, load your packages synchronously using require()
• in the host component, load the asynchronous component in componentWillMount() and set it to the state of the host component.
• use it in rendering the host component if it is defined in state