> For the complete documentation index, see [llms.txt](https://michey85.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://michey85.gitbook.io/webpack/react-jsx.md).

# React JSX

Дополнительные babel зависимости:

```
yarn add -D @babel/preset-react
```

{% code title="babel.config.js" %}

```javascript
module.exports = {
    presets: [
        "@babel/preset-env",
        ["@babel/preset-react", { runtime: "automatic" } ] // конфиг уточняет каким образом обрабатывать JSX, данная запись для React 17 (позволяет не импортировать React в каждом файле)
    ]
}
```

{% endcode %}

### Чтобы не писать расширения при импортах

По умолчанию webpack ждет от нас расширения в файлах, либо подставляет .js. Чтобы использовать `.jsx` без явного указания при импорте, необходимо настроить секцию `resolve`.

{% code title="webpack.config.js" %}

```javascript
module.exports = {
    resolve: {
        extentions: [".js", ".jsx"]
    },
    module: {
    rules: [
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         use: {
           loader: "babel-loader" // этого достаточно, чтобы вебпак искал конфиг .babelrc || babel.config.js 
          }
       } 
    ]
  }
}
```

{% endcode %}