chore(babel-preset-gatsby): Updated README to include babel presets (#…

…35069)

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Lennart <lekoarts@gmail.com>

docs/docs/reference/config-files/gatsby-config.md

@@ -370,7 +370,7 @@ See more about [adding develop middleware](/docs/api-proxy/#advanced-proxying).
 
 ## jsxRuntime
 
-Setting to "automatic" allows the use of JSX without having to import React. More information can be found on the [Introducing the new JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) blog post.
+Setting to `automatic` allows the use of JSX without having to import React. More information can be found on the [Introducing the new JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) blog post.
 
 ```javascript:title=gatsby-config.js
 module.exports = {
@@ -380,10 +380,13 @@ module.exports = {
 
 ## jsxImportSource
 
-With the new jsxRuntime you can set which package React should use as underlying jsx transformer. For example you can set it to "@emotion/react" so by default @emotion/react is used instead of the react package.
+When `jsxRuntime` is set you can choose which package React should use as underlying JSX transformer with `jsxImportSource`. For example you can set it to `@emotion/react` so by default `@emotion/react` is used instead of the `react` package.
 
 ```javascript:title=gatsby-config.js
 module.exports = {
+  jsxRuntime: "automatic",
   jsxImportSource: "@emotion/react",
 }
 ```
+
+**Please note:** For now you'll also need to set this configuration inside `babel-preset-gatsby`, see [its jsxImportSource documentation](https://github.com/gatsbyjs/gatsby/blob/master/packages/babel-preset-gatsby/README.md#reactImportSource).

packages/babel-preset-gatsby/README.md

@@ -37,4 +37,28 @@ npm install --dev babel-preset-gatsby
 
 `{ [string]: number | string }`, defaults to `{ "browsers": ["last 4 versions", "safari >= 7", "ie >= 9"] }` in production and `{ "browsers": ["last 2 versions", "not ie <= 11", "not android 4.4.3"] }` in development when targeting the browser and `{ "node": 6 }` in production and `{ "node": "current" }` in development when targeting Node.js.
 
-Use this option to configure [custom target browsers](https://www.gatsbyjs.com/docs/babel/).
+Use this option to configure [custom target browsers](https://www.gatsbyjs.com/docs/how-to/custom-configuration/babel/).
+
+### `reactRuntime`
+
+`'classic' | 'automatic'`, defaults to `'classic'`. Allows the use of JSX without having to import React (learn more in the [official blog post](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)). If you only want to set the runtime to `automatic` without a custom JSX transformer, you can use the [`gatsby-config` option](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#jsxruntime).
+
+### `reactImportSource`
+
+`string`, defaults to `null`. Set which package React should use as underlying JSX transformer. For example you can set it to `@emotion/react` so by default `@emotion/react` is used instead of the react package. In order to use `reactImportSource` you must set `reactRuntime` to automatic.
+
+Example:
+
+```json
+{
+  "presets": [
+    [
+      "babel-preset-gatsby",
+      {
+        "reactRuntime": "automatic",
+        "reactImportSource": "@emotion/react"
+      }
+    ]
+  ]
+}
+```