Шаг 4. Настройка конфига для работы с React

Мы установили библиотеки, теперь нужно настроить некоторые из них.

Чтобы webpack правильно работал с файлами, имеющими расширение .jsx, нужно использовать встроенное поле:

  resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx']
}

Так как сейчас мультистраничная поддержка нам не нужна, код конфига выглядит так (но это ещё не всё):

Теперь webpack не будет «ругаться» на файлы с расширением .jsx, но он до сих пор не поддерживает синтаксис React.

Начинаем настраивать Babel. Обратите внимание, именно он стоит в качестве обработчика для файлов формата .js и .jsx.

Шагом ранее мы добавляли библиотеку @babel/preset-react. Именно она позволяет нам писать на React, а затем собирать приложение в код, понимаемый браузерами — ведь они умеют читать и исполнять только чистый JS.

В файле.babelrc в поле presets добавим нашу установленную библиотеку. Получится так:

        {
  "plugins": [
    "@babel/syntax-dynamic-import"
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}