Importing and adding components from Ionic React

Ionic comes with a set of pre-built components you can use, these components handle a lot of styling you would normally have to worry about when building a cross platform app such as:

• Styling difference between Android and iOS devices
• Styling for Desktop, Tablet and Mobile

Since Ionic focuses on this, we can focus on building out our app and adding new features.

Note, you might notice that the files inside are Typescript files. We’ll be creating our components and pages in a new jsx appended files, so we shouldn’t have to follow any Typescript specific rules in our components.

File structure of a new Ionic React project

• /node_modules
• /public
• /src
  • /components
    • ExploreContainer.css
    • ExploreContainer.tsx
  • /pages
    • Home.css
    • Home.tsx
  • /theme
  • App.test.tsx
  • App.tsx
  • index.tsx
  • react-app-env.d.ts
  • reportWebVitals.ts
  • service-worker.ts
  • serviceWorkerRegistration.ts
  • setupTests.ts
• .gitignore
• capacitor.config.json
• ionic.config.json
• package-lock.json
• package.json
• tsconfig.json

We’ll be creating a Todo page in the /pages folder and its corresponding components in the /components folder, and they will have an extension of jsx, not tsx.

Lets create a folder called TodoPage in the pages folder. In that lets add a file named index.jsx

• /pages
  • TodoPage
    • index.jsx
  • Home.tsx
  • Home.css

The scaffolding of an Ionic-React page

Before we start building out any todo list functionality, we want to bring over the scaffolding of our app

First thing we’ll need is the IonicPage component. The Ionic page component isn’t well defined, but we could call it the highest point of a page in Ionic.

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

const Todo = () => {
  return (
    <IonPage>

    </IonPage>
  );
};

export default Todo;

Next we want to add the IonContent Component. For now lets just leave it empty

import { IonPage, IonContent } from '@ionic/react';

const Todo = () => {
  return (
    <IonPage>
      <IonContent>
      </IonContent>
    </IonPage>
  );
};

export default Todo;

Next what we want is to add a header. In our header we want to add the IonToolBar component and that component will have a component called IonTitle, which will contain the title of our component

import { IonPage, IonTitle, IonContent, IonToolbar } from '@ionic/react';

const Todo = () => {
  return (
    <IonPage>
       <IonToolbar>
         <IonTitle>Todo App</IonTitle>
       </IonToolbar>
       <IonContent>
       </IonContent>
    </IonPage>
  );
};

export default Todo;

Ionic also requires us to define the toolbar inside of our IonContent, if we dont do this, our header won’t appear on iOS

 <IonPage>
     <IonToolbar>
       <IonTitle>Todo App</IonTitle>
     </IonToolbar>
     <IonContent>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Todo App</IonTitle>
          </IonToolbar>
        </IonHeader>
     </IonContent>
 </IonPage>