Create your first Ionic 6 and React app

Paul Halliday

Ionic Framework is a great toolkit that can be used to create performant cross platform mobile applications using HTML5 technologies. You'll be creating your first Ionic 6 and React app with this tutorial!

Ionic is my favourite framework for building mobile apps with web technologies. Although React is being used in this tutorial, Ionic is "tool agnostic" and can be used with any web framework or library.

This is possible because of the way Ionic is developed. Ionic uses Stencil to create Web Components that can be used in any web framework or library. As Web Components can be used anywhere, it makes Ionic easier to maintain across the numerous supported frameworks.

For more information on how to build your own Stencil components, check out the Stencil documentation.

Downloading the Ionic CLI

To get started with Ionic, you'll need to install the Ionic CLI via npm. This will allow you to create your first Ionic app.

Node.js is required to run the Ionic CLI and surrounding tools. Ensure you've got Node installed by visiting the Node.js website.

Run the following command in your terminal:

$ npm i @ionic/cli -g

You'll then be able to run the Ionic CLI from anywhere in your terminal.

Creating a new Ionic application with React

Ionic offers two main ways of creating a new application:

  • You can use the app creation wizard to create a new Ionic app with the web interface (recommended)
  • You can use the CLI to create a new Ionic app directly with the command line interface.

You'll be using the app creation wizard in this tutorial, as it's the easiest way to get started.

Using the app creation wizard

Run the following command in your terminal:

$ ionic start

# Type y and press enter to run the wizard
? Use the app creation wizard? y

The wizard will ask you a few questions to help you create your first Ionic app.

You should see something similar to this:

Start your first Ionic app

On this screen, you'll be asked to choose a project name, various customisations, and then choose which framework you want to use.

In this instance, select the following:

  • Project name: My First App.
  • Select your own icon and color theme.
  • Select the Tabs layout template.
  • Select the React framework.

Click Continue to move on to the next step.

Authentication

Next, you'll be asked to sign in to your Ionic account.

Sign in to your Ionic account

To create a new account, enter your account details and click Create account. If you already have an account, select Log in at the bottom.

When you've successfully authenticated, you'll see the following screen:

Sign in to your Ionic account

You should now have the basis of a new Ionic app. Check your terminal for a success message that looks similar to this:

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd ./my-first-app
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

Let's get it running in the browser.

Serving the app in the browser

You can use the Ionic CLI to serve your app in the browser or on a device.

To run your project, you'll first need to navigate to the project with your terminal:

$ cd my-first-app

Next, you can run your app with the following command:

$ ionic serve

This should show the following output:

[react-scripts] ℹ 「wds」: Project is running at http://192.168.2.115/
[react-scripts] ℹ 「wds」: webpack output is served from 
[react-scripts] ℹ 「wds」: Content not from webpack is served from /Users/paulhalliday/Development/my-first-app/public
[react-scripts] ℹ 「wds」: 404s will fallback to /
[react-scripts] Starting the development server...
[react-scripts] 
[react-scripts] You can now view my-first-app in the browser.
[react-scripts]   Local:            http://localhost:8100
[react-scripts]   On Your Network:  http://192.168.2.115:8100
[react-scripts] Note that the development build is not optimized.
[react-scripts] To create a production build, use npm run build.

Your Ionic application is now running at http://localhost:8100. Open the browser at this URL to see it in action.

Ionic serve

You're not limited to just running Ionic applications in the browser. You can also run them on an iOS or Android device just as easily.

Serving an app on an iOS device

To run your app on an iOS device, you'll need to be on a Mac and have Xcode installed.

Ionic do a great job of detailing the various nuances around iOS deployment on their website.

Check this link out if you run into any issues: https://ionicframework.com/docs/developing/ios.

Start by building your application using the following command:

$ npm run build

Next, you can start a live reload server that will attach to the iOS device and automatically update when you make changes:

$ ionic capacitor run ios -l --external

Running this command will prompt you to select a device to run your app on. You can select a device by navigating with the keyboard and pressing enter on the device's name in the list.

Here's an example selection:

? Which device would you like to target? 
  iPhone 12 Pro Max (simulator) 
  iPhone 12 mini (simulator)
  iPhone 13 (simulator) 
❯ iPhone 13 Pro (simulator) 
  iPhone 13 Pro Max (simulator)
  iPhone 13 mini (simulator)

I selected iPhone 13 Pro and hit enter. This will likely be different for you.

You should then see something similar to this (reduced for brevity):

[INFO] App deployed to device!
       
       Development server will continue running until manually stopped.
       
       Use Ctrl+C to quit this process

The same application that we saw in the browser will now be running on your device. Here's what it looks like:

Run your application on an iOS Device

Next up, let's see how to run your app on an Android device.

Serving an app on an Android device

Running your Ionic application on an Android emulator can be done in a similar way to iOS.

For Android, you'll need to have Android Studio installed. You'll also need to have a virtual device created with the Android Virtual Device Manager.

To get started, ensure you've built your project using the following command:

$ npm run build

