Не распознаёт jsx, когда добавляю package.json, как лечить?

Question

[maksmaksimovich]

Есть файл App.jsx, у него в рендере
<h1>Hello World</h1>
Всё норм работает, но если кладу этот файл в отдельную папку и рядом с файлом создаю файл package.json с таким содержанием:

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

То тогда начинает ругаться на тег h1 в рендере App.jsx

Answer 1

[Антон Спирин]

...но если кладу этот файл в отдельную папку и рядом с файлом создаю файл package.json с таким содержанием...

Зачем?

Срочно изучайте основы npm и wepack.

Если хотите собирать бандл из другой директории измените путь в свойстве entry конфига webpack:

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

package.json добавлять не надо, этот файл для других целей.

Comments

[maksmaksimovich]

Зачем?

Ну я хочу создать папку App и в неё положить файлы App.jsx, App.css
Просто тогда, чтобы вызвать файл App, нужно прописывать в импорте ./App/App
А с package.json можно прописать просто ./App
Вот для этих целей хочу создать, просто хочу сгрупировать так файлы по папкам.

[Антон Спирин]

1. Экспортируете в App/App.jsx модуль по-умолчанию:
export default App;
2. Создаете файл App/index.js c таким содержимым:
export { default } from './App';