chore: clean-up

Author: sean-perkins

docs/developing/autofocus.md

@@ -10,15 +10,15 @@ title: Autofocus
   />
 </head>
 
-Developers that want to set focus to an element on "page load" can use the `setFocus` API to set focus to an element. This API should be used in place of the `autofocus` attribute and called within the `ionViewDidEnter` lifecycle event.
+Developers that want to set focus to an element on "page load" can use the `setFocus` API to set focus to an element. This API should be used in place of the `autofocus` attribute and called within the `ionViewDidEnter` lifecycle event for routing applications and the `appload` event for vanilla JavaScript applications.
 
 The example below highlights the difference in behavior between the `autofocus` attribute and the `setFocus` API.
 
 import Basic from '@site/static/usage/v7/autofocus/basic/index.md';
 
 <Basic />
 
-:::warning
+:::warning Warning
 
 Developers will receive a warning in their console when using the `autofocus` attribute in the StackBlitz examples due to cross-origin restrictions.
 

static/usage/v7/autofocus/basic/index.md

@@ -16,7 +16,7 @@ import vue_example_vue from './vue/example_vue.md';
 import vue_router_ts from './vue/router_ts.md';
 
 import react_main_tsx from './react/main_tsx.md';
-import react_home_page_tsx from './react/home_page_tsx.md';
+import react_home_tsx from './react/home_tsx.md';
 
 <Playground
   version="7"
@@ -32,8 +32,8 @@ import react_home_page_tsx from './react/home_page_tsx.md';
     },
     angular: {
       files: {
-        'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
         'src/app/app.module.ts': angular_app_module_ts,
         'src/app/app.component.html': angular_app_component_html,
         'src/app/app.component.ts': angular_app_component_ts,
@@ -42,8 +42,8 @@ import react_home_page_tsx from './react/home_page_tsx.md';
     },
     react: {
       files: {
+        'src/pages/Home.tsx': react_home_tsx,
         'src/main.tsx': react_main_tsx,
-        'src/pages/HomePage.tsx': react_home_page_tsx,
       },
     },
   }}

static/usage/v7/autofocus/basic/react/home_page_tsx.md renamed to static/usage/v7/autofocus/basic/react/home_tsx.md

@@ -2,7 +2,7 @@
 import React, { useRef } from 'react';
 import { IonInput, IonItem, IonList, IonPage, useIonViewDidEnter } from '@ionic/react';
 
-const HomePage = () => {
+const Home = () => {
   const input = useRef<HTMLIonInputElement>(null);
 
   useIonViewDidEnter(() => {
@@ -23,5 +23,5 @@ const HomePage = () => {
   );
 };
 
-export default HomePage;
+export default Home;
 ```

static/usage/v7/autofocus/basic/react/main_tsx.md

@@ -5,19 +5,18 @@ import { IonReactRouter } from '@ionic/react-router';
 
 import { Route, Redirect } from 'react-router';
 
-import HomePage from './pages/HomePage';
+import Home from './pages/Home';
 
 function Example() {
   return (
     <IonReactRouter>
       <IonRouterOutlet>
-        <Redirect exact path="/" to="/home" />
-        {/*
-          Use the render method to reduce the number of renders your component will have due to a route change.
-
-          Use the component prop when your component depends on the RouterComponentProps passed in automatically.
-        */}
-        <Route path="/home" render={() => <HomePage />} exact={true} />
+        <Route exact path="/home">
+          <Home />
+        </Route>
+        <Route exact path="/">
+          <Redirect to="/home" />
+        </Route>
       </IonRouterOutlet>
     </IonReactRouter>
   );