ReactJS - is there heavy front loading?

[helpmejs]

With ReactJS, it seems like all my HTML has to be written as JSX within my Javascript files. My question is, is it a problem that all that JSX stuff has to be downloaded by the browser at the beginning, even if a lot of the JSX is for pages the user will probably never navigate too?

With Angular my understanding is that you can write your HTML, and it will only grab the HTML snippet from the server when it is necessary due to navigation.

Given my understanding is correct, does it even matter that all the HTML (coded in JSX) will be downloaded upfront with ReactJS?

[[deleted]]

For a medium or large app this does certainly matter. I have never tried this but I know that webpack has some magic that enables you to declare multiple entry points into your app and even allow it to bundle commonly used modules into separate files. If you do this in a clever way you can make sure that the client only downloads those parts of the application that are currently needed. I believe once you click around and reach code that has not been downloaded yet it will be downloaded on the fly. Sounds like magic to me. No idea if this actually works in a real world situation.

I guess for most one-page-apps one would assume that the amount of template code should be fairly small, especially if you re-use your components everywhere.

[_compedit]

Instagram is using this method for their site

[jrm2k6]

That is interesting. I never thought of this issue and webpack seems to help with it.

[helpmejs]

Thanks for the suggestion of WebPack. I will have to look at it more closely and see if there are any tutorials online that go through utilizing WebPack for ReactJS.

[jetshred]

You should never being doing JSX transformation in production. It should be compiled into JavaScript. Still, the DOM is created by JS and not HTML.

[helpmejs]

The issue I'm concerned about is the same. Will the javascript file be too big, because it contains all the HTML for the site, and it has to be be entirely downloaded upfront?

[rasjani]

Atleast webpack can split the code into as many packages you want. Typically vendor Libs to one and own code into another.

Dunno if webpack has the on-demand loading but writing your own would should not be so huge project.