Update README.md

The existing code from the docs will result in `Cannot find module 'eslint-plugin-react/configs/recommended'`.  Updated the README page with a working example.

Author: vixero-dev

README.md

@@ -217,66 +217,43 @@ In the new config system, `plugin:` protocol(e.g. `plugin:react/recommended`) is
 As eslint does not automatically import the preset config (shareable config), you explicitly do it by yourself.
 
 ```js
-const reactRecommended = require('eslint-plugin-react/configs/recommended');
-
-module.exports = [
-  …
-  reactRecommended, // This is not a plugin object, but a shareable config object
-  …
-];
-```
-
-You can of course add/override some properties.
-
-**Note**: Our shareable configs does not preconfigure `files` or [`languageOptions.globals`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
-For most of the cases, you probably want to configure some properties by yourself.
-
-```js
-const reactRecommended = require('eslint-plugin-react/configs/recommended');
+const react = require('eslint-plugin-react');
 const globals = require('globals');
 
 module.exports = [
   …
+  'eslint:recommended',
+  react.configs.recommended, // <-- add the recommended config into the array
   {
-    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
-    ...reactRecommended,
-    languageOptions: {
-      ...reactRecommended.languageOptions,
-      globals: {
-        ...globals.serviceworker,
-        ...globals.browser;
-      },
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    plugins: {
+      react,
     },
-  },
-  …
-];
-```
-
-The above example is same as the example below, as the new config system is based on chaining.
-
-```js
-const reactRecommended = require('eslint-plugin-react/configs/recommended');
-const globals = require('globals');
-
-module.exports = [
-  …
-  {
-    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
-    ...reactRecommended,
-  },
-  {
-    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
     languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
       globals: {
-        ...globals.serviceworker,
         ...globals.browser,
       },
     },
+    rules: {
+      // ... any rules you want
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error',
+    },
+    // ... others are omitted for brevity
   },
   …
 ];
 ```
 
+You can of course add/override some properties.
+
+**Note**: Our shareable configs do not preconfigure `files` or [`languageOptions.globals`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
+
 ## List of supported rules
 
 <!-- begin auto-generated rules list -->