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 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 (
<IonTitle>Ionic Blank</IonTitle>
<IonContent className="ion-padding">
The world is your oyster.
If you get lost, the{' '}
<a target="_blank" rel="noopener noreferrer" href="">
</a>{' '}
will be your guide.

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

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

<IonIcon icon={add} />

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 (
<Route path="/home" component={Home} />
<Route path="/new" component={NewItem} />
<Redirect exact from="/" to="/home" />

export default App;

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

import {
} from '@ionic/react';
import React from 'react';

const NewItem: React.FC = () => {
return (
<IonButtons slot="start">
<IonBackButton />
<IonTitle>New Item</IonTitle>
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!