Move react dependencies to a docs

Also, provide a simple example of customizing the base babel config.

Author: justin808

README.md

@@ -318,19 +318,17 @@ By default, you will find the Webpacker preset in your `package.json`.
 },
 ```
 
-Optionally, you can change your Babel configuration by removing these lines in your `package.json` and add [a Babel configuration file](https://babeljs.io/docs/en/config-files) in your project.
-
+Optionally, you can change your Babel configuration by removing these lines in your `package.json` and add [a Babel configuration file](https://babeljs.io/docs/en/config-files) in your project. For an example customization based on the original, see [Customizing Babel Config](./docs/customizing_babel_config.md).
 
 ### Integrations
 
 Webpacker out of the box supports JS and static assets (fonts, images etc.) compilation. To enable support for CoffeeScript or TypeScript install relevant packages:
 
 #### React
 
-```bash
-yarn add react react-dom @babel/preset-react
-```
+See customization example the [Customizing Babel Config](./docs/customizing_babel_config.md) for React configuration.
 
+#### Typescript
 ...if you are using typescript, update your `tsconfig.json`
 
 ```json

docs/customizing_babel_config.md

@@ -0,0 +1,59 @@
+# Customizing Babel Config
+
+## Default Configuration
+The default configuration of babel is done by using `package.json` to use the file within the `@rails/webpacker` package.
+
+```json
+{
+  "babel": {
+    "presets": [
+      "./node_modules/@rails/webpacker/package/babel/preset.js"
+    ]
+  }
+}
+```
+
+## Customizing the Babel Config
+This example shows how you can create an object and apply _additional_ presets and plugins on top of the default.
+
+### React Configuration
+To use this example file,
+
+```
+yarn add react react-dom @babel/preset-react
+yarn add --dev @pmmmwh/react-refresh-webpack-plugin react-refresh
+```
+
+```js
+// babel.config.js
+module.exports = function (api) {
+  const defaultConfigFunc = require('@rails/webpacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isProductionEnv = api.env('production')
+
+  const changesOnDefault = {
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        } 
+      ],
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types', 
+        { 
+          removeImport: true 
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      process.env.WEBPACK_SERVE && 'react-refresh/babel'
+    ].filter(Boolean),
+  }
+
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+
+  return resultConfig
+}
+```

docs/v6_upgrade.md

@@ -84,6 +84,7 @@ Example going to a specific version:
     ]
   }
   ```
+See customization example the [Customizing Babel Config](./docs/customizing_babel_config.md) for React configuration.
 
 12. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)
 

package/babel/preset.js

@@ -32,22 +32,10 @@ module.exports = function config(api) {
       moduleExists('@babel/preset-typescript') && [
         '@babel/preset-typescript',
         { allExtensions: true, isTSX: true }
-      ],
-      moduleExists('@babel/preset-react') && [
-        '@babel/preset-react',
-        {
-          development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
-        }
       ]
     ].filter(Boolean),
     plugins: [
-      ['@babel/plugin-transform-runtime', { helpers: false }],
-      isProductionEnv &&
-        moduleExists('babel-plugin-transform-react-remove-prop-types') && [
-          'babel-plugin-transform-react-remove-prop-types',
-          { removeImport: true }
-        ]
+      ['@babel/plugin-transform-runtime', { helpers: false }]
     ].filter(Boolean)
   }
 }