I have a single page application that I recently rewrote in React using create-react-app, because I use one complex React-Bootstrap component. The rest of my website is simple html/css/images.
Currently, I put these in the public/ folder, and both the new component and the static index.html reference some of these files. However, I am wondering whether I should be putting my CSS, JS, image, and/or HTML files in the src/index.js file instead, in order to take advantage of React's minifying/bundling features?
I initially adopted React only because of the one complex component, but now I imagine it could be better to put any CSS and images used into src/. However, it seems counter-intuitive to put all of the index.html contents into React, since they never change, and thus it would be a waste to render that content using React.
Any thoughts are much appreciated!
For static content that will always definitely exist, there isn't any benefit to putting static content into the React code instead of into the HTML. The React code may be minified, but the HTML code will be gzipped too, at least if it's being served from any sane server.
Also, a benefit of putting static content into the HTML is that the page will show that static content immediately on page load, without having to wait for the React script to download and parse.