More redundant imports @ examples (vercel#13190)

Again, related to [12964](vercel#12964)

After checking all the other examples and the ongoing pull requests, I believe that with this PR being merged, all the examples should be free of redundant react imports.
Let me know if you want me to edit anything that you don't like.

Regards

with-typescript
with-atstroturf
with-atlaskit
with-styletron
with-styled-components-rtl
with-stylesheet
with-stomp
with-stitches-styled
with-stitches
with-slate
with-sentry-simple
with-sentry
with-segment-analytics
with-rematch
with-relay-modern
with-reflux
with-redux-wrapper
with-react-relay-network
with-react-native
with-react-multi-carousel
with-react-jss
with-react-helmet
with-react-ga
with-quill-js
with-prefetching
with-google-analytics-amp
with-google-analytics
with-framer-motion
with-flow
with-firebase-hosting
with-firebase-cloud-messaging
with-firebase-authentication
with-expo
with-dynamic-app-layout
with-draft-js
with-cxs
with-cerebral
with-ant-design-mobile
with-algolia-react-instantsearch
using-preact
progressive-render

examples/progressive-render/pages/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Loading from '../components/Loading'
 
 function useMounted() {

examples/using-preact/pages/about.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function About() {
   return <div>About us</div>
 }

examples/with-algolia-react-instantsearch/pages/index.js

@@ -1,5 +1,5 @@
 import { Head, App, findResultsState } from '../components'
-import React from 'react'
+import { Component } from 'react'
 import PropTypes from 'prop-types'
 import Router from 'next/router'
 import qs from 'qs'
@@ -9,7 +9,7 @@ const updateAfter = 700
 const searchStateToUrl = (searchState) =>
   searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : ''
 
-export default class Home extends React.Component {
+export default class Home extends Component {
   static propTypes = {
     resultsState: PropTypes.object,
     searchState: PropTypes.object,

examples/with-ant-design-mobile/pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import App from 'next/app'
 import Head from 'next/head'
 

examples/with-astroturf/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'astroturf'
 
 const Button = styled('button')`

examples/with-atlaskit/pages/index.js

@@ -1,16 +1,15 @@
-import React from 'react'
 import ButtonComponent from '../components/ButtonComponent'
 import CheckboxComponent from '../components/CheckboxComponent'
 import DateTimePickerComponent from '../components/DateTimePickerComponent'
 import DropdownMenuComponent from '../components/DropdownMenuComponent'
 
 export default function Home() {
   return (
-    <React.Fragment>
+    <>
       <ButtonComponent />
       <CheckboxComponent />
       <DateTimePickerComponent />
       <DropdownMenuComponent />
-    </React.Fragment>
+    </>
   )
 }

examples/with-cerebral/pages/index.js

@@ -1,11 +1,11 @@
-import React from 'react'
+import { Component } from 'react'
 import { Controller } from 'cerebral'
 import Devtools from 'cerebral/devtools'
 import { Container } from '@cerebral/react'
 import Page from '../components/Page'
 import clock from '../modules/clock'
 
-export default class Counter extends React.Component {
+export default class Counter extends Component {
   constructor(props) {
     super(props)
     // The controller will be instantiated for every page change and we only

examples/with-cerebral/pages/other.js

@@ -1,11 +1,11 @@
-import React from 'react'
+import { Component } from 'react'
 import { Controller } from 'cerebral'
 import Devtools from 'cerebral/devtools'
 import { Container } from '@cerebral/react'
 import Page from '../components/Page'
 import clock from '../modules/clock'
 
-export default class Counter extends React.Component {
+export default class Counter extends Component {
   constructor(props) {
     super(props)
     // The controller will be instantiated for every page change and we only

examples/with-cxs/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import cxs from 'cxs/lite'
 
 // Using cxs/lite on both the server and client,

examples/with-draft-js/pages/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Component } from 'react'
 import {
   Editor,
   EditorState,
@@ -7,7 +7,7 @@ import {
   convertFromRaw,
 } from 'draft-js'
 
-export default class App extends React.Component {
+export default class App extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -240,7 +240,7 @@ const styleMap = {
   },
 }
 
-class ToolbarButton extends React.Component {
+class ToolbarButton extends Component {
   constructor() {
     super()
     this.onToggle = (e) => {

examples/with-dynamic-app-layout/pages/green.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 import GreenLayout from '../layouts/GreenLayout'

examples/with-dynamic-app-layout/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 import BlueLayout from '../layouts/BlueLayout'

examples/with-dynamic-app-layout/pages/red.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 import RedLayout from '../layouts/RedLayout'

examples/with-emotion-11/pages/_app.js

@@ -1,5 +1,4 @@
 // import App from 'next/app'
-import * as React from 'react'
 import { CacheProvider } from '@emotion/react'
 import { cache } from '@emotion/css'
 import { globalStyles } from '../shared/styles'

examples/with-expo/pages/index.js

@@ -1,5 +1,4 @@
 // @generated: @expo/[email protected]
-import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 export default function App() {

examples/with-firebase-authentication/pages/auth.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import FirebaseAuth from '../components/FirebaseAuth'
 
 const Auth = () => {

examples/with-firebase-authentication/pages/example.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 const Example = (props) => {

examples/with-firebase-authentication/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { get } from 'lodash/object'
 import Link from 'next/link'

examples/with-firebase-cloud-messaging/pages/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { firebaseCloudMessaging } from '../utils/webPush'
 
 class Index extends Component {

examples/with-firebase-hosting/src/pages/about.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import App from '../components/App'
 
 export default function About() {

examples/with-firebase-hosting/src/pages/index.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import App from '../components/App'
 
 export default function Home() {

examples/with-flow/pages/_app.js

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 function MyApp({ Component, pageProps }) {
   return (

examples/with-flow/pages/about.js

@@ -1,5 +1,4 @@
 // @flow
-import React from 'react'
 import Page from '../components/Page'
 
 export default function About() {

examples/with-flow/pages/contact.js

@@ -1,5 +1,4 @@
 // @flow
-import React from 'react'
 import Page from '../components/Page'
 
 export default function Contact() {

examples/with-flow/pages/index.js

@@ -1,5 +1,4 @@
 // @flow
-import React from 'react'
 import Page from '../components/Page'
 
 export default function Home() {

examples/with-framer-motion/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Gallery from '../components/Gallery'
 
 const Index = () => <Gallery />

examples/with-google-analytics-amp/pages/_document.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Main, NextScript } from 'next/document'
 import { useAmp } from 'next/amp'
 

examples/with-google-analytics-amp/pages/about.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Page from '../components/Page'
 
 export default function About() {

examples/with-google-analytics-amp/pages/contact.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import Page from '../components/Page'
 
 import * as gtag from '../lib/gtag'

examples/with-google-analytics-amp/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Page from '../components/Page'
 
 export default function Home() {

examples/with-google-analytics/pages/_document.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Head, Main, NextScript } from 'next/document'
 
 import { GA_TRACKING_ID } from '../lib/gtag'

examples/with-google-analytics/pages/about.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Page from '../components/Page'
 
 export default function About() {

examples/with-google-analytics/pages/contact.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import Page from '../components/Page'
 
 import * as gtag from '../lib/gtag'

examples/with-google-analytics/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Page from '../components/Page'
 
 export default function Home() {

examples/with-prefetching/pages/_app.js

@@ -1,5 +1,4 @@
 import App from 'next/app'
-import React from 'react'
 import Nav from '../components/Nav'
 
 export default class MyApp extends App {

examples/with-quill-js/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import dynamic from 'next/dynamic'
 
 const QuillNoSSRWrapper = dynamic(import('react-quill'), {

examples/with-react-ga/pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import App from 'next/app'
 import Router from 'next/router'
 import { initGA, logPageView } from '../utils/analytics'

examples/with-react-helmet/pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Helmet } from 'react-helmet'
 
 function MyApp({ Component, pageProps }) {

examples/with-react-helmet/pages/about.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Helmet } from 'react-helmet'
 
 export default function About() {

examples/with-react-intl/pages/_app.js

@@ -1,5 +1,4 @@
 import App from 'next/app'
-import React from 'react'
 import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl'
 
 // This is optional but highly recommended

examples/with-react-jss/pages/_document.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document from 'next/document'
 import { SheetsRegistry, JssProvider, createGenerateId } from 'react-jss'
 

examples/with-react-jss/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import withStyles from 'react-jss'
 
 const styles = {

examples/with-react-multi-carousel/pages/_app.js

@@ -1,8 +1,6 @@
 /*
 This is copy paste from the with-material-ui example.
 */
-
-import React from 'react'
 import App from 'next/app'
 import Head from 'next/head'
 import { MuiThemeProvider } from '@material-ui/core/styles'

examples/with-react-multi-carousel/pages/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Component } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Carousel from 'react-multi-carousel'
 
@@ -15,7 +15,7 @@ const styles = (theme) => ({
   },
 })
 
-class Index extends React.Component {
+class Index extends Component {
   render() {
     const { classes } = this.props
     const images = [

examples/with-react-native-web/pages/_document.js

@@ -1,5 +1,5 @@
+import { Children } from 'react'
 import Document, { Head, Main, NextScript } from 'next/document'
-import React from 'react'
 import { AppRegistry } from 'react-native'
 import config from '../app.json'
 // Force Next-generated DOM elements to fill their parent's height
@@ -20,7 +20,7 @@ export default class MyDocument extends Document {
       <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
       getStyleElement(),
     ]
-    return { ...page, styles: React.Children.toArray(styles) }
+    return { ...page, styles: Children.toArray(styles) }
   }
 
   render() {

examples/with-react-native-web/pages/alternate.js

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 export default function Alternate() {

examples/with-react-native-web/pages/index.js

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 export default function App(props) {

examples/with-react-relay-network-modern/pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { QueryRenderer, fetchQuery } from 'react-relay'
 import NextApp from 'next/app'
 

examples/with-react-relay-network-modern/pages/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { graphql } from 'react-relay'
 import BlogPosts from '../components/BlogPosts'
 

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

@@ -1,5 +1,4 @@
 import App from 'next/app'
-import React from 'react'
 import { wrapper } from '../store/store'
 
 class WrappedApp extends App {

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import Page from '../components/Page'

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import Page from '../components/Page'

examples/with-reflux/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Reflux from 'reflux'
 import CounterStore from '../store/counterStore'
 import Actions from '../actions/actions'

examples/with-relay-modern/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import withData from '../lib/withData'
 import BlogPosts from '../components/BlogPosts'
 import indexPageQuery from '../queries/indexPage'

examples/with-rematch/pages/github-users.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import Link from 'next/link'
 import { connect } from 'react-redux'
 

examples/with-rematch/pages/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import Header from '../shared/components/header'

examples/with-segment-analytics/pages/_document.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import * as snippet from '@segment/snippet'
 

examples/with-segment-analytics/pages/about.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function About() {
   return (
     <div>