chore: Remove redundant imports in several examples (#13030)

examples/auth0/pages/about.js

-import React from 'react'
-
 import Layout from '../components/layout'
 import { useFetchUser } from '../lib/user'
 

examples/auth0/pages/index.js

-import React from 'react'
-
 import Layout from '../components/layout'
 import { useFetchUser } from '../lib/user'
 

examples/auth0/pages/profile.js

-import React from 'react'
-
 // This import is only needed when checking authentication status directly from getInitialProps
 // import auth0 from '../lib/auth0'
 import { useFetchUser } from '../lib/user'

examples/with-apollo-and-redux/components/Clock.js

-import React from 'react'
 import { useSelector, shallowEqual } from 'react-redux'
 
 const useClock = () => {

examples/with-apollo-and-redux/components/Counter.js

-import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 const useCounter = () => {

examples/with-apollo-and-redux/components/ErrorMessage.js

-import React from 'react'
 import PropTypes from 'prop-types'
 
 const ErrorMessage = ({ message }) => (

examples/with-apollo-and-redux/components/Layout.js

-import React from 'react'
 import Nav from './Nav'
 import PropTypes from 'prop-types'
 

examples/with-apollo-and-redux/components/PostUpvoter.js

-import React from 'react'
 import { useMutation } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import PropTypes from 'prop-types'

examples/with-apollo-and-redux/lib/apollo.js

-import React from 'react'
 import Head from 'next/head'
 import { ApolloProvider } from '@apollo/react-hooks'
 import { ApolloClient } from 'apollo-client'

examples/with-apollo-and-redux/lib/redux.js

-import React from 'react'
 import { Provider } from 'react-redux'
 import { initializeStore } from '../store'
 import App from 'next/app'

examples/with-apollo-and-redux/pages/index.js

-import React from 'react'
 import { useDispatch } from 'react-redux'
 import { withRedux } from '../lib/redux'
 import { compose } from 'redux'

examples/with-apollo-and-redux/pages/redux.js

-import React from 'react'
 import { useDispatch } from 'react-redux'
 import { withRedux } from '../lib/redux'
 import useInterval from '../lib/useInterval'

examples/with-apollo/components/PostUpvoter.js

-import React from 'react'
 import { useMutation } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 

examples/with-apollo/lib/apollo.js

-import React from 'react'
 import App from 'next/app'
 import Head from 'next/head'
 import { ApolloProvider } from '@apollo/react-hooks'

examples/with-context-api/components/Counter.js

-import React, { useReducer, useContext } from 'react'
+import { useReducer, useContext, createContext } from 'react'
 
-const CounterStateContext = React.createContext()
-const CounterDispatchContext = React.createContext()
+const CounterStateContext = createContext()
+const CounterDispatchContext = createContext()
 
 const reducer = (state, action) => {
   switch (action.type) {

examples/with-context-api/pages/about.js

-import React from 'react'
 import Link from 'next/link'
 import { useCount, useDispatchCount } from '../components/Counter'
 

examples/with-context-api/pages/index.js

-import React from 'react'
 import Link from 'next/link'
 import { useCount, useDispatchCount } from '../components/Counter'
 

examples/with-docker/pages/index.js

-import React from 'react'
-
 export default () => {
   return <h1>Hello World!</h1>
 }

examples/with-emotion/pages/_app.js

-import * as React from 'react'
 import NextApp from 'next/app'
 import { CacheProvider } from '@emotion/core'
 

examples/with-redux-observable/components/CharacterInfo.js

-import React from 'react'
 import { connect } from 'react-redux'
 
 const CharacterInfo = ({

examples/with-redux-observable/pages/_app.js

-import React from 'react'
 import { Provider } from 'react-redux'
 import App from 'next/app'
 import withRedux from 'next-redux-wrapper'

examples/with-redux-observable/pages/index.js

-import React from 'react'
+import { Component } from 'react'
 import Link from 'next/link'
 import { of, Subject } from 'rxjs'
 import { StateObservable } from 'redux-observable'
@@ -7,7 +7,7 @@ import CharacterInfo from '../components/CharacterInfo'
 import { rootEpic } from '../redux/epics'
 import * as actions from '../redux/actions'
 
-class Counter extends React.Component {
+class Counter extends Component {
   static async getInitialProps({ store, isServer }) {
     const state$ = new StateObservable(new Subject(), store.getState())
     const resultAction = await rootEpic(

examples/with-redux-observable/pages/other.js

-import React from 'react'
 import Link from 'next/link'
 
 const OtherPage = () => (

examples/with-redux-persist/components/counter.js

-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { incrementCount, decrementCount, resetCount } from '../store'

examples/with-redux-persist/components/data-list.js

-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { loadExampleData, loadingExampleDataFailure } from '../store'

examples/with-redux-persist/lib/with-redux-store.js

-import React from 'react'
+import { Component } from 'react'
 import { initializeStore } from '../store'
 
 const isServer = typeof window === 'undefined'
@@ -18,7 +18,7 @@ function getOrCreateStore(initialState) {
 }
 
 export default App => {
-  return class AppWithRedux extends React.Component {
+  return class AppWithRedux extends Component {
     static async getInitialProps(appContext) {
       // Get or Create the store with `undefined` as initialState
       // This allows you to set a custom default initialState

examples/with-redux-persist/pages/_app.js

 import App from 'next/app'
-import React from 'react'
 import withReduxStore from '../lib/with-redux-store'
 import { Provider } from 'react-redux'
 import { persistStore } from 'redux-persist'

examples/with-redux-persist/pages/index.js

-import React from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 import { startClock, serverRenderClock } from '../store'
 import Examples from '../components/examples'
 
-class Index extends React.Component {
+class Index extends Component {
   static getInitialProps({ reduxStore, req }) {
     const isServer = !!req
     // DISPATCH ACTIONS HERE ONLY WITH `reduxStore.dispatch`

examples/with-redux-saga/components/clock.js

-import React from 'react'
-
 const pad = n => (n < 10 ? `0${n}` : n)
 
 const format = t => {

examples/with-redux-saga/components/counter.js

-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { increment, decrement, reset } from '../actions'

examples/with-redux-saga/pages/_app.js

 import App from 'next/app'
-import React from 'react'
 import { Provider } from 'react-redux'
 import withRedux from 'next-redux-wrapper'
 import withReduxSaga from 'next-redux-saga'

examples/with-redux-saga/pages/index.js

-import React from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { loadData, startClock, tickClock } from '../actions'
 import Page from '../components/page'
 
-class Index extends React.Component {
+class Index extends Component {
   static async getInitialProps(props) {
     const { store, isServer } = props.ctx
     store.dispatch(tickClock(isServer))

examples/with-redux-saga/pages/other.js

-import React from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { startClock, tickClock } from '../actions'
 import Page from '../components/page'
 
-class Other extends React.Component {
+class Other extends Component {
   static async getInitialProps(props) {
     const { store, isServer } = props.ctx
     store.dispatch(tickClock(isServer))

examples/with-redux-thunk/components/clock.js

-import React from 'react'
-
 const pad = n => (n < 10 ? `0${n}` : n)
 
 const format = t =>

examples/with-redux-thunk/components/counter.js

-import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { incrementCount, decrementCount, resetCount } from '../actions'
 

examples/with-redux-thunk/components/examples.js

-import React from 'react'
 import { useSelector } from 'react-redux'
 import Clock from './clock'
 import Counter from './counter'

examples/with-redux-thunk/lib/with-redux-store.js

-import React from 'react'
+import { Component } from 'react'
 import initializeStore from '../store'
 
 const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'
@@ -17,7 +17,7 @@ function getOrCreateStore(initialState) {
 }
 
 export default App => {
-  return class AppWithRedux extends React.Component {
+  return class AppWithRedux extends Component {
     static async getInitialProps(appContext) {
       // Get or Create the store with `undefined` as initialState
       // This allows you to set a custom default initialState

examples/with-redux-thunk/pages/_app.js

-import React from 'react'
 import { Provider } from 'react-redux'
 import App from 'next/app'
 import withReduxStore from '../lib/with-redux-store'

examples/with-redux-thunk/pages/index.js

-import React, { PureComponent } from 'react'
+import { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import Link from 'next/link'
 import { startClock, serverRenderClock } from '../actions'

examples/with-redux-thunk/pages/show-redux-state.js

-import React from 'react'
 import { connect } from 'react-redux'
 import Link from 'next/link'
 

examples/with-redux-toolkit/components/clock.js

-import React from 'react'
 import { useSelector, shallowEqual } from 'react-redux'
 
 const useClock = () => {

examples/with-redux-toolkit/components/counter.js

-import React from 'react'
 import { createAction } from '@reduxjs/toolkit'
 import { useSelector, useDispatch } from 'react-redux'
 

examples/with-redux-toolkit/pages/_app.js

-import React from 'react'
 import { Provider } from 'react-redux'
 import { store } from '../store'
 

examples/with-redux-toolkit/pages/index.js

-import React from 'react'
 import { createAction } from '@reduxjs/toolkit'
 import { connect } from 'react-redux'
 import useInterval from '../lib/useInterval'

examples/with-styled-components/README.md

@@ -58,7 +58,6 @@ When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `ne
 **components/StyledLink.js**
 
 ```javascript
-import React from 'react'
 import Link from 'next/link'
 import styled from 'styled-components'
 
@@ -88,7 +87,6 @@ export default styled(StyledLink)`
 **pages/index.js**
 
 ```javascript
-import React from 'react'
 import StyledLink from '../components/StyledLink'
 
 export default () => (

examples/with-styled-components/pages/_app.js

 import App from 'next/app'
-import React from 'react'
 import { ThemeProvider } from 'styled-components'
 
 const theme = {

examples/with-styled-components/pages/index.js

-import React from 'react'
 import styled from 'styled-components'
 
 const Title = styled.h1`