upgraded eslint-config-standard-react and introduced @babel/preset-react

config/babel.config.js

@@ -5,6 +5,9 @@ module.exports = {
         'react-hot-loader/babel'
     ],
     presets: [
-        'react-app'
+        'react-app',
+        ['@babel/preset-react', {
+            'runtime': 'automatic'
+        }]
     ]
 };

config/eslint.config.js

@@ -21,6 +21,9 @@ module.exports = {
     rules: {
         'react/jsx-indent': ['error', 4],
         'react/jsx-indent-props': ['error', 4],
+        'react/jsx-uses-react': 'off',
+        'react/jsx-uses-vars': 'warn',
+        'react/react-in-jsx-scope': 'off',
         'react-hooks/exhaustive-deps': 'warn',
         'react-hooks/rules-of-hooks': 'error'
     },

package.json

@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.x.x",
+    "@babel/preset-react": "^7.x.x",
     "@hapi/eslint-config-hapi": "^13.0.2",
     "@hapi/eslint-plugin-hapi": "4.x.x",
     "@hapi/hapi": "20.x.x",
@@ -60,7 +61,7 @@
     "dotenv": "^8.2.0",
     "error-overlay-webpack-plugin": "^0.4.1",
     "eslint": "7.x.x",
-    "eslint-config-standard-react": "10.x.x",
+    "eslint-config-standard-react": "11.x.x",
     "eslint-loader": "^4.0.0",
     "eslint-plugin-jsx-a11y": "6.x.x",
     "eslint-plugin-react": "7.x.x",

src/App.js

@@ -1,4 +1,3 @@
-const React = require('react');
 const T = require('prop-types');
 const HotLoader = require('react-hot-loader/root');
 const ReactRedux = require('react-redux');

src/App.test.js

@@ -1,6 +1,5 @@
 require('regenerator-runtime/runtime');
 
-const React = require('react');
 const Testing = require('@testing-library/react');
 const App = require('./App');
 const M = require('./middle-end');

src/components/ErrorFallback.js

@@ -1,5 +1,3 @@
-const React = require('react');
-
 module.exports = () => {
 
     return (

src/components/Header.js

@@ -1,4 +1,3 @@
-const React = require('react');
 const { NavLink } = require('react-router-dom');
 const { default: Styled } = require('styled-components');
 const { default: Typography } = require('@material-ui/core/Typography');

src/components/Layout.js

@@ -1,4 +1,4 @@
-const React = require('react');
+const { Suspense } = require('react');
 const T = require('prop-types');
 const Header = require('./Header');
 const ErrorFallback = require('./ErrorFallback');
@@ -17,9 +17,9 @@ module.exports = ({ children, location }) => {
             <Header />
             <Container>
                 <ErrorBoundary key={location.key} FallbackComponent={ErrorFallback}>
-                    <React.Suspense fallback={<LoadingFallback />}>
+                    <Suspense fallback={<LoadingFallback />}>
                         {children}
-                    </React.Suspense>
+                    </Suspense>
                 </ErrorBoundary>
             </Container>
         </AppContainer>

src/components/LoadingFallback.js

@@ -1,3 +1 @@
-const React = require('react');
-
 module.exports = () => <h3>Loading...</h3>;

src/components/NotFoundPage.js

@@ -1,3 +1 @@
-const React = require('react');
-
 module.exports = () => <h3>Page not found!</h3>;

src/index.js

@@ -1,5 +1,4 @@
 const HotLoader = require('react-hot-loader');
-const React = require('react');
 const ReactDOM = require('react-dom');
 const M = require('./middle-end');
 const App = require('./App');

src/routes/counter/components/CounterPage.js

@@ -1,4 +1,3 @@
-const React = require('react');
 const T = require('prop-types');
 const { default: Button } = require('@material-ui/core/Button');
 const { default: Typography } = require('@material-ui/core/Typography');

src/routes/counter/containers/CounterPage.js

@@ -1,4 +1,3 @@
-const React = require('react');
 const { useSelector } = require('react-redux');
 const { useMiddleEnd } = require('strange-middle-end');
 const CounterPage = require('../components/CounterPage');

src/routes/helpers/not-found.js

@@ -1,10 +1,10 @@
-const React = require('react');
+const { Component } = require('react');
 const T = require('prop-types');
 const { Redirect } = require('react-router-dom');
 
 exports.CatchAllRoute = {
     path: '',
-    render: class NotFoundCatchAll extends React.Component {
+    render: class NotFoundCatchAll extends Component {
 
         static propTypes = {
             location: T.shape({
@@ -33,7 +33,7 @@ exports.CatchAllRoute = {
 
 exports.withNotFoundPage = (RouteComponent, NotFoundComponent) => {
 
-    return class RouteComponentWithNotFoundPage extends React.Component {
+    return class RouteComponentWithNotFoundPage extends Component {
 
         static propTypes = {
             location: T.shape({

src/routes/home/components/HomePage.js

@@ -1,4 +1,3 @@
-const React = require('react');
 const { default: Styled } = require('styled-components');
 const { default: DuckImage } = require('../assets/duck.jpg');
 const { default: Typography } = require('@material-ui/core/Typography');

src/routes/index.js

@@ -1,10 +1,10 @@
-const React = require('react');
+const { lazy: Lazy } = require('react');
 const Layout = require('../components/Layout');
 const NotFoundPage = require('../components/NotFoundPage');
 const NotFoundHelpers = require('./helpers/not-found');
 const HomePage = require('./home/components/HomePage');
 
-const CounterPage = React.lazy(() => import('./counter/containers/CounterPage'));
+const CounterPage = Lazy(() => import('./counter/containers/CounterPage'));
 
 module.exports = [
     {