Today I began to embark on a new journey with Ionic. In the past I have used Ionic and Angular and loved it. Now that React is available with ionic, I started their tutorial and its kinda confusing for someone like me who knows nothing about React. So I will simplify it for you here.

I followed Ionic's "Build Your First Ionic React App" tutorial, at the end of this page you will see how each file should look like after you are done.

I will start at the point where you have created a  blank app. If you don't know how to do that, go to ionic framework.com to find out or simply send this command:

ionic start myApp blank --type=react
cd myApp

Lets get started. At this point you should have a blank app.

1. Open src/pages/Home.tsx and replace with the following code:

import {IonFab,IonFabButton,IonIcon, IonList,IonItem,IonCheckbox,IonLabel,IonNote,IonBadge, IonContent, IonHeader,
IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
import { add } from 'ionicons/icons';
import { RouteComponentProps } from 'react-router';

//const Home: React.FC = () => {
const Home: React.FC<RouteComponentProps> = (props) => {

  return (
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle>Ionic Blank</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent className="ion-padding">
      The world is your oyster.
      <p>
        If you get lost, the{' '}
        <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/">
          docs
        </a>{' '}
        will be your guide.
      </p>


      <IonList>
        <IonItem>
          <IonCheckbox slot="start" />
          <IonLabel>
            <h1>Create Idea</h1>
            <IonNote>Run Idea by Brandy</IonNote>
          </IonLabel>
          <IonBadge color="success" slot="end">
            5 Days
          </IonBadge>
        </IonItem>
      </IonList>

      <IonFab vertical="bottom" horizontal="end" slot="fixed">
        <IonFabButton onClick={()=> props.history.push('/new')}>

          <IonIcon icon={add} />
        </IonFabButton>
      </IonFab>


    </IonContent>
  </IonPage>
  );
  };
  export default Home;

2. Open src/App.tsx and replace the code with this code:

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
import NewItem from './pages/NewItem';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const App: React.FC = () => {
  //const isAuthed = true;
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/home" component={Home} />
          <Route path="/new" component={NewItem} />
          <Redirect exact from="/" to="/home" />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
}

export default App;

3. Create a new file src/pages/NewItem.tsx for the new route and enter this code

import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar
} from '@ionic/react';
import React from 'react';

const NewItem: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>New Item</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent></IonContent>
    </IonPage>
  );
};
export default NewItem;

Save your changes and reload the compile, it should work now.Now your app should look like this:

An image of the final render in the brower. This is how you app will look like at the end.

Good luck!