Why do I need a localhost server when I run React?

"If you're just going to check the site using React, why don't you open HTML directly on the local site?"

Probably because I thought so.However, there are some problems opening HTML directly here.

1. Absolute path cannot be displayed correctly.

Recent websites tend to use absolute paths for images such as CSS, JavaScript, icons, and links to other pages.This means that you don't have to change the code even if the HTML hierarchy changes.The react-app is now an absolute path, not an exception.

For example, HTML says <script src="/static/js/main.js">/script>, but what if I read it locally?

If you want to see it as an HTTP server, you will go to see "/static/js/main.js" on that server.However, if you open it locally, you will go to see "/static/js/main.js" on the local drive.UNIX/Liunx would go to see the exact path taken from the root, and Windows would go to see "C:\static\js\main.js" and so on.

You can't put the project file directly under the root or directly under the drive, so you have to change it to a relative path.However, as I said in the beginning, the react-app itself is designed to be an absolute pass, so I have to rewrite many things.This is very difficult and time consuming.

2. Security constraints prevent you from viewing it correctly.

Security restrictions differ on HTTP servers and locally.Local security is higher.For example, if you want to use ajax, etc. to retrieve another file and reflect it in HTML, a local file will not work because ajax, etc. cannot retrieve a local file due to security restrictions.If you can retrieve a file on a local by ajax or something like that, you can create a crazy site (<input type="file"> can retrieve a local file, but there are many restrictions to prevent it from being retrieved automatically).

There are several other locally specific limitations, depending on the browser and configuration.Therefore, a simple old site may not work, but a modern site that takes full advantage of JavaScript functionality may not work locally.

I think the two main problems are the top ones.There are other advantages such as reflecting it in real time (it's not that severe if you use watch), and it's easy to debug (I've never used react-app in earnest, so I don't know if react-app is like that).If you want to avoid the above problems, it will take more time to build and upload to the web server, and development will be delayed unless you have an environment where you can prepare a web server right away.

In addition to react-app, the building tool assumes that the parcel will start the server during development, and webpack can do the same by using webpack-dev-server.Also, most static site generators (such as Jekyll and Hugo) must be developed through such server startup.I think it's easier to check during development in a more productive environment.