feat!: React 17 support (#538)

BREAKING CHANGE: drop classic JSX support.
If you want to still use the classic JSX support, please enable `react/jsx-uses-react` on your own.

* feat: add react/jsx-runtime for React 17

* fix: fix test for new JSX transform

* chore: create React support section in README

* Update README.md

Co-authored-by: Toru Kobayashi <koba0004@gmail.com>

README.md

@@ -112,6 +112,18 @@ To use the presets, you have to install `prettier`. We only support Prettier v2
 
 **Currently, we don't support customized Prettier config**
 
+## React Support
+
+### ⚠️ Classic JSX Syntax
+
+`@cybozu/eslint-config` is intented to be used with the [New JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). If you want to use the Classic JSX Transform (`React.createElement`), please enable the `react/jsx-uses-react` rule on your own.
+
+```js
+rules: {
+  "react/jsx-uses-react": "error"
+}
+```
+
 ## For kintone customize developers
 
 `@cybozu/eslint-config/preset/kintone-customize-es5` is a preset for kintone customize(plug-in) developers, which is based on `preset/es5` and add some `globals` for kintone.

lib/react.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: ["react", "react-hooks", "jsx-a11y"],
-  extends: ["plugin:react/recommended"],
+  extends: ["plugin:react/recommended", "plugin:react/jsx-runtime"],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,

test/fixtures/react/ok.jsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
 const Foo = () => <p>Foo</p>;
 
 const Component = () => <Foo />;
-export default Component;
+export default Component;