Oh, I just love those "something just clicked" :) Usually it happens in the morning, after waking up, after fiddling with something for hours, late night.
Your overview is nice, but maybe a bit too broad, and maybe some terminology is not to my liking. Let me give it a shot...
1) We don't "run" React app using Node. Browser runs it (let's ignore server side for now). Actually we don't need Node at all to program in React but yes, most people use npm, Webpack, etc. because it's easier.
So "npm start" just runs a shell command you defined yourself in your package.json. And in most cases, it is a "webpack-dev-server". Because in order for browser to run React code, it needs to get it first and browsers get stuff by contacting webservers. That's what webpack-dev-server is. It's a mini webserver that serves the final code to your browser.
2) once you do "npm start" what happens roughly is this: Node reads your package.json and searches for the command to run in there (let's say its webpack-dev-server) and runs it ---> webpack-dev-server starts but before serving anything it runs webpack ----> webpack does A LOT of stuff by calling plugins and returnes a "final code" to webpack-dev-server ----> webpack-dev-server executes file watcher to monitor changes in original files. If file watcher detects changes webpack-dev-server will rerun webpack, get new code and,,, ---> webpack starts webserver that serves final code to your browser to run
3) What Webpack does? Ther's hardly a limit on what it can do. But Webpack alone does very little. It "orchestrates" what plugins do (ones you define in webpack config for the project) and very importan it bundles the code so many js files become one (or more) bundles. But it does so much more than calling Bebel. Babel is just one of the possible plugins. Plugins can and usually do: minimize css/html/js, remove comments, compress files, copy/move files around, optimize/compress images, etc. There are hundreds of plugins, you can code your own, well, you could make your kitchen light go on with it if you have home automation system :)
Only after those plugins execute (Bebel too, but later on that), Webpack bundles the resulting js and does it so cleverly. So, if you use a huge library of 1MB in your code but use just one of its functionalities, Webpack will include only that functionality in the final bundle so it will not end up being 1MB! It called "tree shaking". It will also deduplicate (same functions/libraries used in different places/libraries will be included only once)... and a lot of other cool stuff.
What Babel, as a Webpack plugin does? It's wrong to say babels turnes jsx into js. Babel is a JavaScript compiler. Mostly you use it to write your code in nice modern ES6 and then make it runnable in browsers made when ES6 didn't even exist :) It changes the syntax to match different browsers and make it cross-browser compatible (again, you choose this in Babel settings). So it transforms, polyfills, etc. your code.
Oh, I just love those "something just clicked" :) Usually it happens in the morning, after waking up, after fiddling with something for hours, late night.
Your overview is nice, but maybe a bit too broad, and maybe some terminology is not to my liking. Let me give it a shot...
1) We don't "run" React app using Node. Browser runs it (let's ignore server side for now). Actually we don't need Node at all to program in React but yes, most people use npm, Webpack, etc. because it's easier.
So "npm start" just runs a shell command you defined yourself in your package.json. And in most cases, it is a "webpack-dev-server". Because in order for browser to run React code, it needs to get it first and browsers get stuff by contacting webservers. That's what webpack-dev-server is. It's a mini webserver that serves the final code to your browser.
2) once you do "npm start" what happens roughly is this: Node reads your package.json and searches for the command to run in there (let's say its webpack-dev-server) and runs it ---> webpack-dev-server starts but before serving anything it runs webpack ----> webpack does A LOT of stuff by calling plugins and returnes a "final code" to webpack-dev-server ----> webpack-dev-server executes file watcher to monitor changes in original files. If file watcher detects changes webpack-dev-server will rerun webpack, get new code and,,, ---> webpack starts webserver that serves final code to your browser to run
3) What Webpack does? Ther's hardly a limit on what it can do. But Webpack alone does very little. It "orchestrates" what plugins do (ones you define in webpack config for the project) and very importan it bundles the code so many js files become one (or more) bundles. But it does so much more than calling Bebel. Babel is just one of the possible plugins. Plugins can and usually do: minimize css/html/js, remove comments, compress files, copy/move files around, optimize/compress images, etc. There are hundreds of plugins, you can code your own, well, you could make your kitchen light go on with it if you have home automation system :)
Only after those plugins execute (Bebel too, but later on that), Webpack bundles the resulting js and does it so cleverly. So, if you use a huge library of 1MB in your code but use just one of its functionalities, Webpack will include only that functionality in the final bundle so it will not end up being 1MB! It called "tree shaking". It will also deduplicate (same functions/libraries used in different places/libraries will be included only once)... and a lot of other cool stuff.
What Babel, as a Webpack plugin does? It's wrong to say babels turnes jsx into js. Babel is a JavaScript compiler. Mostly you use it to write your code in nice modern ES6 and then make it runnable in browsers made when ES6 didn't even exist :) It changes the syntax to match different browsers and make it cross-browser compatible (again, you choose this in Babel settings). So it transforms, polyfills, etc. your code.
This is absolute gold - thank you so much for the in-depth explanation, I so appreciate that!
Read it over just now, and I'll probably give it a couple more reads and map it out in my notes to get a deeper idea of it.
Thank you, again :D