chore: update react imports

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

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;
   }>;
 };