chore: update react imports

Signed-off-by: Paul Schultz <pschultz@pobox.com>

docs/api/utility-apis.md

@@ -37,7 +37,6 @@ components. For example, the
 [`ErrorApi`](../reference/core-plugin-api.errorapi.md) can be accessed like this:
 
 ```tsx
-import React from 'react';
 import { useApi, errorApiRef } from '@backstage/core-plugin-api';
 
 export const MyComponent = () => {

docs/features/search/getting-started.md

@@ -24,7 +24,6 @@ Create a new `packages/app/src/components/search/SearchPage.tsx` file in your
 Backstage app with the following contents:
 
 ```tsx
-import React from 'react';
 import { Content, Header, Page } from '@backstage/core-components';
 import { Grid, List, Card, CardContent } from '@material-ui/core';
 import {

docs/features/search/how-to-guides.md

@@ -242,8 +242,6 @@ which renderers to use. Note that the order of the renderers matters! The first
 Here is an example of customizing your `SearchPage`:
 
 ```tsx title="packages/app/src/components/searchPage.tsx"
-import React from 'react';
-
 import { Grid, Paper } from '@material-ui/core';
 import BuildIcon from '@material-ui/icons/Build';
 
@@ -325,8 +323,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
 Assuming you have completely customized your SearchModal, here's an example that renders results with extensions:
 
 ```tsx title="packages/app/src/components/searchModal.tsx"
-import React from 'react';
-
 import { DialogContent, DialogTitle, Paper } from '@material-ui/core';
 import BuildIcon from '@material-ui/icons/Build';
 

docs/features/software-catalog/catalog-customization.md

@@ -442,7 +442,6 @@ import {
   EntityTypePicker,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import React from 'react';
 
 export const CustomCatalogPage = () => {
   const orgName =

docs/features/software-templates/writing-custom-field-extensions.md

@@ -29,7 +29,6 @@ As an example, we will create a component that validates whether a string is in
 
 ```tsx
 //packages/app/src/scaffolder/ValidateKebabCase/ValidateKebabCaseExtension.tsx
-import React from 'react';
 import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react';
 import type { FieldValidation } from '@rjsf/utils';
 import FormControl from '@material-ui/core/FormControl';

docs/features/software-templates/writing-custom-step-layouts.md

@@ -18,8 +18,7 @@ This is the same [field](https://rjsf-team.github.io/react-jsonschema-form/docs/
 
 The [createScaffolderLayout](https://backstage.io/docs/reference/plugin-scaffolder-react.createscaffolderlayout) function is used to mark a component as a custom step layout:
 
-```ts
-import React from 'react';
+```tsx
 import { scaffolderPlugin } from '@backstage/plugin-scaffolder';
 import {
   createScaffolderLayout,

docs/features/techdocs/addons.md

@@ -181,8 +181,7 @@ provided by the Addon framework.
 
 ```tsx
 // plugins/your-plugin/src/addons/MakeAllImagesCatGifs.tsx
-
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useShadowRootElements } from '@backstage/plugin-techdocs-react';
 
 // This is a normal react component; in order to make it an Addon, you would

docs/features/techdocs/how-to-guides.md

@@ -135,6 +135,7 @@ You can easily customize the TechDocs home page using TechDocs panel layout
 Modify your `App.tsx` as follows:
 
 ```tsx
+import { Fragment, PropsWithChildren } from 'react';
 import { TechDocsCustomHome } from '@backstage/plugin-techdocs';
 //...
 
@@ -175,7 +176,7 @@ const techDocsTabsConfig = [
         filterPredicate: filterEntity,
         panelType: 'TechDocsIndexPage',
         title: 'All',
-        panelProps: { PageWrapper: React.Fragment, CustomHeader: React.Fragment, options: options },
+        panelProps: { PageWrapper: Fragment, CustomHeader: Fragment, options: options },
       },
     ],
   },
@@ -184,7 +185,7 @@ const docsFilter = {
   kind: ['Location', 'Resource', 'Component'],
   'metadata.annotations.featured-docs': CATALOG_FILTER_EXISTS,
 }
-const customPageWrapper = ({ children }: React.PropsWithChildren<{}>) =>
+const customPageWrapper = ({ children }: PropsWithChildren<{}>) =>
   (<PageWithHeader title="Docs" themeId="documentation">{children}</PageWithHeader>)
 const AppRoutes = () => {
   <FlatRoutes>
@@ -212,7 +213,7 @@ maintain such a component in a new directory at
 For example, you can define the following Custom home page component:
 
 ```tsx
-import React from 'react';
+import { ReactNode } from 'react';
 
 import { Content } from '@backstage/core-components';
 import {
@@ -232,7 +233,7 @@ import { EntityListDocsGrid } from '@backstage/plugin-techdocs';
 
 export type CustomTechDocsHomeProps = {
   groups?: Array<{
-    title: React.ReactNode;
+    title: ReactNode;
     filterPredicate: ((entity: Entity) => boolean) | string;
   }>;
 };

docs/frontend-system/architecture/36-routes.md

@@ -40,7 +40,6 @@ Route refs do not have any behavior themselves. They are an opaque value that re
 The code snippet in the previous section does not indicate which plugin the route belongs to. To do so, you have to use it in the creation of any kind of routable extension, such as a page extension:
 
 ```tsx title="plugins/catalog/src/plugin.tsx"
-import React from 'react';
 import {
   createFrontendPlugin,
   createPageExtension,
@@ -91,7 +90,6 @@ Route references can be used to link to page in the same plugin, or to pages in
 Suppose we are creating a plugin that renders a Catalog index page with a link to a "Foo" component details page. Here is the code for the index page:
 
 ```tsx title="plugins/catalog/src/components/IndexPage.tsx"
-import React from 'react';
 import { useRouteRef } from '@backstage/frontend-plugin-api';
 import { detailsRouteRef } from '../routes';
 
@@ -125,7 +123,6 @@ We use the `useRouteRef` hook to create a link generator function that returns t
 Let's see how the details page can get the parameters from the URL:
 
 ```tsx title="plugins/catalog/src/components/DetailsPage.tsx"
-import React from 'react';
 import { useRouteRefParams } from '@backstage/frontend-plugin-api';
 import { detailsRouteRef } from '../routes';
 
@@ -169,7 +166,6 @@ export const createComponentExternalRouteRef = createExternalRouteRef();
 External routes are also used in a similar way as regular routes:
 
 ```tsx title="plugins/catalog/src/components/IndexPage.tsx"
-import React from 'react';
 import { useRouteRef } from '@backstage/frontend-plugin-api';
 import { createComponentExternalRouteRef } from '../routes';
 
@@ -194,7 +190,6 @@ Given the above binding, using `useRouteRef(createComponentExternalRouteRef)` wi
 Now the only thing left is to provide the page and external route via a plugin:
 
 ```tsx title="plugins/catalog/src/plugin.tsx"
-import React from 'react';
 import {
   createFrontendPlugin,
   createPageExtension,
@@ -333,7 +328,6 @@ export const detailsSubRouteRef = createSubRouteRef({
 Using subroutes in a page extension is as simple as this:
 
 ```tsx title="plugins/catalog/src/components/IndexPage.tsx"
-import React from 'react';
 import { Routes, Route, useLocation } from 'react-router-dom';
 import { useRouteRef } from '@backstage/frontend-plugin-api';
 import { indexRouteRef, detailsSubRouteRef } from '../routes';
@@ -381,7 +375,6 @@ export const IndexPage = () => {
 This is how you can get the parameters of a sub route URL:
 
 ```tsx title="plugins/catalog/src/components/DetailsPage.tsx"
-import React from 'react';
 import { useParams } from 'react-router-dom';
 
 export const DetailsPage = () => {
@@ -405,7 +398,6 @@ export const DetailsPage = () => {
 Finally, see how a plugin can provide subroutes:
 
 ```tsx title="plugins/catalog/src/plugin.tsx"
-import React from 'react';
 import {
   createFrontendPlugin,
   createPageExtension,

docs/frontend-system/building-apps/08-migrating.md

@@ -86,7 +86,6 @@ There is one more detail that we need to deal with before moving on. The `app.cr
 
 ```tsx title="in packages/app/src/index.tsx"
 import '@backstage/cli/asset-types';
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 // highlight-remove-next-line
 import App from './App';

docs/frontend-system/building-plugins/02-testing.md

@@ -25,7 +25,6 @@ A component can be used for more than one extension, and it should be tested ind
 Use the `renderInTestApp` helper to render a given component inside a Backstage test app:
 
 ```tsx
-import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderInTestApp } from '@backstage/frontend-test-utils';
 import { EntityDetails } from './plugin';
@@ -44,7 +43,6 @@ describe('Entity details component', () => {
 To mock [Utility APIs](../architecture/33-utility-apis.md) that are used by your component you can use the `TestApiProvider` to override individual API implementations. In the snippet below, we wrap the component within a `TestApiProvider` in order to mock the catalog client API:
 
 ```tsx
-import React from 'react';
 import { screen } from '@testing-library/react';
 import {
   renderInTestApp,

docs/getting-started/app-custom-theme.md

@@ -416,8 +416,6 @@ In your front-end application, locate the `src` folder. We suggest creating the
 ```tsx title="customIcons.tsx"
 import { SvgIcon, SvgIconProps } from '@material-ui/core';
 
-import React from 'react';
-
 export const ExampleIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 24 24">
     <path

docs/getting-started/homepage.md

@@ -37,8 +37,6 @@ yarn --cwd packages/app add @backstage/plugin-home
 Inside your `packages/app` directory, create a new file where our new homepage component is going to live. Create `packages/app/src/components/home/HomePage.tsx` with the following initial code
 
 ```tsx
-import React from 'react';
-
 export const HomePage = () => (
   /* We will shortly compose a pretty homepage here. */
   <h1>Welcome to Backstage!</h1>
@@ -156,7 +154,6 @@ contribute, check the
 > [Contributing documentation](https://github.com/backstage/backstage/blob/master/plugins/home/README.md#contributing)
 
 ```tsx
-import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import { HomePageCompanyLogo } from '@backstage/plugin-home';
 

docs/tutorials/enable-public-entry.md

@@ -32,7 +32,6 @@ With that, Backstage's cli and backend will detect public entry point and serve
 2. This file is the public entry point for your application, and it should only contain what unauthenticated users should see:
 
    ```tsx title="in packages/app/src/index-public-experimental.tsx"
-   import React from 'react';
    import ReactDOM from 'react-dom/client';
    import { createApp } from '@backstage/app-defaults';
    import { AppRouter } from '@backstage/core-app-api';

docs/tutorials/quickstart-app-plugin.md

@@ -134,7 +134,6 @@ changes, let's start by wiping this component clean.
 1. Replace everything in the file with the following:
 
 ```tsx
-import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import Alert from '@material-ui/lab/Alert';
 import { Table, TableColumn, Progress } from '@backstage/core-components';

docs/tutorials/react18-migration.md

@@ -50,7 +50,6 @@ To switch a project to React 18, there are generally three changes that need to
 
 ```tsx title="packages/app/src/index.tsx"
 import '@backstage/cli/asset-types';
-import React from 'react';
 // highlight-remove-next-line
 import ReactDOM from 'react-dom';
 // highlight-add-next-line