Doesn't recognize jsx when I add package.json, how to fix it?

Question

JavaScript

There is an App.jsx file, everything
<h1>Hello World</h1>
works fine in it in rendering, but if I put this file in a separate folder and next to the file I create a package.json file with the following content:

{
  "name": "App",
  "main": "App.jsx"
}

Then it starts to swear at the h1 tag in the App.jsx render

Answer 1

...but if I put this file in a separate folder and next to the file I create a package.json file with the following content...

What for?
Learn the basics of npm and wepack urgently.
If you want to build the bundle from another directory, change the path in the entry property of the webpack config:

module.exports = {
  entry: './path/to/my/entry/file.js'
};

package.json does not need to be added, this file is for other purposes.