Then, in order to run this on your Android emulator, run the following command:

$ ionic capacitor run android -l --external

You'll then be asked to select a device to run your app on. Similar to how you select a device on an iOS device, you can select a device by navigating with the keyboard and pressing enter on the device's name in the list.

Your application will then start running on your emulator.

As this tutorial isn't an exhaustive list of all the ways to run Ionic on Android, check out the Ionic Framework documentation here for more information: https://ionicframework.com/docs/developing/android.

Editing the application

Now that you've got your app running, you can start editing it by opening it up inside of an editor.

I use Visual Studio Code, but you can use any editor that you like. Using VS Code, you can open up the app in your preferred editor from within the project folder:

$ code .

Within the src directory, you can find the following folders:

  • components - contains all of the components you'll be using in your app
  • pages - contains all of the pages you'll be using in your app
  • theme - contains the Ionic theme you'll be using in your app

You can see an example of a component in the components folder.

Open up Tab1.tsx in your preferred editor. It'll look like this:

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import ExploreContainer from "../components/ExploreContainer";
import "./Tab1.css";

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse='condense'>
          <IonToolbar>
            <IonTitle size='large'>Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name='Tab 1 page' />
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

Each part of the application is broken up into small, configurable components. Here are some important things to note:

  • IonPage - This is the root component of the page. It's the parent of all other components.
  • IonHeader - This represents header of the page.
  • IonToolbar - This is the main toolbar that sits at the top of the page.
  • IonContent - This is the main content area of the page. This is where you'll put all of your content, as it has a powerful scrollable view.

Ionic is consistent with the way it's designed and offers a variety of components to help you build your app. You can see a list of all the components here: https://ionicframework.com/docs/components.

You can see how the tabs are configured in the App.tsx file.

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/tab1">
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/tab1" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon icon={ellipse} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

The tabs are configured with the IonReactRouter. This is a wrapper around the React Router library. The main benefit of this is that Ionic provides a nice, clean, and simple way to handle routing across multiple platforms.

Using Ionic components

Now that we've taken a look at the components within the tabs template, let's take a look at other components that you can use in your app.

We'll create a contact list inside of the Tab1 page that displays a list of contacts in an IonCard.

Created a file at /src/data/data.json and add the following generated content:

[
  {
    "name": "Velma Rose",
    "phone": "(01343) 42529",
    "note": "et, commodo at, libero. Morbi accumsan laoreet ipsum. Curabitur"
  },
  {
    "name": "Cruz Hobbs",
    "phone": "(0191) 258 6216",
    "note": "ut, ipsum diam, dolor"
  },
  {
    "name": "Philip Mcfadden",
    "phone": "07624 871741",
    "note": "feugiat nec, diam. Duis"
  },
  {
    "name": "Rama Harmon",
    "phone": "055 3279 6498",
    "note": "sit amet diam eu dolor"
  },
  {
    "name": "Tamekah Farley",
    "phone": "(0119) 520 5338",
    "note": "sociis natoque penatibus et"
  }
]

Next create a Card component that wraps IonCard at inside of /src/components/Card.tsx:

import {
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
} from "@ionic/react";
import React, { ReactElement } from "react";

export type CardProps = {
  title: string;
  subtitle: string;
  content: string;
};

export default function Card({
  title,
  subtitle,
  content,
}: CardProps): ReactElement {
  return (
    <IonCard>
      <IonCardHeader>
        <IonCardTitle>{title}</IonCardTitle>
        <IonCardSubtitle>{subtitle}</IonCardSubtitle>
      </IonCardHeader>

      <IonCardContent>{content}</IonCardContent>
    </IonCard>
  );
}

This component is used to display a single contact. It takes the title, subtitle, and content as props. Creating a Card component allows us to have an easy way to reuse the same component throughout the application.

Finally, update Tab1.tsx to render the Card component for each contact in the list by using the map function to iterate over the list of contacts.

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

import "./Tab1.css";
import Card from "../components/Card";
import people from "../data/data.json";

type Person = {
  name: string;
  phone: string;
  note: string;
};

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Contacts</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse='condense'>
          <IonToolbar>
            <IonTitle size='large'>Contacts</IonTitle>
          </IonToolbar>
        </IonHeader>
        {people?.map((person: Person, index: number) => (
          <Card
            key={index}
            title={person.name}
            content={person.note}
            subtitle={person.phone}
          />
        ))}
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

You should now be able to see a list of cards with the contact information. Here's a screenshot of the contact list:

Contact list

Conclusion

Ionic is a powerful framework that allows you to build cross-platform apps with a single codebase. It's easy to use and provides a great user experience. You can create a new application in record time, without having to be reliant on one particular JavaScript framework.

Click here to see more Ionic tutorials!

Paul Halliday's avatar
Paul Halliday's avatar

Paul Halliday

Creator ● developer.school

Passionate about cross-platform web and mobile development.

developer.school

© 2021 developer.school. All rights reserved.

© 2021 developer.school | All rights reserved

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox weekly.