[Docs] jsx-uses-react, react-in-jsx-scope: document react/jsx-runtime config

Author: pkuczynski

CHANGELOG.md

@@ -17,9 +17,11 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 ### Changed
 * [Docs] [`jsx-no-bind`]: updates discussion of refs ([#2998][] @dimitropoulos)
 * [Refactor] `utils/Components`: correct spelling and delete unused code ([#3026][] @ohhoney1)
+* [Docs] [`jsx-uses-react`], [`react-in-jsx-scope`]: document [`react/jsx-runtime`] config ([#3018][] @pkuczynski @ljharb)
 
 [#3026]: https://github.com/yannickcr/eslint-plugin-react/pull/3026
 [#3025]: https://github.com/yannickcr/eslint-plugin-react/pull/3025
+[#3018]: https://github.com/yannickcr/eslint-plugin-react/pull/3018
 [#3016]: https://github.com/yannickcr/eslint-plugin-react/issues/3016
 [#3006]: https://github.com/yannickcr/eslint-plugin-react/pull/3006
 [#3001]: https://github.com/yannickcr/eslint-plugin-react/pull/3001
@@ -3298,6 +3300,8 @@ If you're still not using React 15 you can keep the old behavior by setting the
 ### Added
  * First revision
 
+[`react/jsx-runtime`]: https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/index.js#L163-L176
+
 [`display-name`]: docs/rules/display-name.md
 [`forbid-component-props`]: docs/rules/forbid-component-props.md
 [`forbid-elements`]: docs/rules/forbid-elements.md

README.md

@@ -21,6 +21,7 @@ $ npm install eslint-plugin-react --save-dev
 
 # Configuration
 
+
 Use [our preset](#recommended) to get reasonable defaults:
 
 ```json
@@ -30,6 +31,8 @@ Use [our preset](#recommended) to get reasonable defaults:
   ]
 ```
 
+If you are using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), extend [`react/jsx-runtime`](https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/index.js#L163-L176) in your eslint config to disable the relevant rules.
+
 You should also specify settings that will be shared across all the plugin rules. ([More about eslint shared settings](https://eslint.org/docs/user-guide/configuring/configuration-files#adding-shared-settings))
 
 ```json5

docs/rules/jsx-uses-react.md

@@ -43,4 +43,6 @@ var Hello = <div>Hello {this.props.name}</div>;
 
 ## When Not To Use It
 
-If you are not using JSX, if React is declared as global variable or if you do not use the `no-unused-vars` rule then you can disable this rule.
+If you are not using JSX, if React is declared as global variable, or if you do not use the `no-unused-vars` rule.
+
+If you are using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), you should disable this rule by extending [`react/jsx-runtime`](https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/index.js#L163-L176) in your eslint config.

docs/rules/react-in-jsx-scope.md

@@ -1,7 +1,6 @@
 # Prevent missing React when using JSX (react/react-in-jsx-scope)
 
-When using JSX, `<a />` expands to `React.createElement("a")`. Therefore the
-`React` variable must be in scope.
+When using JSX, `<a />` expands to `React.createElement("a")`. Therefore the `React` variable must be in scope.
 
 If you are using the @jsx pragma this rule will check the designated variable and not the `React` one.
 
@@ -43,4 +42,6 @@ var Hello = <div>Hello {this.props.name}</div>;
 
 ## When Not To Use It
 
-If you are setting `React` as a global variable you can disable this rule.
+If you are not using JSX, or if you are setting `React` as a global variable.
+
+If you are using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), you should disable this rule by extending [`react/jsx-runtime`](https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/index.js#L163-L176) in your eslint config.