Move react dependencies to a docs.

README.md

@@ -321,10 +321,9 @@ Webpacker out of the box supports JS and static assets (fonts, images etc.) comp
 
 #### React
 
-```bash
-yarn add react react-dom @babel/preset-react
-```
+See customization example the [Customizing Babel Config](./docs/customizing_babel_config.md)
 
+#### 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
+}
+```

package/babel/preset.js

@@ -32,23 +32,11 @@ 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-proposal-class-properties', { loose: true }],
-      ['@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)
   }
 }