How does hot reloading work?

Question

I am learning React and I'm running it using create-react-app, which allows me to edit text in a file named App.js and as I save any changes in that file, the webpage with the address http://localhost:3000/ in browser automatically updates without reloading. Normally, while making html/plain js files, i need to reload the page. So how does it dynamically update itself?

Answer 1

There is a concept of Hot Reloading. The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. It leverages HMR and without reloading the page, replaces changed components in-place, preserving state. That means that, your change will be visible in about half a second; if it was a dialog, you wouldn't need to re-open it, your text inputs remain filled, etc. In short, it's a massive boon to iterative development where you spend much less time waiting for your app to reload. You can find more details here

Answer 2

The cli which you are using uses webpack to achieve this. Webpack is a module bundler it creates a bundle file from all your js/ts/jsx/tsx files which you embed into your index.html file.To achieve live reloading webpack uses webpack-dev-server(a small node.js express server).You can cofigure your webpack to watch for changes on your file and webpack will update your bundle file whenever your code is changed. You can learn more about how it does here. All the configurations for webpack are written in webpack.config file.You can learn more about webpack here.You can also follow this link

Answer 3

This is actually not a standalone thing.

This happen because react use webpack dev server which reload package if you make any changes.

As if you want to do same , you need to setup a local server and always make editing in same server. browserSync is also a option but you need to use nodejs then